CODEWITHSUNDEEP
javascriptgoogle-chrome-extensionfirefox-addon
wudijimao
wudijimao

Reputation: 53

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

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.

Upvotes: 3

Views: 1378

Answers (2)

Peanuts-83
Peanuts-83

Reputation: 3

You could use indexeDB (internal browser data base) that takes objets to store instead of URL. See Google dev tutorials for detailled use.

Upvotes: 0

Ceridan
Ceridan

Reputation: 2516

I did it in my extension via canvas.

I created two functions. First getting image data from canvas using "toDataURL()" method (Returns the content of the current canvas as an image that you can use as a source for another canvas or an HTML element (such as img)), and then using this data to get BLOB object.

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 });
};

Here in the "blob" variable we have BLOB object with full image data.

Upvotes: 1

Related Questions