use base64 src

[marlti7]

i just want pass in source url to return base64 url,beacause use DomElement have many trouble in Meteor.

[marlti7]

i write a function to solve it.like this..

ImgCache.getFileContentAsBase64 = function(path,callback){ window.resolveLocalFileSystemURL(path, gotFile, fail);

  function fail(e) {
        alert('Cannot found requested file');
  }

  function gotFile(fileEntry) {
         fileEntry.file(function(file) {
            var reader = new FileReader();
            reader.onloadend = function(e) {
                 var content = this.result;
                 callback(content);
            };
            // The most important point, use the readAsDatURL Method from the file plugin
            reader.readAsDataURL(file);
         });
  }
}

And get base64 url like this: ImgCache.isCached(fixUrl, function(path, success) { if (success) { // already cached path = ImgCache.private.getCachedFileFullPath(path); ImgCache.getFileContentAsBase64(path, function(base64Image) { //window.open(base64Image); console.log(base64Image); // Then you'll be able to handle the myimage.png file as base64 }); } else { // not there, need to cache the image ImgCache.cacheFile(fixUrl, function() { path = ImgCache.private.getCachedFileFullPath(path); ImgCache.getFileContentAsBase64(path, function(base64Image) { //window.open(base64Image); console.log(base64Image); // Then you'll be able to handle the myimage.png file as base64 }); }); } });

[chrisben]

Isn't the useDataURI option what you were looking for?

[GeorgeD19]

With useDataURI set to true I attempt to cache an image with src="data:image/jpeg;base64,iVBORw0KGg..." I get ERROR: Download error target: /imgcache/b994b7f9d5e8cc60ba46a0a04c71a025ccf500c7 ERROR: Download error code: 0

Any ideas on why this is?

[GeorgeD19]

Looking at the test script index.html it passes in a normal url from $test_img.attr('src'), that being $test_img = $('#test_img').clone(); which is "https://i.imgur.com/RpikbHf.jpg" not "data:..." so it's not testing correctly.

[chrisben]

I think I see what your problem is. You want to cache images that are defined as "data:image" in the html. Those images don't need to be cached because they are already within the html. If the library fails to recognise "data:image" urls that needs to be fixed. If all your images are defined as such, you do not need this library.

Further note: the useDataURI option is only there if you want to cache a file retrieved via a normal url and store it as a "data:image" within the html instead of using the browser cache. The corresponding test is there to check nothing breaks when the option is activated.