javascript - 如何在chrome或firefox中获取图片数据或图片在网页上的缓存路径？

Question

我正在制作一个插件(附加组件)来在任何页面上上传图片。 只能获取图片的url，想获取图片数据或者图片本地缓存。

在 chrome 或 firefox 上通过 javascript。

Answer 1

我是通过 Canvas 在我的扩展程序中完成的。

我创建了两个函数。首先使用“toDataURL()”方法从 Canvas 获取图像数据(返回当前 Canvas 的内容作为图像，您可以将其用作另一个 Canvas 或 HTML 元素(如 img)的来源)，然后使用此数据获取 BLOB 对象。

function getImageDataURL(url) {
var data, canvas, ctx, blob;
var img = new Image();

img.onload = function() {
    canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    try {
        data = canvas.toDataURL();
        blob = dataURIToBlob(data);
    } catch(e) {
        // Handle errors here
        alert(e);
    }
};

img.src = url;
};

function dataURIToBlob (dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ab = [];

for (var i = 0; i < byteString.length; i++) 
    ab.push(byteString.charCodeAt(i)); 

return new Blob([new Uint8Array(ab)], { type: mimeString });
};

在“blob”变量中，我们有包含完整图像数据的 BLOB 对象。