Question

我有一个相当具体的问题。我需要从img标签中选择图像而不重新加载。我需要在画布中使用图像，但我需要第一次抓取的相同图像，因为它自动生成并且每次都会更改。

示例：

<img src="generated_image.php" id="pic"/>

现在，我试图找到一个解决方案，但我找到的每个页面都建议使用：

var image = new Image();
image.src = document.getElementById('pic').src;

使用该解决方案，javascript从url抓取图像，并且由于url另一侧的图像是自动生成的，因此会发生变化。

有没有办法从内存中而不是从服务器中选择图像？

P.S。当我右键单击并使用另存为时，会发生同样的事情。目前我能想到的唯一方法是右键单击图像，单击复制图像，然后粘贴到绘画中并保存。不幸的是，我不能指望我的客户这样做。谢谢。

P.P.S。我无法访问服务器端图像生成，因此我必须在我的最终完成。我更喜欢干净的javascript，但如果有任何库可以做到这一点，我会乐意使用它们。

谢谢你，伊万

当前代码：

if (canvas.getContext) {
    ctx_canvas = document.getElementById('canvas');
    ctx=ctx_canvas.getContext("2d");
    var img = new Image();
    img.onload = function () {
        ctx.drawImage(img, 0, 0);
    };
    img.src = document.getElementById('image').src;
}

Answer 1

试试这个（但请注意，服务器必须使用Access-Control-Allow-Origin标头提供图像）

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("preview");
ctx.drawImage(img, 10, 10);
alert(c.toDataURL());

javascript从img标签中选择图片而不重新加载图片

1 个答案: