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

效果

在这里插入图片描述

示例

在这里插入图片描述

源码：

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

相关阅读:
浅谈指针数组
嵌入式系统，ARM微处理器特点，ARM体系结构，特征、状态、操作模式等，中断分类，JTAG调试接口
ChatGPT的问题与回复的内容导出（Chorme）
Spring源码分析之AOP
C++PrimerPlus(第6版)中文版:Chapter13.3多态公有继承例子：usebrass1.cpp
Unity Shader - 兰伯特漫反射
网站开启HTTPS，免费的 SSL证书申请渠道有哪些？
数字孪生技术的应用在能源行业案例解析
C++实践2：在c++20中为spdlog与fmt装配source_location
Part2_扩展MATSIM_Subpart10_分析_第37章基于Matsim的交互式分析与决策支持

原文地址：https://blog.csdn.net/qq_29761395/article/details/133179793