使用canvas将多张图片截取拼接成一张图片

使用canvas将多张图片截取拼接成一张图片

业务场景

• 最近在做一个截取视频图片并拼接的小工具,其中就有个功能需要将多张图片截取拼接成一张图片的需求

• 

• 上面就是将几张图片截取拼接成一张图片的效果图

实现思路

• 使用canvas提供的 drawImage api实现
• api里面的参数比较复杂,在此不赘述,可以参考这篇文章 canvas的drawImage方法参数详解
• 生成一个canvas画布,然后利用 drawImage 方法循环截取,获得我们需要的图片元素
• 将获得的图片元素放在canvas对应的位置
• 循环完毕后将canvas绘制的内容生成图片进行保存即可

部分源码

        mergeImgs(list, cwith = this.videoWidth, cheight = this.heigth) {
            return new Promise((resolve, reject) => {
                // 创建 canvas 节点并初始化
                const canvas = document.createElement('canvas'); 
                canvas.width = cwith; //设置 canvas 的宽度
                canvas.height = !this.special ? this.videoHeight + cheight * (list.length - 1) : cheight * list.length; // 设置canvans 的高度
                const context = canvas.getContext('2d');
                list.map((item, index) => { // 循环每张图片资源
                    const img = new Image();
                    img.src = item;
                    // 跨域
                    img.crossOrigin = 'Anonymous';
                    img.onload = () => {
                        if (!this.special && index == 0) {
                            // 截取整张图片
                            context.drawImage(img, 0, 0, cwith, this.videoHeight);
                        } else {
                            // 截取图片对应位置的画面
                            context.drawImage(
                                img,
                                0, // 开始剪切图片的 x 坐标位置
                                this.videoHeight - cheight, // 开始剪切图片的 y 坐标位置
                                cwith, // 被剪切图像的宽度
                                cheight, // 被剪切图像的高度
                                0, // 在画布上放置图像的 x 坐标位置
                                !this.special ? this.videoHeight + cheight * (index - 1) : cheight * index, // 在画布上放置图像的 y 坐标位置
                                cwith, // 被剪裁图像的宽度
                                cheight // 被剪裁图像的高度
                            );
                        }
                        if (index === list.length - 1) {
                            resolve(canvas.toDataURL('image/png')); // canvas上所有图片绘制完成后返回生成的图片
                        }
                    };
                });
            });
        },

// 调用
            this.mergeImgs(this.imageList).then((res) => {
                this.stitchImg = res;
            });

体验地址

视频截图拼接小工具