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

我试图在画布上画一幅图像。从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");

试试这个：

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);
};

---

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

尝试以下代码。。。您已经在绘制图像后提供了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);

    };

---

我想它会解决你的问题

我在Chrome上试用了你的代码，就在这个页面上，使用开发者工具，使用这个页面中的一个现有图像，并将画布附加到主体上。代码运行得很好，问题一定在其他地方。

加载处理程序是异步运行的；在下载映像之前，它不会执行。当前脚本将继续执行，以便在图像下载之前拍摄画布的快照。将处理移到加载处理程序中，以确保在捕获之前已绘制所有内容

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

---

问题出在upcan.toDataURL（“image/png”）；中；。由于安全原因，它不会绘制来自外部的图像。

我不需要附加它。我在绘图后将其保存为图像。我还画了一些其他的画布在这张上，效果很好，但图像绘制不起作用！。您是否检查了开发工具以确保找到了

photobooth.png

！问题是当我使用upcan.toDataURL（“image/png”）；它没有得到正确的数据！它省略了在pb.onload中完成的所有操作！这不是问题所在。如果你访问网站上的画布教程，无论什么地方，src都是在绘制图像之后

onload

是异步调用的。您需要在

src

属性之前设置它，以确保在加载文件时可以调用某些内容；它不能完全接受它！

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