基于 HTML5 Canvas 实现图片旋转与下载功能

一、引言

在 Web 开发中，经常会遇到需要对图片进行处理并提供下载功能的需求。本文将深入剖析一段基于 HTML5 Canvas 的代码，该代码实现了图片的旋转（90 度和 180 度）以及旋转后图片的下载功能。通过对代码的解读，我们可以学习到如何利用 Canvas API 进行图像操作，以及如何实现文件的下载功能。

二、HTML 结构分析

基本结构 ：这段 HTML 代码的基本结构比较简单，包含了一个<head>部分和一个<body>部分。<head>部分主要用于设置页面的元数据和引入外部样式表，<body>部分则包含了页面的实际内容。
Canvas 元素 ：在<body>中，有一个<canvas>元素，其id为canvas。这个元素是 HTML5 提供的用于绘制图形和图像的容器。如果用户的浏览器不支持 HTML5 的<canvas>标签，那么在<canvas>标签内的文本 "您的浏览器不支持 HTML5 canvas 标签。" 将会显示出来。
下载按钮 ：还有一个<div>元素，类名为download，它作为一个下载按钮，文本内容为 "下载"。用户点击这个按钮时，将触发相应的 JavaScript 函数来实现图片的下载。

三、CSS 样式分析

下载按钮样式 ：通过 CSS 样式定义了.download类的样式。设置了按钮的宽度为100px，高度为40px，背景颜色为白色（#fff），文字颜色为#276787，边框为1px的实线，颜色为#276787。使用display: flex;、align-items: center;和justify-content: center;使按钮内的文本居中显示。border-radius: 20px;将按钮的边角设置为圆角，使其看起来更加美观。
交互样式 ：定义了按钮的交互样式。当鼠标悬停在按钮上时（.download:hover），背景颜色变为#276787，文字颜色变为白色，边框变为透明。当按钮被按下时（.download:active），按钮的透明度变为0.4，提供了视觉反馈。

四、JavaScript 功能实现

图像加载与 Canvas 初始化 ：首先创建一个<img>元素用于加载原始图像，并获取<canvas>元素及其 2D 绘图上下文ctx。设置原始图像的src属性为一个在线图片的 URL，并设置crossOrigin属性为anonymous，以处理跨域问题。当图像加载完成后（originImage.onload事件触发），获取图像的原始宽度ow和高度oh。
图片旋转 ：
- 90 度旋转（注释部分） ：代码中注释掉了 90 度旋转的实现。原本的逻辑是将 Canvas 的宽度设置为图像的原始高度oh，高度设置为图像的原始宽度ow。然后使用ctx.rotate(-Math.PI / 2)将绘图上下文逆时针旋转 90 度，再通过ctx.drawImage(originImage, -ow, 0)将图像绘制到 Canvas 上。最后再使用ctx.rotate(Math.PI / 2)将绘图上下文顺时针旋转回原来的角度。
- 180 度旋转（实际实现） ：将 Canvas 的宽度和高度设置为图像的原始宽度ow和高度oh。使用ctx.rotate(Math.PI)将绘图上下文顺时针旋转 180 度，然后通过ctx.drawImage(originImage, -ow, -oh)将图像绘制到 Canvas 上，实现了图像的 180 度旋转。
生成 Base64 编码 ：旋转后的图像通过canvas.toDataURL("image/jpeg", 0.5)方法生成一个 Base64 编码的字符串，这里设置图像格式为 JPEG，质量为 0.5。生成的 Base64 编码字符串存储在base64变量中。
下载功能实现 ：
- 方式一（注释部分） ：注释掉了一种下载实现方式。原本的逻辑是创建一个<a>元素，将其href属性设置为生成的 Base64 编码字符串，download属性设置为 "旋转后的图片.png"，然后模拟点击这个<a>元素来触发下载。
- 方式二（实际实现） ：创建一个<a>元素，将其href属性设置为通过window.URL.createObjectURL(base64ToBlob(base64))生成的对象 URL，download属性设置为 "旋转后的图片.jpg"。base64ToBlob函数将 Base64 编码字符串转换为 Blob 对象，然后通过window.URL.createObjectURL创建一个可用于下载的 URL。最后模拟点击<a>元素来实现图片的下载。
Base64 转 Blob 函数 ：base64ToBlob函数用于将 Base64 编码字符串转换为 Blob 对象。它首先将 Base64 字符串分割，提取出 MIME 类型，然后使用atob方法将 Base64 编码的字符串解码为二进制字符串，再将二进制字符串转换为Uint8Array，最后创建一个新的 Blob 对象并返回。

完整代码展示

复制代码

<!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">
    <link rel="stylesheet" href="./assets/global.css">
    <style>
        .download {
            width: 100px;
            height: 40px;
            background-color: #fff;
            color: #276787;
            border: 1px solid #276787;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px;
            font-size: 12px;
            transition: all .5s;
        }

        .download:hover {

            background-color: #276787;
            color: white;
            border: 1px solid transparent;

        }

        .download:active {
            opacity: .4;
        }
    </style>

</head>

<body>
    <canvas id="canvas">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>

    <div class="download">下载</div>


    <script>
        // 原始图像
        let originImage = document.createElement('img');

        // 画布
        let canvas = document.getElementById("canvas");
        let ctx = canvas.getContext("2d");
        // 转换后的base64
        let base64 = ''
        // 下载按钮
        let download = document.querySelector(".download");
        originImage.setAttribute("src", "https://t11.baidu.com/it/u=1760443654,877298532&fm=58")
        originImage.crossOrigin = "anonymous";
        originImage.onload = () => {
            let ow = originImage.naturalWidth;
            let oh = originImage.naturalHeight;
            // 90度
            // canvas.width = oh;
            // canvas.height = ow;
            // ctx.width = oh;
            // ctx.height = ow;
            // ctx.rotate(-Math.PI / 2) // 逆时针90度
            // ctx.drawImage(originImage, -ow, 0)
            // ctx.rotate(Math.PI / 2) // 顺时针90度
            // ctx.drawImage(originImage, 0, -oh)
            // 180度 
            canvas.width = ow;
            canvas.height = oh;
            ctx.width = ow;
            ctx.height = oh;
            ctx.rotate(Math.PI) // 顺时针180度
            ctx.drawImage(originImage, -ow, -oh)
            base64 = canvas.toDataURL("image/jpeg", 0.5);
        }

        // 方式一
        // download.addEventListener('click', () => {
        //     let a = document.createElement('a');
        //     a.href = base64;
        //     a.download = "旋转后的图片.png";
        //     a.click();
        // })

        // 方式二
        download.addEventListener('click', () => {
            let a = document.createElement('a');
            a.href = window.URL.createObjectURL(base64ToBlob(base64));
            a.setAttribute('download', '旋转后的图片.jpg');
            a.click();
        })

        // base64 转 Blob
        function base64ToBlob(base64) {
            let arr = base64.split(',');
            let mime = arr[0].match(/:(.*?);/)[1];
            let bstr = atob(arr[1]);
            let n = bstr.length;
            let u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime })
        }
    </script>
</body>

</html>