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”）;.出于安全原因，它不会绘制源自外部的图像。

将图像绘制到画布上不起作用

7 个答案: