即使在调整大小后也可以下载原始画布
点击此处查看图片
Step1）我使用drawImage（image，0,0）将1920 * 1080的图像绘制到canvas1;
setp2）现在我正在使用另一个徽标图像并将其绘制到另一个名为canvas2的画布上，画布的图标（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);
}
使用扩展形式的drawImage在原始背景图像上缩放和重新定位徽标：
重新计算由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;
使用重新计算的位置和大小将徽标绘制到第3个画布上
thirdContext.drawImage(
logoImage,
0,0,logoImage.width,logoImage.height,
logoX,logoY,logoWidth,logoHeight
);