js+canvas实现多张图片拼接成一张图片

2019-02-15

前言

在做照片直播这块需求的时候，需要将多张图片合成一张，可供用户保存下载。

1.选择图片，将选择的图片从上往下排列

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>拼长图</title>
</head>
<body>
<input id="upload-input" type="file" accept="image/*" multiple="multiple" style="display: none;">
<label for="upload-input" style="border: 1px solid #333; cursor: pointer; padding: 5px 20px;">点击选择图片</label>
<div id="image-container"></div>
<script>
    // 拼出来的图片的宽度
    const width = 300
    // 拼出来的图片的质量，0-1之间，越大质量越好
    const encoderOptions = 0.5

    const uploadInput = document.getElementById('upload-input')
    const imageDiv = document.getElementById('image-container')

    uploadInput.addEventListener('change', event => {
        const files = Array.from(event.target.files)
        filesToInstances(files, instances => {
        drawImages(instances, finalImageUrl => {
        imageDiv.innerHTML = `<div><a download href=${finalImageUrl}>点击下载</a><br><img src=${finalImageUrl}></div>`
    })
    })
    })

    // 根据图片文件拿到图片实例
    const filesToInstances = (files, callback) => {
        const length = files.length
        let instances = []
        let finished = 0

        files.forEach((file, index) => {
            const reader = new FileReader()
            // 把文件读为 dataUrl
            reader.readAsDataURL(file)
            reader.onload = e => {
                const image = new Image()
                image.src = e.target.result
              //解决跨域
              // image.setAttribute('crossOrigin', 'anonymous');   
              // image.src = e.target.result + '?time=' + new Date().valueOf();
                image.onload = () => {
                    // 图片实例化成功后存起来
                    instances[index] = image
                    finished ++
                    if (finished === length) {
                        callback(instances)
                    }
                }
            }
        })
    }

    // 拼图
    const drawImages = (images, callback) => {
        const heights = images.map(item => width / item.width * item.height)
        const canvas = document.createElement('canvas')
        canvas.width = width
        canvas.height = heights.reduce((total, current) => total + current)
        const context = canvas.getContext('2d')

        let y = 0

        images.forEach((item, index) => {
            const height = heights[index]
            context.drawImage(item, 0, y, width, height)
        y += height
    })
        callback(canvas.toDataURL('image/jpeg', encoderOptions))
    }
</script>
</body>
</html>

注意：如果是在线上运行，可能要处理图片跨域的问题

解决方法：

将image.src = e.target.result改为以下代码即可。

image.setAttribute(‘crossOrigin’, ‘anonymous’);
image.src = e.target.result + ‘?time=’ + new Date().valueOf();

2.提供图片数组路径，将图片从上往下排列

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>拼长图</title>
    <style>
        .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
        .clearfix { zoom:1; }
        .demo img{  float: left;  width:30%;  }
        #upload-input{  width: 20%; border: 1px solid #333; line-height: 42px; text-align: center; margin: 10px; cursor: pointer;  }
    </style>
</head>
<body>
<div class="demo clearfix">
    <img src="img/slide1.jpg" alt="">
    <img src="img/slide2.jpg" alt="">
    <img src="img/slide3.jpg" alt="">
</div>
<div id="upload-input">合成图片</div>
<div id="image-container"></div>
<script>
    // 拼出来的图片的宽度
    const width = 300
    // 拼出来的图片的质量，0-1之间，越大质量越好
    const encoderOptions = 0.5

    const uploadInput = document.getElementById('upload-input')
    const imageDiv = document.getElementById('image-container')
    const files = ['img/slide1.jpg','img/slide2.jpg','img/slide3.jpg']
    uploadInput.addEventListener('click', event => {
        filesToInstances(files, instances => {
            drawImages(instances, finalImageUrl => {
                imageDiv.innerHTML = `<div><a download href=${finalImageUrl}>点击下载</a><br><img src=${finalImageUrl}></div>`;
             });
        });
    });

    // 根据图片文件拿到图片实例
    const filesToInstances = (files, callback) => {
        const length = files.length;
        let instances = [];
        let finished = 0;
        files.forEach((file, index) => {
            const image = new Image();
            image.src = file;
            image.onload = () => {
                // 图片实例化成功后存起来
                instances[index] = image;
                finished ++;
                if (finished === length) {
                    callback(instances);
                }
            }
        });
    }

    // 拼图
    const drawImages = (images, callback) => {
        const heights = images.map(item => width / item.width * item.height);
        const canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = heights.reduce((total, current) => total + current);
        const context = canvas.getContext('2d');
        let y = 0;
        images.forEach((item, index) => {
            const height = heights[index];
            context.drawImage(item, 0, y, width, height);
            y += height;
    });
        callback(canvas.toDataURL('image/jpeg', encoderOptions));
    }
</script>
</body>

</html>

注意：和上面一样，在线上时也需要解决图片跨域问题

参考链接：https://segmentfault.com/a/1190000011684333