canvas把多張圖片拼成長圖

時間 2019-12-05

標籤 canvas 圖片拼成简体版

原文原文鏈接

最近看到一個用canvas實現給圖片加水印的文章，學習了以後作了個把多張圖片拼成長圖的功能。html

須要瞭解的知識點：canvas

步驟是：wordpress

用<input type="file">來選擇本地文件
用FileReader的readAsDataURL來拿到做爲圖片src的dataURL
把圖片實例化，而後畫在canvas中
用HTMLCanvasElement.toDataURL()拿到拼好的圖的dataURL

完整代碼以下。學習

<!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">點擊選擇圖片</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.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>

還有許多別的canvas處理圖片的應用場景，感興趣的能夠自行搜索。code

完。htm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。