Question

我正在制作插件（插件）以在任何页面上传图片。我只能获取图像的网址，但我想获取图像的图像数据或本地缓存。

在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对象和完整的图像数据。

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

1 个答案: