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.
Related
I have a problem with converting svg to png(base64).
Svg to base64 works fine, because it displays just fine in the browser.
But when i try to load in the image, it won't load. Anybody might have an idea why?
var xml = new XMLSerializer().serializeToString(svg);
var svg64 = btoa(xml);
var b64start = 'data:image/svg+xml;base64,';
var image64 = b64start + svg64;
console.log(image64);
const img = new Image();
img.onload = function() {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const dataBase64 = canvas.toDataURL('image/png');
console.log(dataBase64);
generatePowerpoint(response, dataBase64);
}
img.onerror = function() {
console.log(this.src);
}
img.src = image64;
It depends of the browser you are using. Using Firefox, the svg tag must have width and height attributes (unit not in %).
It also depends of the content of the svg. If the svg contains non-latin characters, btoa may fail (even if it seems not to be the problem here since Svg to base64 works fine in your case).
I need the base64-string (not URL) from an existing PNG (photo from a text document).
I use the following function to receive base64-String for my photo. The string, which I get back, is valid but if I test it in a online decoder, I get this image:
imageResult is an image-Element in my DOM. Any hints what is going wrong?
JS
var img = this.imageResult.nativeElement;
var ocrImage = this.getBase64Image(img);
getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
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 !
So I'm using Protractor in my project and in my test I want to convert the canvas element to an image with a specific size. I have the conversion down but can't seem to change the size of the image. Here's my code:
it('should save an image', function(done) {
//because of Protractor
browser.driver.executeScript(function () {
var can = document.querySelector('#workspace-canvas');
var data = can.toDataURL("image/png");
var image = new Image();
image.width = 500;
image.height = 500;
image.src = data;
console.log(image.height, image.width); //1122 1888
var link = document.createElement('a');
link.href = image.src;
link.download = 'study-chart.png';
link.click();
return data;
}).then(function (result) {
browser.sleep(2000);
done();
});
});
I'm not able to change the size of the canvas. In my fiddle you can see the image size is changed in the DOM, but when I download it, the image is only 200x200 pixels because of the canvas size. What am I missing?
The problem is that adjusting the width and height of the image element doesn't actually change its original size. It will appear larger when displayed in the browser, but the original size of the image is still the size of the canvas.
I've modified your fiddle to show you how you can create a new image with a desired size by dynamically creating a new canvas with the specified width and height and drawing your original image on it.
var can = document.querySelector('#canvas1');
var ctx = can.getContext('2d');
ctx.fillRect(50, 50, 50, 50);
var img = new Image();
img.src = can.toDataURL();
var link = document.createElement('a');
var img2 = resizeImage(img, 500, 500);
link.href = img2.src;
link.download = 'study-chart.png';
link.click();
function 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;
}
canvas {
border: 1px solid gray;
}
<canvas id="canvas1" width="200" height="200"></canvas>
Have you tried using the canvas context and scaling that and then saving out as an image?
context.scale
#Kurumi, your codes can work somehow but better to add onload method
var img = new Image();
img.src = c.toDataURL('image/jpeg');
var img2 = '';
img.onload = function () {
img2 = resizeImage(img, oWidth, oHeight);
var link = document.createElement('a');
img2.onload = function () {
link.href = img2.src;
link.download = 'study-chart.jpeg';
link.click();
}
}
I have been trying to convert images to base64 string in Javascript. So far with this code which I found on stackoverflow I was able to convert jpeg and png images to their respective base64 strings. But when i try to convert GIF into a base64 it does conversion but the string always have :
data:image/png;base64,............................<string continues>
and when i try to open that, gif image doesn't work.
It should be:
data:image/gif;base64,............................<string continues>
Here's the code:
function convertImgToBase64(url,callback,outputFormat){
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function(){
var dataURL;
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,0,0);
dataURL = canvas.toDataURL(outputFormat || 'image/png');
callback.call(this, dataURL);
canvas = null;
};
img.src = url;
}
I am passing the image from a url for example take : http://www.howtogeek.com/wp-content/uploads/2010/10/DANCING_BABY.gif
Please help.