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 :)
Related
I have images hosted on the server, and I would like develop some functionality to let the user have possibility to draw over the picture.
They need to write some text too, and, finally save the result as picture.
Finally, its a simple editor, but I don't find JavaScript library who permit it...
You can see an example of final result I need here : https://nsa40.casimages.com/img/2019/08/29/190829023122267348.jpg
You can achieve this with the Canvas API pretty easily.
Your images can be pulled into the canvas by creating a new Image object. The canvas API itself has a lot of methods for doing the things shown on the image (drawing shapes like ellipses and rasterising text).
Finally a canvas can be saved into a png using the toDataURL method.
I am sure if you dig around the internet, you will find there are already some libraries for these sorts of things. Possibly some keywords to try would be "image editing library JS" or something of that sort. Developing the functionality on your own should be ok if you follow some examples online for how to do each individual bit. Hope this helps :)
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,/, "");.
Would anyone be able to tell me if there is a way to apply a color halftone effect to an image using JavaScript and without using WebGL. I need to create it so it can be used across multiple devices and browsers. I have found this but its using WebGL: http://evanw.github.com/webgl-filter/
Would I be able to use three.js or processing.js to achieve it?
Any help would be very appreciated.
Create yourself a canvas element and put the image inside (see link from #Diodeus).
Get the image data from the canvas - now you can iterate over all pixels.
Apply the halftone filter on the image data. see: Algorithm to make halftone images?
Update image data
BTW: I don't recomment to do this on the client machine. Image Processing requires some processing power which may not be available on the client (e.g. Smartphone). Better do it ONCE on the server with e.g. ImageMagick.
I am trying to combine canvas that change colour in response to consumer's choice. I have placed PNG's onto multiple canvas with transparent backgrounds. I need to combine them and save a png of the final image to pass to the basket and post to my server. Can anyone help? You can see the page and code at http://www.ewe.potberrys.com/colour_image_3.php. Please excuse the quality of the code. I am new :) Thanks
I would suggest do not save the PNG. Just save the colors with your order (you have to do it anyways) and render the helmet in the basket with the same approach you do in the selector tool.
It would probably be possible (but I am not 100% sure) to generate an image on the client side in Chrome and post it via a hidden form, but the stack is so experimental, that it is not ready for production.
A little easier, one can do it with ImageMagic and PHP on the server side. I am not a PHP expert, but you can easily google an example code - there is plenty.
My advice: do not bother. Just have tidy up your JavaScript that renders a helmet to be usable in multiple places with multiple dimensions.
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