javascript - How can I get Image data or the path of cache of Image on WebPage in chrome or firefox?

Question

I'm making an plugin(add-on) to upload image on any page. I only can get the url of the image, but I want to get the image data or local cache of image.

by javascript on chrome or firefox.

Answer 1

私はキャンバスを介して自分の拡張機能でそれを行いました。

2つの関数を作成しました。最初に「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オブジェクトがあります。