本文主要是介绍基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载...
一、引言
在 Web 开发中,经常会遇到需要对图片进行处理并提供下载功能的需求。本文将深入剖析一段基于 html5 Canvas 的代码,该代码实现了图片的旋转(90 度和 180 度)以及旋转后图片的下载功能。通过对代码的解读,我们可以学习到如何利用 Canvas API 进行图像操作,以及如何实现文件的下载功能。
二、HTML 结构http://www.chinasem.cn分析
- 基本结构:这段 HTML 代码的基本结构比较简单,包含了一个
<head>
部分和一个<body>
部分。<head>
部分主要用于设置页面的元数据和引入外部样式表,<body>
部分则包含了页面的实际内容。 - Canvas 元素:在
<body>
中,有一个<canvas>
元素,其id
为canvas
。这个元素是 HTML5 提供的用于绘制图形和图像的容器。如果用android户的浏览器不支持 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 度旋转。
- 90 度旋转(注释部分):代码中注释掉了 90 度旋转的实现。原本的逻辑是将 Canvas 的宽度设置为图像的原始高度
- 生成 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,do编程wnload
属性设置为 “旋转后的图片.jpg”。base64ToBlob
函数将 Base64 编码字符串转换为 Blob 对象,然后通过window.URL.createObjectURL
创建一个可用于下载的 URL。最后模拟点击<a>
元素来实现图片的下载。
- 方式一(注释部分):注释掉了一种下载实现方式。原本的逻辑是创建一个
- Base64 转 Blob 函数:
base64ToBlob
函数用于将 Base64 编码字符串转换为 Blob 对象。它首先将 Base64 字符串分割,提取出 MIME 类型,然后使用atob
方法将 Base64 编码的字符串解码为二进制字符串,再将二进制字符串转换为UQuaGNzint8Array
,最后创建一个新的 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; http://www.chinasem.cnbackground-color: #fff; color: #276787; border: 1px solid #276787;
到此这篇关于基于 HTML5 Canvas 实现图片旋转与下载功能的文章就介绍到这了,更多相关html5 canvas图片旋转内容请搜索China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章,希望大家以后多多支持编程China编程(www.chinasem.cn)!
这篇关于基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!