fabric.js缩放整个图像的最简单方法

Question

i use fabric.js on the client side to allow user to create the image in the browser, then fabric.js serializes the image to json and send to the node server. then the backend deserializes JSON string to an object and save the image locally as a file.

The question is:

The result image has to be large, for example 3000x3000px, now i use <canvas width="600" height="600"></canvas> User uploads the background image(3000x3000) into the canvas, then i scale it this way:

fabric.Image.fromURL(data, function (img) {
            img.scale(0.2);             
            canvas.add(img).renderAll();            
        });

and it fills whole the canvas.

Then user adds text onto the canvas, for example offset x,y: 100,200 and clicks the submit button. The server has to unscale the 600x600 image into 3Kx3K, also unscale the text and recalculate the offset. Is there the easiest way to manipulate with scaling ?

Answer 1

Try to keep the image at scale 1. Detect how much the image should be scaled, and scale the whole canvas instead:

canvas.setZoom(0.2)

When you are in the node environment, as soon as you loaded the image back, set the canvas dimensions to the image dimensions.

Zoom is not exported to json so you do not have to change anyhing.

You should get a canvas as big as the image and all the proportions saved.