When I load SVGs via fabric.loadSVGFromString(svg), the Fabric Canvas gets stuck and ultimately the browser freezes. However, I don't observe any problems when I use fabric.Image.fromURL(base64Svg). However, I can't utilize base64 converted images since the canvas.toSVG() function returns an image, which I can't use for image conversion. (In my backend, I use an SVG to JPEG converter.)
Is there a way to resolve this problem? Your assistance is much appreciated.
Related
I work with some .WSQ images (Wavelet Scalar Quantization) and I can't display neither manipulate them in javaScript. (I can't change the image format for another one like .jpg or .png, it needs to be the original .wsq)
I think a good way to deal with it is developing a library that allows to display and manipulate these images in the browser, but I don't know where to start it.
Anybody knows how can I do it? Any material I can read to help me understand how it is done? (For example, imagine I'm creating a way to display jpeg images in browser with javascript for the first time, what should I do?)
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)?
I came across this gifx.js - http://evanw.github.io/webgl-filter/ - which seems to work well except for one thing: the save button always generates a blank image. I have tried playing around with the source but do not understand why the data URI that is generated is always the same (and blank) rather than that of the canvas. This is the script that I've been trying to tinker with - http://evanw.github.io/webgl-filter/script.js. If anyone has any ideas, I would appreciate the help!
The WebGL context needs to be created with { preserveDrawingBuffer: true } in the options, otherwise the buffer being rendered is cleared once it is drawn to the screen, and toDataURL will give you a blank image.
See also:
How do you save an image from a Three.js canvas?
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'm searching for a good method to upload a canvas element from Firefox to a webserver or database to have the ability to reload it later.
My ideas:
1. my first idea was to use getImageData() and save the canvas as an ImageData object to the database, but this might not a good solution because these objets can get quite large.
2. second idea is to use a Flash/Javascript method to upload the canvas as an PNG to the webserver.
Do you have any comments on these methods or maybe have another good solution?
Canvas elements have a toDataURL function that serializes the image on the canvas as a PNG, encoded into a data URL. You could either post the image with a form (by setting a hidden input element's value to the data URL) or in the background using AJAX.
You should be aware that toDataURL (or any other method of getting the pixel data) will throw a security exception if the canvas is not "origin-clean". For example, if you ever call drawImage with an image from a different domain, you can no longer use the toDataURL or getImageData functions.
I'm not too sure I would be worried about size unless images are typically > 10 mb in size. Is that really an issue?
If not, using getImageData() would be the most practical and simplest method IMO.