Wanted to expand the solution of https://stackoverflow.com/a/20285053/3891356 to process all the images in a page and make them base64, but I think I have a scope or visibility problem. Method toDataURL can be seen on the previous link. I tested in isolation and it works.
document.addEventListener('DOMContentLoaded', function() {
var images = document.getElementsByTagName('img');
var imageArray = [];
for(var i = 0; i < images.length; i++) {
imageArray.push(toDataURL(images[i].src));
images.src[i] = imageArray[i];
}
}, false);
function toDataURL(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
Console log is
Uncaught TypeError: images.src is undefined
and
Uncaught TypeError: callback is not a function
Maybe the problem is that push() takes some time (since toDataURL is making a request) and this means I can't assign to images.src?
Much thanks.
Related
I am taking the image link as POST Method and I want to convert the image link as BLOB and store it on local storage for offline work.
function convertFileToDataURLviaFileReader(url, callback){
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function () {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.send();
}
I called the method as follows -
convertFileToDataURLviaFileReader($rootScope.currentUser.profile,function(base64Data){
window.localStorage.setItem(LOCAL_IMAGE_KEY, base64Data);
});
I am using this method but its not working. Would someone let me know the the problem and provide me solution for this?
I have a object like this
{
id: "114898379136253"
leadgen_export_csv_url: "https://www.facebook.com/ads/lead_gen/export_csv/?id=379136253&type=form&source_type=graph_api",
locale: "en_US"
name: "Untitled form 11/7/2017"
status: "ACTIVE"
}
I want get the file content, to fill my database with the leads that come from this file.
In my case, I need to treat the CORS also, because is a external URL, but I need some help in this solution, transform in a buffer and read the buffer? Or exist some better solution ?
function loadFile(file) {
var xhr = new XMLHttpRequest();
xhr.open('GET', file, true);
xhr.withCredentials = false;
xhr.responseType = 'blob';
xhr.onload = function (e) {
var reader = new FileReader();
reader.readAsDataURL(this.response);
reader.onload = function (e) {
console.log('DataURL:', e.target.result);
};
};
xhr.send();
}
The DataURL: in console log, return a Base64, and decoding the Base64 result, it returns me a webpage, but not the file.
could someone prompt me - how to save "blob in memory" to a file using Java Script?
e.g. I have in the page next blob-image:
<img src="blob:https%3A//drive.google.com/851b979c-92e9-4ef2-9152-8935f7793630" class="g-img">
and I need to save this blob to a file (png/jpg).
The next code just gives:
GET blob:https%3A//drive.google.com/851b979c-92e9-4ef2-9152-8935f7793630 404 (Not Found)
so it seems, usual way to get the blobs doesn't work here.
Is there any workaround to save this blob-images from browser memory to a file, or, saying more exactly - to get them as a real blob using only "src" tag value?
Thank you.
var srcEl = evt.srcElement;
var CurI = document.getElementsByClassName('g-img');
[].forEach.call(CurI, function (el) {
var xhr = new XMLHttpRequest();
xhr.open('GET', el.src, true);
xhr.responseType = 'arraybuffer'; // xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
var myBlob = this.response;
var reader = new window.FileReader();
reader.readAsDataURL(myBlob);
console.log(myBlob);
}
};
xhr.send();
console.log(el.src);
// saveAs(myBlob, 'my2image.png');
}
p.s. to use mediarecorder?
Not how to do this process and consulted but did not reach, if I can help.
probe what went something like this:
var reader = new FileReader();
reader.onload = function(event) {
var dataUri = event.target.result,
context = document.getElementById("mycanvas").getContext("2d"),
img = new Image();
// wait until the image has been fully processed
img.onload = function() {
context.drawImage(img, 100, 100);
};
img.src = 'url_imagen';
};
reader.onerror = function(event) {
console.error("File could not be read! Code " + event.target.error.code);
};
reader.readAsDataURL(file);
With all the contributions realize but try and if it works.
Point run to desert, poker images having resolution jpg my delivers the following error:
TIFFReadDirectory: Warning, Unknown field with tag 347 (0x15b) encountered.
tiff_min.js (línea 103)
1.tiff: JPEG compression support is not configured.
tiff_min.js (línea 103)
1.tiff: Sorry, requested compression method is not configured.
tiff_min.js (línea 103)
uncaught exception: [object Object]
The probe code that is this:
Tiff.initialize({TOTAL_MEMORY: 19777216 * 10});
var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', url);
xhr.onload = function (e) {
var tiff = new Tiff({buffer: xhr.response,height:450});
var canvas = tiff.toCanvas();
//canvas.width = 700;
//canvas.height = 450;
div.html(canvas);
msn('Imagen cargada', "Imagen cargada con exito.");
};
xhr.send();
As answered here and here, it all comes down to browser support.
You can however get the image as binary data and display it using a library:
https://github.com/seikichi/tiff.js
https://code.google.com/p/tiffus/
https://github.com/GPHemsley/tiff-js
Displaying Tiff File in angular by displaying the image in the canvas.
Download the 'tiff.min.js' from https://github.com/seikichi/tiff.js and add the file to the 'src' folder.
Update the angular.json file with
"scripts": [ "src/tiff.min.js"]
under "project"-> "architect" -> "build"->"options"->"scripts"
Inside the ts file of the component add the following code:
declare var Tiff: any; # declared globally outside the class
# inside the component class
let xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', 'src_of_image_to_be_displayed');
xhr.onload = (e) => {
let tiff = new Tiff({buffer: xhr.response});
let canvas = tiff.toCanvas();
document.body.append(canvas); # append to an div element
}
xhr.send();
I'm trying to load in many json files for a HTML5 game that will serve as sprite sheets. Previously I've did this synchronously but my new goal is to do this asynchronously.
I have run into a problem though where I'm trying to saving back to the calling object. This is so the information loaded can be used later and so a flag (loaded) can be set so the system knows when a resource has been loaded. Below is my XMLHttpRequest code. I have substituted "spritesheet" for what ever the call should be to save back to the parent.
function SpriteSheet(filename)
{
var tmpFileName = "json/" + filename;
this.loaded = false;
var xhr = new XMLHttpRequest();
xhr.open("GET",tmpFileName,true);
xhr.onload = function(event){
var parsed = JSON.parse(this.responseText);
"spritesheet".img=new Image();
"spritesheet".img.src = "imgs/" + parsed["imgLoc"];
"spritesheet".animations = parsed["animations"];
"spritesheet".sprites = parsed["sprites"];
"spritesheet".loaded = true;
};
xhr.send();
}
Can somebody inform me how I can save back to the the parent or if this is completely the wrong approach can they point me in the direction of a solution.
I found that by creating a var in the 'class' that is a reference to the object and using it in the onload function works, for example:
function SpriteSheet(filename)
{
var tmpFileName = "json/" + filename;
this.loaded = false;
var caller = this;
var xhr = new XMLHttpRequest();
xhr.open("GET",tmpFileName,true);
xhr.onload = function(event){
var parsed = JSON.parse(this.responseText);
caller.img=new Image();
caller.img.src = "imgs/" + parsed["imgLoc"];
caller.animations = parsed["animations"];
caller.sprites = parsed["sprites"];
caller.loaded = true;
};
xhr.send();
}