JavaScript - canvas - 将图片保存到本地

news2024/11/18 12:28:12

效果

在这里插入图片描述

示例

项目结构：

在这里插入图片描述

源码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>将图片保存到本地</title>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <br />
        <input type="button" id="button-save-as" value="Save as..." />

        <script type="text/javascript">
            window.onload = function(event) {
                main();
            }
            
            function main() {
                const canvas = document.querySelector("#canvas");
                const canvasContext = canvas.getContext("2d");
                
                {
                    // 先在 canvas 上面画一张图片
                    const image = new Image();
                    image.onload = (event) => {
                        // console.log(event);
                        canvas.width = image.width;
                        canvas.height = image.height;
                        canvasContext.drawImage(image, 0, 0);
                    }
                    image.src = "img/transformers.jpg";
                }
                
                {
                    const buttonSaveAs = document.getElementById('button-save-as');
                    buttonSaveAs.onclick = (event) => {
                        canvas.toBlob(function (blob) {
                            // https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob
                            const objectURL = URL.createObjectURL(new Blob([ blob ], { type: "image/png" }));
                            
                            const anchor = document.createElement('a');
                            anchor.href = objectURL;
                            anchor.download = "Filename.png";
                            
                            anchor.click();
                            
                            URL.revokeObjectURL(objectURL);
                        }, "image/png", 1);
                    };
                }
            }
        </script>
    </body>
</html>