Download original Canvas even after resizing

2018-06-17 19:40:31

Click here to view image

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); 
}

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

链接地址: http://www.djcxy.com/p/50328.html

上一篇: 坐标不匹配问题

下一篇: 即使在调整大小后也可以下载原始画布