使用toDataURL()方法从画布元素导出的图像是否为黑色背景？真的很烦人的问题不是吗？
HTMLCanvasElement.toDataURL()方法以type参数指定的格式返回数据URI, 该数据URI包含图像的表示形式(默认为PNG)。
图片的黑色背景是由错误的导出格式引起的, 如果你遇到此问题, 则可能是通过以下方式导出图片的：
var Image = canvas.toDataURL("image/jpeg");
通常, 你将省略第一个参数(格式), 因为它将始终为PNG, 但是如果你明确指定格式并且图像具有透明度, 则将面临此问题。
要解决此错误, 请将第一个参数从image / jpeg更改(或省略)为image / png。
var Image = canvas.toDataURL("image/png");
// Or without parameter because the default exporting format is PNGvar Image = canvas.toDataURL();
为什么需要将图像导出为PNG格式？【从画布创建的图像具有黑色背景(HTML5)】仅仅因为如果你的画布具有透明背景, 并且导出的格式是JPG, 就不可能生成JPG格式的透明性, 因为仅PNG格式支持透明性。
推荐阅读
- 如何在DOM元素上保存信息，数据属性介绍HTML5
- 每个开发人员都应了解的10条Twig技巧和基本功能
- 如何使用Typescript在Window对象上声明新属性
- 反混淆JavaScript代码并从脚本中检索源代码
- 如何在iframe中拒绝你的网站对第三方网站的访问
- 使用javascript html5在画布上绘制点(圆)
- 如何使用Webpack从生产版本中删除console.log(或自定义调试功能)
- MPAndroidChart如何让y轴以非零值开始（）
- Android Studio中单选按钮的onClick（）的替代选项