canvas上传、保存、下载图片一. 基本流程创建 canvas 画布与按钮,设置二维绘图实例化一个 Image ,

一. 基本流程

1. 创建 canvas 画布与按钮,设置二维绘图；
1. 实例化一个 Image , 设置图片路径,绘制图片需要在图片加载完成后进行；
1. 获取canvas编码,创建a标签,设置href属性,设置download属性,添加至body,触发下载,从body中删除。

二. 代码注释详解

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas width="300" height="300"></canvas>
    <button>保存</button>
</body>
<script>
    // 获取画布
    let canvas = document.querySelector('canvas')
    // 设置二维绘图
    let ctx = canvas.getContext("2d")
    // 实例化图片
    let img = new Image()
    // 设置图片路径
    img.src = "./imgs/mt.png"
    // img.setAttribute('crossorigin', 'anonymous'); 
    // 图片加载
    img.onload = function () {
        // 绘制图片  (图片,X轴,Y轴,宽,高)
        //等比例缩放 img.width / 2   img.height / 2 
        ctx.drawImage(img, 0, 0, 300, 300)
    }
    // 获取button
    let button = document.querySelector('button')
    // 保存图片
    button.addEventListener('click', function () {
        // 获取canvas编码
        let dataURL = canvas.toDataURL()
        // console.log(dataURL);
        // 创建a标签
        let link = document.createElement('a')
        // 设置href属性
        link.href = dataURL
        // 如果缺少download属性，点击 "download" 会直接变成预览图片
        // 当添加download属性后则会触发图片的下载
        link.download = 'mt'
        // body添加a标签
        document.body.appendChild(link)
        // 触发a标签下载
        link.click()
        // body删除a标签
        document.body.removeChild(link)
    })
</script>

</html>

canvas上传、保存、下载图片

一. 基本流程

二. 代码注释详解

三. 效果展示