We Keep Coding

Fabric JS replicate image edit steps on a smaller but identical image using canvas.toJSON() and canvas.loadFromJSON()

I am creating an image editor for SVG files. Some of the SVG files contain <image> tags, which can make the SVG file very large (around 25 MB or more), this makes these images both slow to load but also slow to edit.
Thinking freely, the best way (I think) to tackle this is to make the editor load a "fake" version of that SVG that is only let's say 1MB. Apart from the difference in size, the "fake" SVG is identical in every way: objects, positioning, size ratio etc.
This "fake" SVG is fast to load, and when the user clicks "Save" I have plenty of time replicating those changes on my real SVG in the backend (yes I want the changes to also apply to the original version).
I have started coding on this solution, namely by storing every edit step:
const stepList = [...pervValue.steps.slice(0, currentStep), canvas.toJSON()]
and loading it to a new canvas
canvas.loadFromJSON(json, () => {
turnOnCanvasEvents()
canvas.renderAll()
})
However .. my problem is that nothing shows up and this feels like a very cumbersome approach as the JSON strings also get abnormally large after just a few steps. I will attach the JSON structure for one of my "tamer" SVG images.
I am thinking here, am I making things more complicated than they need to be?

Resizing and image processing on many images?

I have several 1000s of images on disk that I need to display a subset of, given user search criteria. What this means is I could be showing 100s at one time. Each image is large- 3510x1131 to be exact. And I need to do some light image processing before they are displayed (adjusting brightness and contrast).
My application to do this is a Web.API app using jQuery.
My first pass was to just pass the URLs to the browser and then size the images and make those adjustments using pixastic. Works, but it's pretty slow.
I was thinking it would be much faster if I could resize the image before doing the adjustments, but I dont want to create copies and then link to those. Maybe there is a way to generate the images on the fly and serve them up? Via REST perhaps? Bottom line is I need a LOSSY image resize, not just setting width and height using css.
Are there tools out there that I am missing or has anyone done something similar? I think what Im looking for is exactly like google image search results- but I don't know how they generate those thumbnails- and if I were to adjust brightness/contrast am I doing it on the thumbail (saving time) or the full size image?

Creating a 10x10 image grid using easel.js where images cross dissolve randomly

Creating something I'm hoping is easy using Easel.js, but still a novice. Simply want to create a 10X10 image grid where each of the images will cross dissolve to another paired image at random intervals.
Can anyone point me to any similar examples or will I need to hard code this using only javascript instead?
Eventually I will load these images from a server but first I need a working demo without any server ajax calls, just load images locally.

If by cross dissolve you mean fade into each other, then you might want to take a look at the createjs.AlphaMaskFilter or the createjs.AlphaMapFilter.To load an image take a look here: The Image doesn't show up on the Canvas
There really is no difference between an image on a server and a local image, it might be even easier from a server.

Creating a color halftone effect for images using JavaScript

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.

How to read chunks of an image?

Many many sites uses this technique (facebook, google as well)
For example, open facebook.com
Save this page (not as *.MHTM but HTML with images) (mean login page)
It saves:
facebook_files(dir)
facebook.html(file)
Then inside the folder, You can see one GIF file which containts all primary images for the page.
The question is: How to read many chunks inside one file??
And how to call this approach?

Those images are called "sprites". Take a look a this article on them.
The basic idea is that whenever you want to use an image from the sprite, you have an element which just shows part of the big sprite image. So each "image" in your page is actually a div with this image as the background, just offset so the right part shows through.
The main advantage is that your page needs fewer requests and so loads faster.
There are some tools online that make using sprites easier. I haven't used any of them so can't recommend one, but using a tool would save you a lot of work.

This is what you call "spriting", like the spriting used in arcade games (one image of a character with it's different positions). Basically it's one huge chunk of image containing smaller images.
The advantage of this approach is that instead of 100 different HTTP requests for 100 tiny gifs (which causes overhead), you only need to request one huge image containing this 100 gifs. Then instead of using <img> per image, you use the CSS background instead, then use background-position to align the right image "through" the container to show the right image.