vue canvas 把两个一样大小的base64 4图片合并成一张上下或者左右图片

一、技术路线

    canvas

1. canvas的左上角位置为(0, 0)

2. ctx.drawImage(图片对象, x位置, y位置)

3. ctx.drawImage(图片对象, x位置, y位置, 宽度, 高度)

4. ctx.drawImage(图片对象, 图像裁剪的x位置, 图像裁剪的y位置, 裁剪的宽度, 裁剪的高度, x位置, y位置, 宽度, 高度)

5. 使用toDataURL()方法获取合并后的图片的base64字符串。

二、代码实现

function mergeImg(){

// 假设 base64Image1 和 base64Image2 是两个等大小的base64图片字符串

var base64Image1 = 'data:image/png;base64,...'; // 替换为实际的base64字符串

var base64Image2 = 'data:image/png;base64,...'; // 替换为实际的base64字符串

// 创建图片对象并加载Base64数据

var img1 = new Image();

img1.onload = function() {

   var img2 = new Image();

   img2.onload = function() {

       // 创建Canvas元素

       const canvas = document.createElement("canvas");

        const ctx = canvas.getContext("2d");

       // 设置Canvas的宽高

       canvas.width = img1.width;

       //左右  看需求啊

       // canvas.height = img1.height ;

       //上下  看需求啊

       canvas.height = img1.height + img2.height;

     

         // 绘制第一张图片

         ctx.drawImage(img1, 0, 0);

         // 绘制第二张图片（在第一张图片的下方）看需求啊

         ctx.drawImage(img2, 0, img1.height);

         // 绘制第二张图片（在第一张图片的右方）看需求啊

         //ctx.drawImage(img2, img1.width, 0);

         // 合并后的图片base64

         var newImg = new Image();

         newImg.src = canvas.toDataURL("image/png");

         // 或者直接下载图片

         let a = document.createElement("a");

         a.href = newImg.src; //得到图片的base64编码数据

         a.download = "课题甘特图.png";

         a.click();

};

img2.src = base64Image2;

};

img1.src = base64Image1;

}