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

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

但我真正想要的是：

我想合并两个独立的画布，但并排，不重叠彼此

这是我下载的canvas代码：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();
}

请看我的例子：

任何帮助都将不胜感激。

---

谢谢

如果没有这两个图像和规则，没有多少信息可以解决您的特定问题。最大/最小图像大小？？是否有必要的方面？？，或最大/最小徽标比例以避免瑕疵

我会假设标志必须保持其外观，不能修剪或缩放。上传图像的高度只能用它比徽标图像高多少来表示

用户图像不能改变外观，必须在上传时尽可能多地保留，从上到下或从左到右剪裁，保留中心

因此，只需创建一个正确大小的画布，在底部绘制徽标，计算一个适合用户图像的比例。计算用户图像的哪个部分适合。把那部分画在上面

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

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

---

当我下载图像时，我得到了重叠在用户图像上的徽标。下面的输出：但我实际想要的是：即我想合并两个单独的画布，但并排合并，而不是重叠。drawImage有多达九个参数将一个图像绘制到另一个图像上。它无法神奇地知道将图像放置在何处，您必须将其放置在正确的位置。有关drawImage的信息，请参见arguments@Blindman67w3schools正在变得更好，但我仍然不推荐它作为参考->。最好使用或@Andreas，我已将新手发送到MDN，但他们返回时却告诉我他们找不到他们想要的东西。w3schools对一些人来说可能不酷，但MDN的导航对那些几乎没有经验的人来说是不友好的。w3schools关于drawImage的信息是准确的，而MDN在查看时在其页面上有错误，这不是为什么我没有引用它们。我将新手发送到w3schools，因为它是一个设计更好的引用。@Blindman67如果您只需要drawImage调用就可以了，我希望看到它。OP需要一个输出尺寸为他想要的第三个画布，以便绘制他向我们展示的两个画布…基本上我需要一个输出尺寸为500 h 480 w的第三个画布。在其中，我可以编辑两幅图像，一幅在第一幅图像的顶部，另一幅在第一幅图像的下方。我已经准备好合并画布，只是不知道要使用哪个确切的代码，因为我是画布新手，而且我使用的代码没有按照我想要的方式合并画布。该示例确实创建了第三幅图像。最后，我将名为uploadImg的画布图像转换为dataURL。您已经给出了最终的图像大小，我假设徽标的宽度为480像素。如果是这样的话，那么获取底部的徽标高度图像，找出最终图像在500像素范围内的次数。ie 500/logo.height然后用该数字替换最顶部的3。