javascript - 在画布上绘制图像不起作用

Question

我正在尝试在画布上绘制图像。该图像位于 html 文件的文件夹中。但是当我调用 drawImage() 函数时，图像不会绘制。这是我的代码，

var upcan = document.createElement("canvas");
upcan.width = "190";
upcan.height = "380";
upcan.style.cssText = 'border-radius:25px; '
var upctx = upcan.getContext('2d');

var pb = new Image();

pb.onload = function() {
upctx.drawImage(pb,0,0,100,400);
};
pb.src = "photobooth.png";
var canvasData = upcan.toDataURL("image/png");

Answer 1

试试这个代码......你已经在绘制图像之后提供了 src 所以它现在正在绘制......

var upcan = document.createElement("canvas");
    upcan.width = "190";
    upcan.height = "380";
    upcan.style.cssText = 'border-radius:25px; '
    var upctx = upcan.getContext('2d');

    var pb = new Image();
    pb.src = "~/../urpath/photobooth.png"; //give here proper path
    pb.onload = function() {
    upctx.drawImage(pb,0,0,100,400);

    };

我认为它会解决你的问题

Answer 2

    var upcan;
    var img = d.createElement('img');
    var reader = new FileReader();
    reader.onload = (function(aImg, aName) { 
       return function(e) {
        aImg.src = e.target.result;
        aImg.onload = function(){
            var upcan = createImgCanvas(aImg, 100, 400);
        }
    }; })(img, file.name);
    reader.readAsDataURL(file);

function createImgCanvas(img, imgWidth, imgHeight) {
    var canvas = document.createElement('canvas');
    canvas.width = imgWidth;
    canvas.height = imgHeight;
    var imageCanvas2D = canvas.getContext("2d");
    try{
        imageCanvas2D.drawImage(img, 0, 0, imgWidth, imgHeight);
    } catch(err) { alert(err);}
    return canvas;
}

Answer 3

试试这个：

var upcan = document.createElement("canvas");
upcan.width = "190";
upcan.height = "380";
upcan.style.cssText = 'border-radius:25px; '
var upctx = upcan.getContext('2d');

var pb = new Image();
pb.src = "photobooth.png";
pb.onload = function() {
upctx.drawImage(pb,0,0);
};

Answer 4

首先，您是否将画布附加到文档或任何其他元素？

Answer 5

我在此页面上使用开发人员工具在 Chrome 中尝试了您的代码，使用此页面中的现有图像之一并将画布附加到正文。代码运行良好，问题一定出在其他地方。

Answer 6

负载处理程序异步运行；直到图像下载完成后才会执行。当前脚本将继续执行，因此将在图像下载之前拍摄画布的快照。将您的处理移动到负载处理程序中，以确保在捕获之前已绘制所有内容。

pb.onload = function() {
    upctx.drawImage(pb,0,0,100,400);
    var canvasData = upcan.toDataURL("image/png");
    // do stuff
};
pb.src = "photobooth.png";

Answer 7

问题出在 upcan.toDataURL("image/png"); 中。由于安全原因，它不会绘制来自外部的图像。