2个不同的画布下载为单个图像文件

Question

在我的应用程序中，我正在尝试将用户上传的图像与第二个画布中的徽标图像合并。当我下载图像时，我的徽标重叠在用户图像上

但我真正想要的是：

我想将 2 个单独的画布相互合并，但并排且不相互重叠。

这是我的下载画布代码：canvas_thumb 是用户正在上传的图片，canvas 是我在页面上已有的徽标图片。

function downloadCanvas() {
    var bottleCanvas = document.getElementById('canvas_thumb');
    var designCanvas = document.getElementById('canvas');
    var bottleContext = bottleCanvas.getContext('2d');
    bottleContext.drawImage(designCanvas, 0, 0);

    var dataURL = bottleCanvas.toDataURL("image/png");
    var link = document.createElement('a');
    link.download = "bottle-design.png";
    link.href = bottleCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    link.click();
}

请看我的例子：http://bit.ly/1SYiniX

任何帮助将不胜感激。
谢谢

Answer 1

没有两个图像和规则，没有太多信息可以解决您的特定问题。 （最大/最小图像尺寸？？是否有要求的方面？？或最大/最小徽标比例以避免伪影）。

我假设徽标必须保持其外观并且不能修剪或缩放。还有——上传图片只能用比logo图片高多少来表示。

用户图像不能改变纵横比，上传时必须尽可能多，上下或左右裁剪，保留中心。

所以只需创建一个正确大小的画布，在底部绘制徽标，计算适合用户图像的比例。计算适合用户图像的哪一部分。将该部分绘制到顶部。

这可确保显示用户图像的最大可能区域仍将保持上传图像的正确大小

var imageHeight = 3; // the height of the upload image in terms of
                     // the logos height.
                     // in this case the image will be three times 
                     // the height of the logo

var logoW = canvas.width;
var logoH = canvas.height;


var userImage  // this is the users image

var userW = userImage.width;
var userH = userImage.height;
var userCX = userW / 2; // center of user image
var userCY = userW / 2; // center of user image

// Get the max scale that ensures the user image will 
// fill the space provide
var userScale = Math.max(logoW / userW, logoH * (imageHeight-1) / user.height);

// use the scale to calculate the correct aspect to 
// copy from the user image in user image coordinates
var userClipW = logoW / userScale;
var userClipH = logoH * (imageHeight - 1) / userScale;

// create the new canvas
var uploadImg = document.createElement("canvas");  

// set its size
uploadImg.width = logoW;
uploadImg.height = logoH * imageHeight;

//  get drawing context
ctx = uploadImg.getContext("2d");

// draw logo at the bottom
ctx.drawImage(canvas, 0, logoH * (imageHeight-1), logoW, logoH);

// draw the user image at the top, taking what can fit from the center, assuming
// that is the requirement, only top and bottom OR left and right are clipped
ctx.drawImage(userImage, userCX - userClipW * 0.5, userCY - userClipH * 0.5, userClipW, userClipH, 0, 0, logoW, logoH * (imageHeight - 1));

// data url for upload.
var dataURL = uploadImg.toDataURL();