即使在调整大小后，也可下载原始画布-Java 学习之路

Step1）我用canvasImage（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的标志 .

任何人在这方面的帮助都会很棒

The resizing code

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

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

1 回答

1
使用 drawImage 的扩展形式在原始背景图像上缩放和重新定位徽标：
- 创建一个尺寸为1920x1080的第3个html5画布，并将step1-image绘制到第3个画布 .
- 重新计算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个画布
回复于 2024-04-25T06:36:14+08:00

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

1 回答

相关问题