I am trying to save the content of an html canvas as an image on the Parse.com platform. I have managed to save text as well as photos, but have run into a roadblock when trying to save the canvas. I send the canvas toDataURL()
var dataURL = canvas.toDataURL();
then try to set that value for the base64
var parseFile = new Parse.File("mypic.jpg", {base64:dataURL});
but clearly I'm missing something because it does not save an image.
Here is a fiddle of my project. Any help would be appreciated.
I've figured this out. It is necessary to first remove the beginning data:image/jpeg;base64 using dataURL.replace(/^data:image\/(png|jpeg);base64,/, "");.
Related
I'm using fabric.js to make a draw and export the canvas to a .png without background. The thing is that I've been searching and this is the only thing that, in a way, makes sense to me:
document.getElementById("downloadbtn").onclick = saveImage();
function saveImage(c) {
this.href = canvas.toDataURL({
format: 'png',
quality: 0.8
});
this.download = 'testimage.png'
}
But it doesn't work... I've also tried a bunch of different stuff but the same thing happens:
Failed to execute toDataURL... error in the console.
Any helps? Ty
For those who had the same issue as me, the thing is:
You can save easily the canvas to an image, but you can't do it if you have an image inside the canvas, let me explain. If you have imported a nonlocal image into the canvas (like pasting an image with fromURL), the CORS of the web will detect this as a probable threat for the system, and will block the action.
For me, saving the canvas without the url image is fine, so I have no other solution for those who try to save the canvas with an external image, but maybe save first locally the image and then save it will work for you.
Hope it can help!
I have a p5 game and I want to save the canvas as a p5.Image so I can show it on the canvas later. However I only found the saveCanvas() function which directly downloads an image of the canvas. Is there a way to save it as an image for later use?
AFAIK the p5.js library does not provide a way to do this. However, you can transform it into a data url via this code:
const dataURL = document.querySelector("#myCanvas")
.toDataURL()
.replace("image/png", "image/octet-stream");
You can then use this as a regular image source, e.g. you could redirect the current page to the image:
window.location.href = dataURL;
Hi I have one edited canvas image.Now I want to save it on android SD card using JavaScript.
I have tried to save, but it is converting as base64encode format.I need simple image file like test.jpeg, test.PNG and etc.I am not able to get decode.
The image base64 format is like 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...'.
How to get the image file and save it to android SD card.
Please help me.Thanks in advance.
You can do a:
var context = myCanvas.getContext('2d');
var myPNG = context.toDataURL('image/png');
Now you have the canvas in .png format, which you should be able to save.
Hope that helped!
I am trying to add markup to an image. The user will be able to add text, drawings and images. I am guessing it is easiest to do this with javascript on the front end. My question is, what is the easiest way to save the final image. Can the image be saved with javascript as well. Do I need to serialize the image and save it on the back end? Are there any good libraries that help with these kinds of problems, they seem pretty common.
I know this is open ended but any help on manipulating images with javascript and saving them to the the backend, java in this case, would be very helpful.
You can load the image in HTML5 canvas and draw on top of it using javascript.
When the user is finished you can use the toDataURL() method of the canvas to get a bit64 encoded version of the image which you can send or save as you like.
In your example you could send the 64bit encoded string to a webservice or api to save it.
consider this html
<canvas id="myCanvas">
</canvas>
then use this javascript to work with it:
//vanilla js, I advise to use a library like Kineticjs
//paint some things:
var can = document.getElementById("myCanvas");
var ctx = can.getContext("2d");
//after the painting is done get the image
var bit64ImageString = can.toDataURL();
if you want to save the image on the server, use an Ajax call and send the bit64ImageString to the server. From that point on you can do whatever you want with it :)
I have an small drawing application made in processing.js. I would like to save the image made using the application to a server using a php file (no problem on this).
I know the canvas element has a method to get that content, canvas.toDataURL() but I dont know how to do the same with processing.js
Any hint?
Cheers!
perhaps
var image = document.getElementsByTagName("canvas")[0].toDataURL();
So when you use saveFrame() in processing.js. The image opens in a new window and i found it hard to intercept the data. The soultion is to get the image from the canvas in javascript.
// this grabs the canvas and turns it into a base64 image
var image = document.getElementsByTagName("canvas")[0].toDataURL();
// Log the data to the canvas to check it working
console.log(image);
// then you can place the image on your web page
document.getElementById("theImage").src=image;
Then the html is easy. Just add
<img id="theImage"></img>
If you want to upload the image to a server you can acsess the data in js with.
image
Note that you can also use style display:none; and have the canvas render image for you without the canvas displaying. It also supports transparent pngs and the canvas by default is transparent