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

Question

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

示例:

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

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

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

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

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

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

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 header 的图像)

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