如何加载新图像并将其绘制到画布上

how to load new image and draw it to the canvas?

本文关键字：绘制 图像 何加载 加载 新图像      更新时间：2023-09-26

我有一个图像，并在画布上绘制该图像。现在我想更改图像的来源，并再次在画布中绘制图像。我试过下面的代码，这里是jsfiddler。画布的绘画没有改变。。。。该怎么办？

HTML

<button onclick="change_2_new_image();">change_image()</button>  
<img id="test" src="http://static.clickbd.com/global/classified/item_img/374646_0_original.jpg" alt="error" title="This is an image" />
<canvas id="myCanvas" width="320px" height="275px"><canvas>

JS-

    var img;
$(function () {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    img = document.getElementById("test");
    img.ready = function () {
        alert("asasas");
    };
    ctx.drawImage(img, 0, 0);
});
function change_2_new_image() {
    $('#test').attr("src", "http://upload.wikimedia.org/wikipedia/en/9/9a/Grameenphone_Logo.png");
    img = document.getElementById("test");
    ctx.drawImage(img, 0, 0);
}

您的问题在于变量范围。您无法从函数访问ctx。

function change_2_new_image() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    $('#test').attr("src", "http://upload.wikimedia.org/wikipedia/en/9/9a/Grameenphone_Logo.png");
    img = document.getElementById("test");
    ctx.drawImage(img, 0, 0);
    ctx.render()
}

以上内容现在应该起作用了。

ctx是在闭包内部定义的，而不是在change_2_new_image()中定义的，这就是控制台中弹出错误消息ReferenceError: ctx is not defined的原因。修复后，您可能还会注意到图像有时还没有加载。使用jQuery的on（'load'，…）事件。有关更多信息，您可以查看以下线程：加载的图像的jQuery事件

希望能有所帮助！

相关文章：