0

我有以下代码：

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 图像标签显示图像，并为图像提供适当的高度和宽度。

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

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

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

提前致谢。

4

2 回答 2

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 似乎也有很好的例子。

于 2012-06-04T06:33:27.183 回答
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 安全限制同源策略。

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

如果您尝试http://facebook.com/..image/或其他内容，则会引发安全错误。

于 2012-06-04T06:59:11.830 回答