I'm trying to convert a dendrogram like this one into a picture (png/jpg). Look what I've tried to do:
function get_dendrogram(){
var svg = document.querySelector('svg');
var data = (new XMLSerializer()).serializeToString(svg);
var blob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
saveAs(blob, "my_image.png");
}
To save the generated blob, I'm using FileSaver.js.
I don't know what I can be missing... When I try to open the file, It says that is corrupted.
I also tried converting the svg to canvas using html2canvas then saving with FileSaver or canvas2image. In these ways I got the image, but It is deformed.
Related
I want to convert a blob file to a png. I tried this:
var blob = new Blob([ia], {type: 'image/png'});
$scope.farmerRegisterObj.farmerImage = blob;
I want to convert it into file object ..and should be able to append in a Formdata.
A Blob is a File like object, or more exactly, a File object is a Blob with a name property.
You can create a File object from a Blob thanks to the File(blob, name) constructor, but this will be useless in almost every use cases*.
All you can do with a File can be done with a Blob.
For instance, in your case, you can append a Blob directly into a FormData so that it is sent as a file/multipart :
var form = new FormData();
form.append(fieldName, blob, fileName);
* I only used it once, while trying to hack the behavior of browsers default page title when viewing a file like an image in a tab, and it only partially worked only in FF. If someone has real use cases where a File is needed, I'd be glad to know about it.
I’ve got a flowery pattern (http://pages.bangor.ac.uk/~abp4d9/) where user moves sliders (for inner circles and petals) and flowers change. I’ve got 3 ‘Save as’ buttons. 1st one (SVG) works great. The other 2 work only half-way. The saved file comes up in the appropriate format but then it doesn’t open, saying that there was an error. All 3 JS functions are almost identical – I basically copied them from the working 1st function. I’m not sure what to correct – probably ‘new Blob’ format, but I’m not sure what to put instead.
So, to sum up:
• How to get a working ‘Save as SVG’ button to do the same with PDF and PNG?
Here is my JS for half-working PDF button:
function downloadPdf(){
var svg = document.getElementsByTagName("svg")[0];
var svg_xml = (new XMLSerializer).serializeToString(svg);
var blob = new Blob([svg_xml]);
var url = window.URL || window.webkitURL;
var blobURL = url.createObjectURL(blob);
var a = document.createElement('a');
a.download = "Pattern.pdf";
a.href = blobURL;
document.body.appendChild(a);
a.click();
}
you have to create the PNG resp. PDF first. for PNG you can use canvas to draw the image and then retrieve the canvas content as PNG (or you can use a library). for PDF you have to use a library.
I'm looking for a way to draw an image to a canvas directly from the html5 FileReader api.
The usual method is to create a new image object, wait for onload and then draw it to the canvas with drawImage().
However for a specific case which I do not need to go into I would like to bypass the loading of the image data completely if at all possible.
Since the filereader api supports readAsArrayBuffer() I was wondering if there is any way I could take this arraybuffer and convert it into canvas imageData in order to use ctx.putImageData(array) to render the image.
Thanks in advance.
Loading the image is a neccessary step I think; at one end of the process you just have a binary blob which could be a JPEG or PNG (or BMP, any other mime type), while at the other you have an array containing raw pixel data. While you could technically code this conversion yourself, the fileReader.readAsDataURL and ctx.drawImage methods do this for you internally.
FWIW, his is how I draw an image to canvas.
// read binary data from file object
var fileRead = function(file){
var reader = new FileReader();
reader.onload = fileReadComplete;
reader.readAsDataURL(file);
};
// convert binary data to image object
var fileReadComplete = function(e){
var img = new Image();
img.src = e.target.result;
(function(){
if (img.complete){
ctx.drawImage(img);
}
else {
setTimeout(arguments.callee, 50);
}
})();
};
I have a webapp that is saving images locally until they are ready to be sent to the server. When I save the images locally, I base64 encode them. Now I want to do a multipart file upload with these images.
So I need to convert the image back into binary form. I've tried using the FileReader to convert it back like this,
var fr = new FileReader();
fr.onloadend = function(binaryImage){
debugger;
binaryImage;
};
var base64Str = item.base64Image.substr(item.base64Image.indexOf("base64") + 7);
//var base64Str = item.base64Image;
fr.readAsBinaryString(base64Str);
but the onloadend event is never fired and there are no errors. Once I get the image I wont have trouble uploading it. Any ideas?
Thanks!
Not to familiar with FileReader, but I believe readAsBinaryString is expecting a Blob or File object. Passing it a string causes errors on my end. Try this:
var fr = new FileReader();
fr.onloadend = function(binaryImage){
debugger;
binaryImage;
};
var blob = new Blob([item.base64Image.
substr(item.base64Image.indexOf("base64") + 7)]);
fr.readAsBinaryString(blob);
I don't think this will give you want though. Check out this article for ways to encode/decode Base64: How can you encode to Base64 using Javascript?
Looks like you can use btoa() and atob() for web kit browsers.
Trying to create image(screenshot) of a HTML page using javascript. Able to generate the html blob and display the same in new tab as read only HTML page using the below code.
var scr = document.documentElement.cloneNode(true);
var blob = new Blob([scr.outerHTML], {type: 'text/html'});
window.open(window.URL.createObjectURL(blob));
Please anyone could tell me how to save the same as image.
Take a look at FileSaver.js,
var bb = new BlobBuilder();
bb.append((new XMLSerializer).serializeToString(document));
var blob = bb.getBlob("application/xhtml+xml;charset=" + document.characterSet);
saveAs(blob, "document.xhtml");
Some Documentation
API