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

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

我的问题是可以将图像显示到画布而不是html img标签。 这样我就可以根据需要拖动和裁剪图像。

但是如何在画布中显示它？

此外，我想使用PHP实现保存该图像，但现在让我知道以前的问题。

提前致谢。

Answer 1

使用CanvasRenderingContext2D.drawImage 。

function createImage(source) {                
  var ctx = document.getElementById('canvas').getContext('2d');
  var pastedImage = new Image();
  pastedImage.onload = function(){
    ctx.drawImage(pastedImage, 0, 0);
  };
  pastedImage = source;
}

MDN似乎也有很好的例子 。

Answer 2

尝试这个

 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安全限制同源策略 。

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

如果您尝试http://facebook.com/..image/或其他东西，那么它将引发安全错误。