Download original Canvas even after resizing

Question

Step1) I am drawing an image of 1920*1080 to canvas1 with the drawImage(image,0,0);

setp2) Now i am taking another logo image and drawing it to another canvas called canvas2 with the drawImage(logo,0,0);

I used fabricjs to for logo drag able and re sizable functionalities.

Step3) Then i am drawing canvas1 & canvas2 to another canvas called canvas3 and downloading it.

In this case everything is fine except image is displaying large(1920*1080). for user experience I have used image resize method to reduce the image and displayed in 900*500 canvas. But when i am downloding i should get the original canvas of 1920*1080 with logo. But i am getting 900*500 with logo.

Can any one help in this regards will be greatful

The resizing code

Here real width & real Height are width & height of background image

function ImageResize(){ 
    var d_canvas = document.getElementById('canvas'); 
    var context = d_canvas.getContext('2d'); 
    var background = document.getElementById('background'); 
    var wrh = realWidth / realHeight; 
    newWidth = d_canvas.width; 
    newHeight = newWidth / wrh; 
    if (newHeight > d_canvas.height) { 
        newHeight = d_canvas.height; 
        newWidth = newHeight * wrh; 
    } 
    context.drawImage(background,0,0, newWidth , newHeight); 
}

link.href = document.getElementById(canvasId).toDataURL(); where canvasId here is the canvas id of image with logo — Bikshu s
Here real width & real Height are width & height of background image function ImageResize(){ var d_canvas = document.getElementById('canvas'); var context = d_canvas.getContext('2d'); var background = document.getElementById('background'); var wrh = realWidth / realHeight; newWidth = d_canvas.width; newHeight = newWidth / wrh; if (newHeight > d_canvas.height) { newHeight = d_canvas.height; newWidth = newHeight * wrh; } context.drawImage(background,0,0, newWidth , newHeight); } — Bikshu s
If you need detailed information please go through my website : cricmovie.com/bbb-imagecrop — Bikshu s

markE markE · Accepted Answer · 2016-07-27T18:45:06

Use the extended form of drawImage to scale and reposition the logo over the original background image:

Create a 3rd html5 canvas sized to 1920x1080 and draw your step1-image to the 3rd canvas.

Recalculate the Logo coordinates & sizes provided by FabricJS from 900x500 to 1920x1080:

// pseudo-code
// Given FabricJS's position & size of the logo on a 950x500 stage
// Calc the logo's relative position & size vs a larger background
logoX *= 1920/900;
logoY *= 1080/500;
logoWidth *= 1920/900;
logoHeight *= 1080/500;

Draw the logo onto the 3rd canvas using the recalculated position & size

thirdContext.drawImage(
    logoImage,
    0,0,logoImage.width,logoImage.height,
    logoX,logoY,logoWidth,logoHeight
);

Export the 3rd canvas

Download original Canvas even after resizing

1 Answers