将后台的图像数据传回前台并显示出来

---

思路：

---

后台：numpy array格式的图像数据 转化成 base64编码
前台：js中将后台传过来的数据转换成base64图片显示

代码：

后台：（python）

import base64

class MixImageHandler(MixWebHandler):
@tornado.web.authenticated
def post(self):

	# 1. 将图像数据保存为 numpy array    
	img_data = np.array(img, dtype=np.uint8)

	# 2. 对数组的图片格式进行编码
	success,encoded_image = cv2.imencode(".png",img_data)

	 # 3. 将数组转为bytes
	img_bytes = encoded_image.tobytes()
    
	# 4. 编码成base64
	b64_code = base64.b64encode(img_bytes)

	# 5. 返回给前台
	self.finish(b64_code)

前台：（Js）

// 1. 找到用来显示img的canvas
var mics3dmodel = document.getElementById("canvas3d_model");  
var ctx_3dmodel = mics3dmodel.getContext("2d");
var ctx_width = mics3dmodel.width;
var ctx_height = mics3dmodel.height;
ctx_3dmodel.clearRect(0,0,ctx_width,ctx_height);

$.post("project/model",{
            "a":a,
            "b":b,
            "c":c,
        },function(data){
        	// 2. 新建一个img，用来显示图片
            var outputImg = document.createElement('img');
            outputImg.setAttribute("width", ctx_width_info);
            outputImg.setAttribute("height", ctx_height_info);
            outputImg.src = 'data:image/png;base64,'+data;
            // 3. 将img添加在DOM树中
            document.getElementById("container").appendChild(outputImg);
            // 4. 在canvas中显示出来
            outputImg.onload=function(){ 
                ctx_3dmodel.drawImage(outputImg,0,0); 
                var imagedata = ctx_3dmodel.getImageData(0,0,ctx_width,ctx_height); 
                ctx_3dmodel.createImageData(imagedata); 
            }
        });

总结：

1. 刚开始使用Blob对象接收后台传过来的byte[]数据，大概是因为解析的问题，导致数据并没有获取到。后来换了这种思路，成功实现。
2. 之前img的onload事件总是触发不了，也把img.src的位置写到img.onload之前，但还是没有触发。后来经过别人指点，发现不是这里的问题，而是前面图片数据没有获取到，也就是图片并没有加载完成，才导致不能触发img的onload事件，因为img的onload事件是在图片加载完成后立即执行。