基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

本文主要是介绍基于 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>元素,其idcanvas。这个元素是 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 度旋转。
  • 生成 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 实现图片旋转与下载功能(完整代码展示)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:http://www.cppcns.com/web/html5/714128.html
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1155123

相关文章

Linux下删除乱码文件和目录的实现方式

《Linux下删除乱码文件和目录的实现方式》:本文主要介绍Linux下删除乱码文件和目录的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下删除乱码文件和目录方法1方法2总结Linux下删除乱码文件和目录方法1使用ls -i命令找到文件或目录

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定,动态列2、动态下拉3、自定义锁定行/列,添加密码4、合并

mybatis执行insert返回id实现详解

《mybatis执行insert返回id实现详解》MyBatis插入操作默认返回受影响行数,需通过useGeneratedKeys+keyProperty或selectKey获取主键ID,确保主键为自... 目录 两种方式获取自增 ID:1. ​​useGeneratedKeys+keyProperty(推

Spring Boot集成Druid实现数据源管理与监控的详细步骤

《SpringBoot集成Druid实现数据源管理与监控的详细步骤》本文介绍如何在SpringBoot项目中集成Druid数据库连接池,包括环境搭建、Maven依赖配置、SpringBoot配置文件... 目录1. 引言1.1 环境准备1.2 Druid介绍2. 配置Druid连接池3. 查看Druid监控

Linux在线解压jar包的实现方式

《Linux在线解压jar包的实现方式》:本文主要介绍Linux在线解压jar包的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux在线解压jar包解压 jar包的步骤总结Linux在线解压jar包在 Centos 中解压 jar 包可以使用 u

创建Java keystore文件的完整指南及详细步骤

《创建Javakeystore文件的完整指南及详细步骤》本文详解Java中keystore的创建与配置,涵盖私钥管理、自签名与CA证书生成、SSL/TLS应用,强调安全存储及验证机制,确保通信加密和... 目录1. 秘密键(私钥)的理解与管理私钥的定义与重要性私钥的管理策略私钥的生成与存储2. 证书的创建与

c++ 类成员变量默认初始值的实现

《c++类成员变量默认初始值的实现》本文主要介绍了c++类成员变量默认初始值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录C++类成员变量初始化c++类的变量的初始化在C++中,如果使用类成员变量时未给定其初始值,那么它将被

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert