canvas合并多张图片成一张

最新推荐文章于 2024-07-10 10:03:01 发布

Grocery store owner

最新推荐文章于 2024-07-10 10:03:01 发布

阅读量1.2k

点赞数 2

文章标签：前端 javascript

本文链接：https://blog.csdn.net/no_one_but_you/article/details/131429433

版权

该代码段展示了一个JavaScript函数，通过创建canvas元素来合并图片，将两张图片横向排列成一张新的图片。函数接受图片URL列表作为参数，利用Promise处理异步加载，并在所有图片加载完成后，将合并后的图片转换为base64格式的数据URL。

摘要由CSDN通过智能技术生成

效果为：两张图片一排
新建js文件方法，以便调用

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

使用

import { mergeImgs } from './index'


// 图片合并
mergeImgs(arr) {
    mergeImgs(arr).then(res => {
    	// base64图片地址为res
        console.log(res)
    })
},