javascript - 在 JavaScript/jQuery 中使用 Canvas 显示图像

Question

我有以下代码:

function createImage(source) {                
var pastedImage = new Image();                
pastedImage.onload = function() {                                        
document.write('<br><br><br>Image: <img src="'+pastedImage.src+'" height="700" width="700"/>');                                                                                                         
}
pastedImage.src = source;                
}

这里我通过在 document.write 中编写的 html 图像标签显示图像，并为图像提供适当的高度和宽度。

我的问题是可以在 Canvas 上显示图像而不是 html img 标签吗？这样我就可以根据需要拖动和裁剪该图像？

但是如何在 Canvas 上显示它呢？

此外，我想使用 PHP 实现保存该图像，但现在请让我了解之前的问题。

Answer 1

试试这个

 var ctx = document.getElementById('canvas').getContext('2d');

    var img = new Image();   // Create new img element  
    img.onload = function(){  
      // execute drawImage statements here  This is essential as it waits till image is loaded before drawing it.
 ctx.drawImage(img , 0, 0);

    };  
    img.src = 'myImage.png'; // Set source path  

确保图像托管在与您的网站相同的域中。阅读本文了解 Javascript 安全限制 Same Origin Policy .

例如如果您的网站是http://example.com/那么图像应该托管在 http://example.com/../myImage.png

如果你尝试http://facebook.com/..image/或者其他什么，然后它会抛出安全错误。