画布到图像显示为无图像(空白）

canvas to image shows as no image (blank)

本文关键字：图像 空白 显示      更新时间：2023-09-26

我正在使用dataurl将画布转换为图像。我有以下代码，在控制台中没有输出错误。似乎有些工作，但是当我访问数据网址时，它显示一个空白图像。

window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var imageObj = new Image();
    imageObj.onload = function() {
        var myImage = context.drawImage(imageObj, 0, 0);        
        var myImg = canvas.toDataURL("image/png");
        document.getElementById("canvasimg").setAttribute("src", myImg);
    };
    imageObj.src = "http://img801.imageshack.us/img801/5641/3cc67ca1a74049ce99bc92b.png";
};
<canvas id="myCanvas" width="578" height="400"></canvas>
<img id="canvasimg" alt="" src="">

看看你在做什么。您是在加载图像时绘制图像，但在绘制图像之前将其转换为数据 URL！将该toDataURL调用和setAttribute调用移动到onload函数内。

测试您发布的代码，我收到安全错误。这是意料之中的。画布有一个干净原点标志，一旦该标志为假，你就无法从中提取数据。

这是一个更详细的相关问题

答案中链接到的文档

相关文章：