Alternatives to "canvas.toDataURL("image/png");" in JavaScript? - javascript

I'm working on a Palm Pre app and I need to find an alternative to "canvas.toDataURL("image/png");". Ideally it could export the canvas image to a jpeg file but png would be find also.

The simple code available here might be helpful.

Related

opencv.js load image in react, cv.imencode is undefined

Hello I want to manipulate an image in react. So I use opencv.js for this.
I found this repo https://github.com/vinissimus/opencv-js-webworker which gives a good example how to use it with react.
In this example the image was loaded from a canvas. But I have a blob or a normal image. I dont know how to load this image in opencv.js. I was able to transform the image to base64 string. But I dont know how to load then the base64 string with opencv.js.
I found this question here https://answers.opencv.org/question/215404/reading-data-uri-with-opencvjs/, where the answer says to use cv2.imencode to load base64 image. I am using latest opencv.js and cv.imencode is undefined.
How can I solve this problem? Is cv.imencode avaiable in some older releases? Maybe somebody has an other workaround to use it with react (create-react-app)?

Drawing and writing on image and save it

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 :)

Create Instagram-esque filters with javascript?

Can I create Instagram-esque filters with javascript?
The images can be processed client-side or server-side(node.js)
I could overlay some pngs and box-shadows with css to get a limited amount of similar effects, but I was wondering if there was anything out there that can truly process images like this in js.
Thanks!
Alex Michael has a fantastic open source javascript library for instagram filters:
http://alexmic.github.com/filtrr/
I ended up finding this, http://vintagejs.com/
You could do it with canvas. See :
Making Image Filters with Canvas
Pixastic Image Processing Library
I think all filters are public libs wrote in C/C++ that u can import in node =) Give a try

is there a HTML javascript library for editing images?

I'm looking for a client-side HTML library (javascript) -- I need to allow a user to draw on a TIFF or JPG image.
I don't think I've even seen a web site that allows image editing (w/o an add-in).
The alternative would probably be Silverlight.
Try pixastic. Link is here.
I suggest fabricjs , pixastic. take a look at it.
You can crop image with jcrop
Here's a little jQuery plug-in built on top of Pixastic: http://andreaslagerkvist.com/AndreasLagerkvist/Files/pixastic-editor/. More info about the plug-in can be found here: http://exscale.se/archives/jquery/#article-240

how to create shape in a web page from image and change its fill using javascript

I have a PNG image of black sock shape with a transparent background.
I want to be able to embed this image in a web page and change the fill of the shape from black to any valid web colour using javascript (jQuery).
I would like to do this without flash, is this possible.
From my research it looks like I could convert the image to a html table but thats inefficient i'm sure.
Also I think Vector / SVG graphics might help here, but im not sure how to implement this.
Any help would be greatly appreciated.
I am a developer by day and web designer by night... still learning :)
I can't think of any way to achieve this with a png image, however you can export images directly to SVG using Illustrator. SVG is simply xml based markup like html, so this would allow you to programmatically alter the image with javascript.
Have u checked Google Chrome expermients? they have some that can be really helpful for u.

Categories