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
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 need to compress and rotate the image in the browser. Image sources can be drag'n'drop from a local user or the image can be downloaded from an URL with the same domain as the page with this script. But asking for permission to use HTML5 canvas doesn't fit into the design specification in any way.
The image can be in JPEG, PNG or HEIC format and in the current implementation is stored in Uint8Array. Is it possible to generate a thumbnail or change image orientation without using canvas?
No browser that I know of will ask for permission to use a canvas. Using a canvas is the quickest solution to do this (it's very simple indeed), and HEIC support is easy too: https://alexcorvi.github.io/heic2any/
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,/, "");.
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 am using HTML5 and javascript in a project. I am loading image from a Url(seleted by user) and then i am moving that image inside canvas. On moving i am redrawing the whole image. But on moving image is flickering. So i want to copy that file from URL to my working directory. So that flickering of image on moving would get stop.
Is there any other way to do this? if not then how can i copy that image file in my working follder(i.e. destination path).
Thanks a lot in advance.
This article will give you some good pointers to optimizing your canvas code. Make sure you take a good look at the section titled: Pre-render to an off-screen canvas.
You probably are facing crossdomain limitations when using images in canvas.
The image and the html document must reside on the same server/domain
otherwise you have to base64 encode the image as the image source.