在不使用 URL 的情况下下载 <img>

Question

下载 <img> 的网址很简单。当网址无法访问时，图像仍然可以在显示器上看到并右键单击复制到剪贴板，但不能右键单击另存为。

此时，是否可以使用JavaScript将图像保存到磁盘？（当然不用鼠标）

在 https://www.sunday-webry.com/viewer.php?chapter_id=3101 上有这样的 <img> 测试，其中所有 blob:... 图像立即变得无法访问，即使是最快的开发人员也无法捕捉到它们。

该代码仅在最新版本的最先进浏览器下运行。

Answer 1

可以通过 canvas ():

Object.defineProperty
(
    HTMLImageElement.prototype,'toDataURL',
    {enumerable:false,configurable:false,writable:false,value:function(m,q)
    {
        let c=document.createElement('canvas');
        c.width=this.naturalWidth; c.height=this.naturalHeight;
        c.getContext('2d').drawImage(this,0,0); return c.toDataURL(m,q);
    }}
);

不修改属性 ():

function getBase64Image(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.naturalWidth
    canvas.height = img.aturalHeight

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check img.src to
    // guess the original format, but be aware the using "image/jpg"
    // will re-encode the image.
    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

请注意，使用 naturalWidth 和 naturalHeight 而不是 width 和 height，因为当图像被固定或设置为 fixed 时，后者会导致裁剪图像尺码。

但是，通过将图片打印到 canvas，质量可能会下降。请问有没有什么方法可以直接从内存中获取图片

在不使用 URL 的情况下下载 <img>

Download <img>s without using their URL

javascript

blob