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

Question

我正在制作一个插件（附加组件）以在任何页面上上传图像。我只能获取图像的url，但我想获取图像数据或图像的本地缓存。

通过 chrome 或 firefox 上的 javascript。

Answer 1

我通过画布在我的扩展中做到了。

我创建了两个函数。首先使用“toDataURL()”方法从画布中获取图像数据（将当前画布的内容作为图像返回，您可以将其用作另一个画布或 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 对象。

Answer 2

您可以使用 indexeDB（内部浏览器数据库）来存储对象而不是 URL。有关详细使用，请参阅 Google 开发教程。