标签：html javascript base64 png canvas

我有一个装有png图像的画布.我通过.toDataURL()方法得到它的jpg base64字符串,如下所示：

 $('#base64str').val(canvas.toDataURL("image/jpeg"));

但是png图像的透明部分在新的jpg图像中显示为黑色.

任何解决方案将此颜色更改为白色？提前致谢.

解决方法:

出现这种变黑是因为’image / jpeg’转换涉及将所有画布像素的alpha设置为完全不透明(alpha = 255).问题是透明的画布像素是全黑色但透明的.因此,当您将这些黑色像素变为不透明时,结果就是黑色的jpeg.

解决方法是手动将所有非不透明画布像素更改为所需的白色而不是黑色.

这样,当它们变得不透明时,它们将显示为白色而不是黑色像素.

这是如何做：

// change non-opaque pixels to white
var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
var data=imgData.data;
for(var i=0;i<data.length;i+=4){
    if(data[i+3]<255){
        data[i]=255;
        data[i+1]=255;
        data[i+2]=255;
        data[i+3]=255;
    }
}
ctx.putImageData(imgData,0,0);

标签：html,javascript,base64,png,canvas
来源： https://codeday.me/bug/20191001/1838644.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。