python的opencv读取解码的base64图片失败

Question

问题描述

js利用canvas.toDataURL("image/png")将canvas元素转化为base64的图片编码。
python获取base64编码并解码并且保存为图片储存。再利用opencv打开图片时失败。

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

<canvas id="myCanvas" width="240" height="240" style="border: 1px solid black;"  onmousedown="down = 1;" onmouseup="down = 0;" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></canvas>
<form  method="post" style="display: none">
    {% csrf_token %}
    <input type="text"  name="img" id="photo">
    <button type="submit"  id="submit">submit</button>
</form>
<div >
    <button type="button" onclick="upload()">上传</button>
</div>

此处为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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

参考过的网址
stackoverflow

Answer 1

问题解决了，再最开始给canvas一个纯白色的背景就可以解决问题。

var canvas = document.getElementById("myCanvas");
var imgObj = new Image();
imgObj.src = "/static/background.png";
imgObj.onload = function () {
    var ctx = canvas.getContext('2d');
    ctx.drawImage(this,0,0,240,240)
}

Answer 2

我现在反过来想用python3.X实现canvas.toDataURL的转码，但没找到方法