Question

Step1）我用canvasImage（image，0,0）绘制1920 * 1080的图像到canvas1;

setp2）现在我正在拍摄另一个徽标图像并将其绘制到另一个名为canvas2的画布上，并使用drawImage（logo，0,0）;

我使用了fabricjs来实现徽标拖动和相当大的功能。

Step3）然后我画画布1＆amp; canvas2到另一个名为canvas3的画布并下载它。

在这种情况下一切都很好，除了图像显示大（1920 * 1080）。为了用户体验，我使用了图像调整大小的方法来缩小图像并在900 * 500画布中显示。但是当我失望时，我应该得到带有徽标的1920 * 1080的原始画布。但我的标识是900 * 500。

在这方面任何人都可以提供帮助吗

调整大小代码

这里是真正的宽度＆amp;真正的高度是宽度＆amp;背景图像的高度

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

Answer 1

使用drawImage的扩展形式在原始背景图片上缩放和重新定位徽标：

创建一个尺寸为1920x1080的第3张html5画布，并将step1-image绘制到第3幅画布。

重新计算徽标坐标＆amp; FabricJS提供的尺寸从900x500到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;

使用重新计算的位置将标识绘制到第三个画布上。大小

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

导出第3个画布

即使在调整大小后，也可下载原始画布

1 个答案: