Download a diagram JOINTJS Image | SVG ==> PNG with Javascript - javascript

I currently have a problem. When wishes to convert a chart created with JOINTJS image, the elements do not display correctly ...
The diagram:
http://www.hostingpics.net/viewer.php?id=698706graph.png
Conversion :
http://www.hostingpics.net/viewer.php?id=867158graph2.png
Here is my code:
var canvas = document.getElementById('canvas');
var svg = document.querySelector('svg');
var ctx = canvas.getContext('2d');
var data = (new XMLSerializer()).serializeToString(svg);
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
var imgURI = canvas
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream');
triggerDownload(imgURI);
};
img.src = url;
After much research, different codes, I still can not find the solution.
Thanks in advance !

Let me try to answer.
Use the below code to get SVG encoded data and store it in var (here 'encodedData')
var encodedData;
var s = new XMLSerializer().serializeToString(document.getElementById("ur_svg_id"));
encodedData = window.btoa(s);
Simply draw the SVG Image to a canvas
var canvas = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.drawSvg('data:image/svg+xml;base64,' + encodedData, 0, 0, 740, 1100);
Export the canvas to PNG image using filesaver.js
canvas.toBlob(function(blob) {
saveAs(blob, "MyCanvas.png");
});
Make it simple !

Related

Download canvas chart as PNG image with higher resolution javascript

We need to download the canvas chart as png image with higher resolution. tried the below code snippet to resize the image by setting the width and height. but the below solution is giving empty image in download. something failed in below code.
how to resize the canvas chart in downloaded png image.
resizeImage(img, w, h) {
var result = new Image();
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
canvas.getContext('2d').drawImage(img, 0, 0, w, h);
result.src = canvas.toDataURL();
return result;
}
downloadChart(event: any, chartName: string) {
var img = new Image();
img.src = (document.getElementsByClassName('chartclassname')[0] as HTMLCanvasElement).toDataURL(); // chartclassname for canvas chart classname
var link = document.createElement('a');
var img2 = this.resizeImage(img, 500, 500);
const anchor = document.getElementById('dynamicDownloadLink') as HTMLAnchorElement;
anchor.href = img2.src;
anchor.download = `${this.getChartNameForDownload(chartName)}.png`;
anchor.click();
}
Because you are creating a new Image dynamically you have to wait until it's loaded before you can use it with drawImage.
This should work:
downloadChart(event: any, chartName: string) {
var img = new Image();
img.src = (document.getElementsByClassName('chartclassname')[0] as HTMLCanvasElement).toDataURL(); // chartclassname for canvas chart classname
img.onload = () => {
var link = document.createElement('a');
var img2 = this.resizeImage(img, 500, 500);
const anchor = document.getElementById('dynamicDownloadLink') as HTMLAnchorElement;
anchor.href = img2.src;
anchor.download = `${this.getChartNameForDownload(chartName)}.png`;
anchor.click();
}
}

Image is not getting displayed when adding image to a PDF

I am trying to create PDF with Image. I have URL of Image as below:
var url = "https://firebasestorage.googleapis.com/v0/b/dicom-poc.appspot.com/o/images%2FNiouCzjBYna8Wx1VO2x3UST5tDc2%2F2020-10-07%2F05%3A03%3A58%2Fvisualization%2FL-CC.png?alt=media&token=dce8859a-3427-432b-8176-590e9569aad9"
and my code is here:
var pdf = new jsPDF();
var img = new Image();
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
img = document.createElement('img');
img.src = url;
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
var dataURL = canvas.toDataURL('image/png')
var base64 = dataURL.replace(/^data:.+;base64,/, '');
pdf.text("Hi");
pdf.addImage(base64,'PNG',5,5,50,50);
pdf.save("download.pdf");
}
After running above code PDF is getting downloaded successfully with text "Hi" but image is not there.
I have tried multiple solutions suggested by people but no result.
Could you please guide me for same.
Thanks in advanace!
You did not draw anything on the canvas.
var pdf = new jsPDF();
var img = new Image();
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
img = document.createElement('img');
img.src = url;
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, img.width, img.width);
var dataURL = canvas.toDataURL('image/png')
var base64 = dataURL.replace(/^data:.+;base64,/, '');
pdf.text("Hi");
pdf.addImage(base64,'PNG',5,5,50,50);
pdf.save("download.pdf");
}

HTML5 canvas save actual size image

I have a html5 canvas where I am showing image as 350x450 pixles.
But actual size of image is 600x900 px.
How can I save it in original size.
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
ctx.canvas.width = 350;
ctx.canvas.height = 450;
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0,100,100);
};
imageObj.src = 'https://davidwalsh.name/demo/ringo-ftw.jpg';
var base64 = canvas.toDataURL();
As you see when Im getting base64 Image size is reduced. I am getting image 350x450. But I want to save it in 600x900.
Is there any way ?
Basically what I am doing in below code is that>
I am creating a temp canvas element with display: none style & also load an image into that and save from this while show original canvas.
var canvas = document.getElementById('my_canvas');
var tempCanvas = document.getElementById('temp_canvas'); // use style display : none for this temp element
var ctx = canvas.getContext('2d');
var tempCtx = tempCanvas.getContext('2d');
var imageObj = new Image();
ctx.canvas.width = 350;
ctx.canvas.height = 450;
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0,100,100);
tempCtx.drawImage(imageObj, 0, 0,100,100);
};
imageObj.src = 'https://davidwalsh.name/demo/ringo-ftw.jpg';
var base64 = tempCanvas.toDataURL();

try to load base64 img into a canvas

i'm currently trying to load a base64 img into my canvas
console.log('Change');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.onload = function() {
ctx.drawImage(image, 0, 0);
};
image.src = stack[1].save;
stack[1].save contains a valid base64 png img URL('data:image/png;base64,xxxxxx'), when i paste this URL into my browser i can see a valid img
The fact is that nothing changes and i dont have any error
If you could help me this will be awesome, thank's
Yes the code you have shared should work OK.
Here is an example
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
var image = new Image();
image.onload = () => { ctx.drawImage(image, 0, 0) }
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAAF0lEQVR42mNk+M9AFGAcVTiqcFQhCAAAf0sUAaSRMCEAAAAASUVORK5CYII="
var image2 = new Image()
image2.onload = () => { for(i=1; i<9; i++) ctx.drawImage(image2, 30*i, 5+4*i) }
image2.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg=="
<canvas id="canvas"></canvas>
The only thing that could be wrong is that stack[1].save that you are using...

Download Google Chart as jpeg instead of png?

I am currently downloading Google Charts as png with the following code:
var imgUri = my_chart.getImageURI();
var url = window.URL || window.webkitURL;
linkPNG = document.createElement("a");
linkPNG.href = imgUri;
linkPNG.download = title+".png";
link.click();
It works fine. Unfortunately, my users need a jpeg instead of a png, and my usual
var imgURL = my_chart.toDataURL( "image/jpeg" );
doesn't seem to work with Google Charts. How can I download the charts as .jpg instead of .png?
After spending some time looking through the obfuscated source of the visualization library, I have determined it would be easier to just recreate the image from the data URI rather than try to change the original export type. You can load the data URI with an image, draw it on a canvas, and convert it back to a data URI.
var img = new Image();
img.addEventListener('load', function() {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, img.width, img.height);
ctx.drawImage(img, 0, 0);
var link = document.createElement('a');
link.href = canvas.toDataURL('image/jpeg');
link.download = title + '.jpg';
link.click();
});
img.src = my_chart.getImageURI();
Some error handling probably wouldn't be a bad idea either.

Categories