I am building a web-based image editor, and everything seems to work fine until very large images are uploaded (>5mb), and then operations like adjusting the brightness using a slider takes a while to reflect. The issue is quite obvious, and that is because I have to loop through each pixel (step of 4) in context.getImageData().data in order to modify each pixel value.
I checked out a couple of already existing online image editors, and theirs seem to work pretty well without lags.
Initially, my first step was to resize the image to fit the canvas on the screen which worked fine without lags, but why I switched to modifying the original image size was because the original size does not change compared to the one on the screen which changes if the user resizes the screen (or if chrome displays the currently downloading bar at the bottom of the browser), and since it is constant, I can always keep track of all editing operations, and then display on the screen by basing scaling down to fit the screen.
I'd love to know how I can optimize for large-sized images, without losing the quality of the original (due to resizing etc). Thanks!
[UPDATED]
This was copied from a comment under this post.
"JavaScript is not suited for image pixels editing. That is what the GPU is for. Most image manipulation needs can be done using filters, standard 2D canvas as they use the hardware designed for the task. If you have custom PX manipulation needs then WebGL is the solution."
Related
I'm developing a very small image manipulation webapp and it currently is working well.
There is one issue where if the image loaded into the canvas is very large (larger than the desktop screen resolution), it is desired to zoom out of the page such that manipulating the image in the canvas is more tractable.
That works fine for the image, but the issue is that the rest of the application is zoomed as well (such as the palette, toolbar, etc.)
Is it possible to have page zoom only affect the canvas element and none of the other elements?
Otherwise, is it possible to modify built-in browser page zoom to accomplish this sort of functionality?
As part of a project of mine, I want to write an image-viewer inside a webbrowser.
The images are extracted from video files on the server and sent to the client. The image should be displayed as is and not be scaled (unless the user explicitely chose to do so) by the browser, as this would distort the image.
This image illustrates the problem. The Win32-Application (with disabled DPI-Scaling) Shows a 20x20 image without any scaling (the black area). Chrome shows the 20x20 image (here a green image) scaled by a factor of two. What I want is that the image on the browser has the same area as the black square inside the Win32-Application, regardless of which DPI-Setting the user has chosen on his system.
To be clear: Serving the user an image with higher resolution is not an option. Neither is having the browser scale the image with different Settings acceptable. JavaScript-based solutions however may work as well.
I have not yet been able to find a solution to that problem.
I haven't found a way to disable it, but I found something to basically reverse the scaling. (source)
var factor = 1/window.devicePixelRatio;
document.querySelector('img').style.transform = 'scale(' + factor + ')';
I do not know how accurate this scaling will be and whether the image will still be rendered pixel-perfect. However, assuming the browser does some rounding internally before rendering, it should.
I have created a website to allow users to design playing cards online using fabricjs and have made the canvas responsive so it will work equally well on mobile devices as desktop. Almost everything works perfect... On smaller screens the objects are scaled correctly with the canvas and positioned correctly based on the canvas size but selecting/manipulating the objects doesn't work properly. When the canvas is scaled down from it's original (desktop based) size I cannot click on the object. I have noticed that the point on the canvas you need to click to select the object is shifted down and right from the object itself. The smaller the canvas gets, the further from the object the selection point gets. Is there a way to fix this?
Thanks!
Steve Sherrin
I'm using some javascript to make my images draggable
I want to be able to move my images over each other and create a similar effect to the multiply blending mode in photoshop.
I've seen how this is possible with static images, but I want these to change as they are moved around the screen, rather than just loading up with the effect already applied.
Is this possible within the canvas? Is there a better way?
Yes, it is possibile with Canvas and processing.js, but you will not be able to use your actual draggable plugin (it doesn't seem HTML5).
Read this http://processingjs.org/reference/blend_/ but remember Blending on Canvas could be very slow (it depends by images' resolution and by Browser' engine).
I have a web page which displays a large image, for example a page from a magazine. I have no control over the image size or orientation. It's possible that the image may need to be rotated by the user to orient it correctly.
Are there any Javascript or Flash solutions that will allow someone to rotate and zoom a given image? Ideally I'd specify a single image and the dimensions to use when displaying it. If the image is larger than those dimensions, the user could zoom in and view a portion of the image in greater detail.
I've seen a couple of solutions for rotating images with straight Javascript and CSS. Raphael would do the trick. There is apparently even an example featuring rotating an image. (it uses SVG but is support on all major browsers)
This one is not cross browser, but is an interesting exercise nevertheless.
As for flash rotation etc...
For rotating images, I used jquery-rotate and it works very well.
It is not totally cross-browser, it doesn't work with IE6 (and probably other old browsers).
For zooming, I guess you could make your own implementation using javascript, you can just resize the image (easy with jQuery).