画布使用toDataURL(" image /jpeg")获取空白图像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>Test</div>
<canvas id="canvas"></canvas>
<script>
const data = ""//long char,base64 in github
</script>
<script>
function watermarking(file, date, callback) {
const img = new Image();
img.src = file;
img.onload = function () {
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
let width = img.width;
let height = img.height;
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
const newBase64 = canvas.toDataURL("image/jpeg");
callback(newBase64);
};
img.onerror = (e) => {
console.log(e);
};
}
watermarking(data, "2022-11-11", (base64) => {
console.log("base64 url:", base64)
})
</script>
</body>
</html>当我使用这个图像获取base64 url时，画布toDataURL()得到一个空白图像，其他图像得到了所期望的效果，我不知道为什么。
从铬原木的结果来看，有很多A！
从结果来看，异步应该不会生效，从而导致toDataURL或drawImage()获得一个空白映像。
回答 1
Stack Overflow用户
发布于 2022-07-23 07:10:50
这里肯定发生了一些奇怪的事情。
首先要注意的是，包含在数据中的图像似乎已经损坏，至少Photoshop拒绝打开它，声称“遇到了意外的文件结束”。
实际上，在macOS预览应用程序中尝试使用任何其他图像，甚至打开相同的图像，并以相同的设置保存起来，都是很好的。
所以最好的办法就是重新编码你的形象。如果这种情况发生得更频繁，您可能需要打开一个新的问题，解释如何生成此图像。
至于奇怪的是，浏览器实际上能够打开和解码该图像，但似乎Chrome在被询问之前不会这样做，但仍然会触发load事件，它不会等到图像被解码后才从drawImage返回。这是他们的错误。drawImage是同步的，它应该等待图像解码后才返回。据我所知，Chrome期望在load事件触发时，解码已经发生，因此他们不会签入比is_loaded更远的is_loaded代码。
无论如何，一个快速的解决办法是调用HTMLImageElement.decode()方法，它将在解码完全完成时返回一个承诺解析，甚至对于这个看似破碎的图像也是如此。
但是再一次，对你来说最好的就是重新编码那个图像。
https://stackoverflow.com/questions/73076716
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号