我有以下代码:
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 实现保存该图像,但现在请让我了解之前的问题。
最佳答案
试试这个
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/或者其他什么,然后它会抛出安全错误。
关于javascript - 在 JavaScript/jQuery 中使用 Canvas 显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10877125/