Javascript 简单的将图像转换为画布不工作

我无法让这个简单的代码工作。不明白为什么

$(document).ready(function() {

    function convertImageToCanvas(image) {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        canvas.getContext("2d").drawImage(image, 0, 0);
        return canvas;
    }

    $('.img-class').each(convertImageToCanvas);

});

---

我做错了什么？

您应该将

图像

变量替换为

此

。通过param传递的

图像

变量表示一个索引。

此

值表示图像元素

请注意，您只是在创建canvas元素。您应该将画布附加到另一个DOM元素，以查看它在浏览器中的渲染效果

$(document).ready(function() {

    function convertImageToCanvas() {
        var canvas = document.createElement("canvas");
        canvas.width = this.width;
        canvas.height = this.height;
        canvas.getContext("2d").drawImage(this, 0, 0);
        return canvas;
    }

    $('.img-class').each(convertImageToCanvas);

});

看看代码笔。

试试看

    $(document).ready(function() {
    // `i` : `index` , `image` : `DOM` `img` `element` 
    function convertImageToCanvas(i, image) {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(image, 0, 0);
        // do stuff 
    };
    $('.img-class').each(convertImageToCanvas);
   });

JSFIDLE

看