问题描述

js利用canvas.toDataURL("image/png")将canvas元素转化为base64的图片编码。

python获取base64编码并解码并且保存为图片储存。再利用opencv打开图片时失败。

html部分代码，包含canvas和from，用于绘制图形和向后台传输base64的值

{% csrf_token %}

submit

此处为JS部分代码，主要是实现绘图功能和base64编码，将canvas转化为png的base64编码

down = 0;//记录鼠标按下状态

function upload(){

var canvas = document.getElementById("myCanvas");

url = canvas.toDataURL("image/png");//将canvas转化为png的base64编码

document.getElementById('photo').value = url;

document.getElementById('submit').click();//触发from的submit

}

//当鼠标按下并滑动时，绘制黑色圆点

function cnvs_getCoordinates(e){

if(down) {

var canvas = document.getElementById("myCanvas");

bbox = canvas.getBoundingClientRect();

x = Math.round((e.clientX - bbox.left) * (canvas.width / bbox.width));

y = Math.round((e.clientY - bbox.top) * (canvas.height / bbox.height));

var ctx=canvas.getContext("2d");

ctx.beginPath();

ctx.arc(x,y,15,0,360,false);

ctx.fill();

ctx.closePath();

}

}

此处为python处理base64编码部分

strs = request.POST.get('img').split(',')[1]#获取base64编码

imgdata = base64.b64decode(strs)#解码

file = open('0.png', 'wb')#保存为0.png的图片

file.write(imgdata)

file.close()

pimg = Image.open('0.png')#获取图片

cv2.namedWindow("Image")#创建窗口

cv2.imshow("Image",pimg)#显示图片

cv2.waitKey(0)

cv2.destroyAllWindows()

以下为截图

页面截图

opencv imshow截图

保存的图片

该图片由js生成的base64为

data:image/png;base64,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