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

Question

Click here to view image

Step1) 我正在使用 drawImage(image,0,0); 将 1920*1080 的图像绘制到 canvas1；

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

我使用fabricjs 来实现徽标可拖动和可调整大小的功能。

Step3) 然后我将 canvas1 和 canvas2 绘制到另一个名为 canvas3 的画布上并下载它。

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

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

调整大小的代码

这里的实际宽度和实际高度是背景图像的宽度和高度

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 的扩展形式在原始背景图像上缩放和重新定位徽标：

1. 创建一个大小为 1920x1080 的第三个 html5 画布，并将您的 step1-image 绘制到第三个画布上。

2. 重新计算 FabricJS 提供的 Logo 坐标和尺寸从 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;
   

3. 使用重新计算的位置和大小将徽标绘制到第三个画布上

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

4. 导出第三个画布