1

How can i get the binary from an <img> element that is already loaded, in firefox OR chrome (I can use either), without making a new request to get a new copy of the image? (the normal solution is a new XMLHttpRequest to get a new copy) It's not a performance thing, I absolutely cannot make another request to get a copy of the image, I HAVE to load it from cache, without alerting the origin website. I can use JavaScript, npapi, or pretty much anything else, I'm just not sure where to start

hanshenrik
  • 19,904
  • 4
  • 43
  • 89
  • 3
    You can check this answer - http://stackoverflow.com/questions/934012/get-image-data-in-javascript Will it help? – nstoitsev Mar 04 '16 at 07:29
  • @nstoitsev omg, yes indeed! - you could post it as an answer i guess – hanshenrik Mar 04 '16 at 07:38
  • @nstoitsev per http://meta.stackoverflow.com/questions/295672/is-it-acceptable-to-reuse-old-answers-if-theyre-applicable-to-new-non-duplicat , you could probably copy the code for an answer – hanshenrik Mar 04 '16 at 07:47
  • I don't know. Your question is pretty similar to the one I liked and it will not be fare just to copy the code. Also it's good when similar questions are marked as such because if somebody stumble upon this question he will be able to go to the discussion in the other question. – nstoitsev Mar 04 '16 at 07:50
  • fair enough, i guess somebody should mark this as a duplicate, possible duplicate, or something like that.. don't expect me to do it tho, that's a "privilege" i haven't earned – hanshenrik Mar 04 '16 at 07:54
  • I also don't have this privilege yet. – nstoitsev Mar 04 '16 at 07:55
  • You would use the cache service, check this out - http://stackoverflow.com/questions/27842615/how-to-find-specific-cache-entries-in-firefox-and-turn-them-into-a-file-or-blob – Noitidart Mar 06 '16 at 07:05

1 Answers1

0

you can use FileReader.readAsBinaryString()

here is the FileReader version, but the toBlob method has browser limitation:

var canvas = document.createElement('canvas');
var height = 200;
var width  = 200;
canvas.width  = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
var img = document.getElementById("img001");
ctx.drawImage(img, 0, 0);

canvas.toBlob(function (blob) {
  var reader = new FileReader();

  reader.onloadend = function () {
    console.log(reader.result);
  };

  reader.readAsBinaryString(blob);
});

demo

Yangguang
  • 1,785
  • 9
  • 10
  • on an element? how? `var fd=new FileReader();fd.readAsBinaryString(document.getElementsByTagName("img")[0]);`: Uncaught TypeError: Failed to execute 'readAsBinaryString' on 'FileReader': parameter 1 is not of type 'Blob'. – hanshenrik Mar 04 '16 at 07:28
  • FireReader reads from the browser's local file system. To use it you need to find where the file is cached locally and there is no web API for that. – nstoitsev Mar 04 '16 at 07:52