Go to this website.
Open up the console and write:
`
var canvas = $("#mandelbox-canvas")[0];
var imgData = canvas.toDataURL("image/png").split(',')[1];
console.log(imgData);
Copy the data URL and paste into this site.
Why is the image blank? How can I fix this?
Things I have already tried:
I have tried the solution to this question. I.E. This code:
var canvas = $("#mandelbox-canvas")[0];
canvas.getContext('webgl',{preserveDrawingBuffer:true});
var imgData = canvas.toDataURL("image/png").split(',')[1];
console.log(imgData)
however the image is still blank. The image does not contain the image displayed on the canvas.
So after much trawling through StackOverflow I found the function drawScene() which (somehow?) force toDataURL() to return the image data as required:
var canvas = $("#mandelbox-canvas")[0];
drawScene()
var imgData = canvas.toDataURL("image/png").split(',')[1];
console.log(imgData)
Related
I wish to create a simple function in angularJS so I can read image from URL. Simply I put image URL and it convert image of that URL to base64 and saves to DB as well it shows to that Image Canvas. I wish to read image of all type irrespective of only PNG.
I have tried few logics, from Google I found code where it takes dimensions of canvas first..
$scope.convertBase64 = function () {
console.log("Firing Function");
var canvas = $scope.imageURL;
canvas.width = $scope.imageURL.width;
canvas.height = $scope.imageURL.height;
var ctx = canvas.getContext("2d");
ctx.drawImage($scope.imageURL, 0, 0);
var dataURL = canvas.toDataURL("image/png");
$scope.imageURLBase = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
return $scope.imageURLBase;
};
At same moment I wish to save image's base64 content. How to render using that base64 content anytime irrespective of canvas size using ng-source or else.
Well, I need some help about convert .svg file/image to .png file/image...
I have a .svg image displayed on my page. It is saved on my server (as a .png file). I need to convert it to a .png file on demand (on click on a button) and save the .png file on the server (I will do this with an .ajax request).
But the problem is the conversion.
I read many things about the html5 Canvas, which can probably help doing what I need to do now, but I can't find any clear solution to my problem, and, tbh, I do not understand everything I found... So I need some clear advices/help about the way I have to do it.
Here is the "html idea" template :
<html>
<body>
<svg id="mySvg" width="300px" height="300px">
<!-- my svg data -->
</svg>
<label id="button">Click to convert</label>
<canvas id="myCanvas"></canvas>
</body>
</html>
and some js :
<script>
$("body").on("click","#button",function(){
var svgText = $("#myViewer").outerHTML;
var myCanvas = document.getElementById("canvas");
var ctxt = myCanvas.getContext("2d");
});
</script>
Then, I need to draw the svg into the Canvas, get back the base64 data, and save it in a .png file on my server... but... how? I read about so many different solutions that I'm actually... lost... I'm working on a jsfiddle, but I'm actually... nowhere... http://jsfiddle.net/xfh7nctk/6/ ... Thanks for reading / help
For inline SVG you'll need to:
Convert the SVG string to a Blob
Get an URL for the Blob
Create an image element and set the URL as src
When loaded (onload) you can draw the SVG as an image on canvas
Use toDataURL() to get the PNG file from canvas.
For example:
function drawInlineSVG(ctx, rawSVG, callback) {
var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"}),
domURL = self.URL || self.webkitURL || self,
url = domURL.createObjectURL(svg),
img = new Image;
img.onload = function () {
ctx.drawImage(this, 0, 0);
domURL.revokeObjectURL(url);
callback(this);
};
img.src = url;
}
// usage:
drawInlineSVG(ctxt, svgText, function() {
console.log(canvas.toDataURL()); // -> PNG data-uri
});
Of course, console.log here is just for example. Store/transfer the string instead here. (I would also recommend adding an onerror handler inside the method).
Also remember to set canvas size using either the width and height attributes, or from JavaScript using properties.
I come long after since some other question raised from this one because the accepted answer may produce undesirable behavior.
#K3N solution is almost right, but I would go against the use of svgElement.outerHTML.
Instead, one should prefer new XMLSerializer().serializeToString(svgElement).
Also, the use of blob and of the URL API is not necessary and a simple dataURI has more compatibility accross browsers.
So a complete version of this would be :
function drawInlineSVG(svgElement, ctx, callback) {
var svgURL = new XMLSerializer().serializeToString(svgElement);
var img = new Image();
img.onload = function() {
ctx.drawImage(this, 0, 0);
callback();
}
img.src = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgURL);
}
// usage:
drawInlineSVG(document.querySelector('svg'), ctxt, function() {
console.log(canvas.toDataURL())
});
I'm trying to read a URL (the resource of which is an image) and encode this image in base64 to save it in a database.
I've looked around Google and Stackoverflow and a lot of people say that it is impossible to save a base64 formatted image that you read from a URL.(Are they wrong?)
My steps are as follows:
I parse an XML file where there is a URL for the image. I'm trying to save this image in a base64 format in a DB.
Can anybody help me?
I can't readily put together an example of this, but it should be possible, assuming the image is coming from the same domain you are running the code on, or you can control the cross origin header for the image (or else you'll get a Cross-origin error).
Assuming this is the case, you can. Here is a JSFiddle where I encode the logo of JSFiddle: http://fiddle.jshell.net/5S6BY/ (since that logo is on the same domain as where the code is running, it works).
The trick is to draw it to a canvas, then convert that canvas to a base64.
Here is the code:
var url = "http://fiddle.jshell.net/img/logo.png";
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
var image = new Image();
image.crossOrigin = 'anonymous';
image.addEventListener('load', function() {
ctx.drawImage(image, 0, 0, image.width, image.height);
document.body.innerHTML = canvas.toDataURL();
});
image.src = url;
It's pretty straight forward. Load the image, draw the image to the canvas, then call canvas.toDataUrl() to get the base64 encoded version, which you can use to do whatever you want.
I've got an application that builds a bar chart using svg, and I want to download a PNG image to the user. I'm using the FileSaver.js and canvas-to-blob.min.js polyfills to get support for canvas.toBlob() and window.saveAs().
Here's the snippet of code attached to the download button:
$('#download-button').on('click', function(e) {
e.preventDefault();
var chart = $('#bar-chart')
.attr('xmlns', 'http://www.w3.org/2000/svg');
var width = chart.width();
var height = chart.height();
var data = new XMLSerializer().serializeToString(chart.get(0));
var svg = new Blob([data], { type: "image/svg+xml;charset=utf-8" });
var url = URL.createObjectURL(svg);
var img = $('<img />')
.width(width)
.height(height)
.on('load', function() {
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img.get(0), 0, 0);
canvas.toBlob(function(blob) {
saveAs(blob, "test.png");
});
});
img.attr('src', url);
});
It extracts out the XML for the SVG image, wraps it in a blob and creates and object URL for the blob. Then it creates an image object and sets its src to the object URL. The load event handler then creates a canvas and uses drawImage() to render the image onto the canvas. Finally, it extracts the image data to a second blob and uses saveAs() to download it as "test.png".
Everything appears to work, but the downloaded PNG file doesn't have the whole image -- just a piece of the upper left corner. Could the browser be firing the "load" event before the SVG has been fully rendered? Or am I just missing something here?
Here is a jsFiddle demonstrating the problem.
(Moving comment to answer so question can be closed:)
The 100% width of the SVG element is interpreted as 100 pixels. You can see this if you console.log the width/height.
Setting absolute width is one way to solve the problem.
I am trying to load an image from a URL to the canvas, and then display the image to be saved. I can display the image in the canvas but when I trying to display the image as a base64 string it it blank. Here is what I can come up with so far just need help on the last part.
var canvas = document.getElementById('myCanvas'),
context = canvas.getContext('2d'),
imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imageObj.src = 'http://3.bp.blogspot.com/-4NP3xwj-ZMI/UXU8RT1k02I/AAAAAAAACEU/88knXDu2MeQ/s72-c/music3g1.JPG';
var dataURL = canvas.toDataURL();
document.getElementById('canvasImg').src = dataURL;
Okay, a couple of things to know.
When you draw an image to a canvas from a source outside of the domain the html is in, it flags the dirty flag on the canvas. This makes it so you can't use the .toDataURL() function. It is mainly a security issue.
var dataURL = canvas.toDataURL(); document.getElementById('canvasImg').src = dataURL; is called before the image is actually drawn to the canvas. You'll need to get the data url and set the src within the onload function of the image.