基于 HTML5 Canvas 實現(xiàn)圖片旋轉(zhuǎn)與下載功能(完整代碼展示)
發(fā)布時間：2025-06-18 15:13:21 作者：我愛吃朱肉 
我要評論
我要評論本文將深入剖析一段基于 HTML5 Canvas 的代碼，該代碼實現(xiàn)了圖片的旋轉(zhuǎn)（90 度和 180 度）以及旋轉(zhuǎn)后圖片的下載功能,通過對代碼的解讀，我們可以學(xué)習(xí)到如何利用 Canvas API 進(jìn)行圖像操作，以及如何實現(xiàn)文件的下載功能，感興趣的朋友跟隨小編一起看看吧
一、引言
在 Web 開發(fā)中，經(jīng)常會遇到需要對圖片進(jìn)行處理并提供下載功能的需求。本文將深入剖析一段基于 HTML5 Canvas 的代碼，該代碼實現(xiàn)了圖片的旋轉(zhuǎn)（90 度和 180 度）以及旋轉(zhuǎn)后圖片的下載功能。通過對代碼的解讀，我們可以學(xué)習(xí)到如何利用 Canvas API 進(jìn)行圖像操作，以及如何實現(xiàn)文件的下載功能。
二、HTML 結(jié)構(gòu)分析
- 基本結(jié)構(gòu)：這段 HTML 代碼的基本結(jié)構(gòu)比較簡單，包含了一個
<head>部分和一個<body>部分。<head>部分主要用于設(shè)置頁面的元數(shù)據(jù)和引入外部樣式表，<body>部分則包含了頁面的實際內(nèi)容。 - Canvas 元素：在
<body>中，有一個<canvas>元素，其id為canvas。這個元素是 HTML5 提供的用于繪制圖形和圖像的容器。如果用戶的瀏覽器不支持 HTML5 的<canvas>標(biāo)簽，那么在<canvas>標(biāo)簽內(nèi)的文本 “您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。” 將會顯示出來。 - 下載按鈕：還有一個
<div>元素，類名為download，它作為一個下載按鈕，文本內(nèi)容為 “下載”。用戶點擊這個按鈕時，將觸發(fā)相應(yīng)的 JavaScript 函數(shù)來實現(xiàn)圖片的下載。
三、CSS 樣式分析
- 下載按鈕樣式：通過 CSS 樣式定義了
.download類的樣式。設(shè)置了按鈕的寬度為100px，高度為40px，背景顏色為白色（#fff），文字顏色為#276787，邊框為1px的實線，顏色為#276787。使用display: flex;、align-items: center;和justify-content: center;使按鈕內(nèi)的文本居中顯示。border-radius: 20px;將按鈕的邊角設(shè)置為圓角，使其看起來更加美觀。 - 交互樣式：定義了按鈕的交互樣式。當(dāng)鼠標(biāo)懸停在按鈕上時（
.download:hover），背景顏色變?yōu)?code>#276787，文字顏色變?yōu)榘咨吙蜃優(yōu)橥该?。?dāng)按鈕被按下時（.download:active），按鈕的透明度變?yōu)?code>0.4，提供了視覺反饋。
四、JavaScript 功能實現(xiàn)
- 圖像加載與 Canvas 初始化：首先創(chuàng)建一個
<img>元素用于加載原始圖像，并獲取<canvas>元素及其 2D 繪圖上下文ctx。設(shè)置原始圖像的src屬性為一個在線圖片的 URL，并設(shè)置crossOrigin屬性為anonymous，以處理跨域問題。當(dāng)圖像加載完成后（originImage.onload事件觸發(fā)），獲取圖像的原始寬度ow和高度oh。 - 圖片旋轉(zhuǎn)：
- 90 度旋轉(zhuǎn)（注釋部分）：代碼中注釋掉了 90 度旋轉(zhuǎn)的實現(xiàn)。原本的邏輯是將 Canvas 的寬度設(shè)置為圖像的原始高度
oh，高度設(shè)置為圖像的原始寬度ow。然后使用ctx.rotate(-Math.PI / 2)將繪圖上下文逆時針旋轉(zhuǎn) 90 度，再通過ctx.drawImage(originImage, -ow, 0)將圖像繪制到 Canvas 上。最后再使用ctx.rotate(Math.PI / 2)將繪圖上下文順時針旋轉(zhuǎn)回原來的角度。 - 180 度旋轉(zhuǎn)（實際實現(xiàn)）：將 Canvas 的寬度和高度設(shè)置為圖像的原始寬度
ow和高度oh。使用ctx.rotate(Math.PI)將繪圖上下文順時針旋轉(zhuǎn) 180 度，然后通過ctx.drawImage(originImage, -ow, -oh)將圖像繪制到 Canvas 上，實現(xiàn)了圖像的 180 度旋轉(zhuǎn)。
- 90 度旋轉(zhuǎn)（注釋部分）：代碼中注釋掉了 90 度旋轉(zhuǎn)的實現(xiàn)。原本的邏輯是將 Canvas 的寬度設(shè)置為圖像的原始高度
- 生成 Base64 編碼：旋轉(zhuǎn)后的圖像通過
canvas.toDataURL("image/jpeg", 0.5)方法生成一個 Base64 編碼的字符串，這里設(shè)置圖像格式為 JPEG，質(zhì)量為 0.5。生成的 Base64 編碼字符串存儲在base64變量中。 - 下載功能實現(xiàn)：
- 方式一（注釋部分）：注釋掉了一種下載實現(xiàn)方式。原本的邏輯是創(chuàng)建一個
<a>元素，將其href屬性設(shè)置為生成的 Base64 編碼字符串，download屬性設(shè)置為 “旋轉(zhuǎn)后的圖片.png”，然后模擬點擊這個<a>元素來觸發(fā)下載。 - 方式二（實際實現(xiàn)）：創(chuàng)建一個
<a>元素，將其href屬性設(shè)置為通過window.URL.createObjectURL(base64ToBlob(base64))生成的對象 URL，download屬性設(shè)置為 “旋轉(zhuǎn)后的圖片.jpg”。base64ToBlob函數(shù)將 Base64 編碼字符串轉(zhuǎn)換為 Blob 對象，然后通過window.URL.createObjectURL創(chuàng)建一個可用于下載的 URL。最后模擬點擊<a>元素來實現(xiàn)圖片的下載。
- 方式一（注釋部分）：注釋掉了一種下載實現(xiàn)方式。原本的邏輯是創(chuàng)建一個
- Base64 轉(zhuǎn) Blob 函數(shù)：
base64ToBlob函數(shù)用于將 Base64 編碼字符串轉(zhuǎn)換為 Blob 對象。它首先將 Base64 字符串分割，提取出 MIME 類型，然后使用atob方法將 Base64 編碼的字符串解碼為二進(jìn)制字符串，再將二進(jìn)制字符串轉(zhuǎn)換為Uint8Array，最后創(chuàng)建一個新的 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;到此這篇關(guān)于基于 HTML5 Canvas 實現(xiàn)圖片旋轉(zhuǎn)與下載功能的文章就介紹到這了,更多相關(guān)html5 canvas圖片旋轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
html5 Canvas實現(xiàn)圖片旋轉(zhuǎn)的示例
這篇文章主要介紹了htm5l Canvas實現(xiàn)圖片旋轉(zhuǎn)的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-15
HTML5 Canvas 旋轉(zhuǎn)風(fēng)車?yán)L制
這篇文章主要介紹了HTML5 Canvas 旋轉(zhuǎn)風(fēng)車?yán)L制,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-18實例講解利用HTML5 Canvas API操作圖形旋轉(zhuǎn)的方法
這篇文章主要介紹了利用HTML5 Canvas API操作圖形旋轉(zhuǎn)的方法的實例講解,包括圖片自身的中心坐標(biāo)位置旋轉(zhuǎn)以及圍繞某個點的旋轉(zhuǎn)例子,需要的朋友可以參考下2016-03-22詳解通過HTML5 Canvas實現(xiàn)圖片的平移及旋轉(zhuǎn)變化的方法
這篇文章主要介紹了通過HTML5 Canvas實現(xiàn)圖片的平移及旋轉(zhuǎn)變化的方法,其中旋轉(zhuǎn)講解的是配合平移坐標(biāo)系確定圓心位置而進(jìn)行的順時針旋轉(zhuǎn),需要的朋友可以參考下2016-03-22html5 canvas實現(xiàn)跟隨鼠標(biāo)旋轉(zhuǎn)的箭頭
這篇文章主要為大家詳細(xì)介紹了html5 canvas實現(xiàn)跟隨鼠標(biāo)旋轉(zhuǎn)的箭頭，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-11HTML5 Canvas旋轉(zhuǎn)動畫的2個代碼例子（一個旋轉(zhuǎn)的太極圖效果）
這篇文章主要介紹了HTML5 Canvas旋轉(zhuǎn)動畫的2個代碼例子,實現(xiàn)了一個旋轉(zhuǎn)的太極圖效果,學(xué)習(xí)HTML5 Canvas旋轉(zhuǎn)動畫的朋友可以參考下2014-04-10HTML5 Canvas實現(xiàn)平移/放縮/旋轉(zhuǎn)deom示例(附截圖)
HTML5 Canvas中提供了實現(xiàn)圖形API，通過它可以簡單的實現(xiàn)平移，旋轉(zhuǎn)，放縮等等，下面與大家分享下平移，旋轉(zhuǎn)，放縮的具體實現(xiàn)及參照圖，感興趣的朋友可以參考下哈，希望對2013-07-04html5的畫布canvas——畫出弧線、旋轉(zhuǎn)的圖形實例代碼+效果圖
在做旋轉(zhuǎn)操作之前一定要理解一句話：旋轉(zhuǎn)的是畫布的坐標(biāo)系而不是圖形本身，首先認(rèn)識一下畫圓的坐標(biāo)：中心、起始角、結(jié)束角；接下來的就很簡單了2013-06-09
html5使用canvas實現(xiàn)圖片下載功能的示例代碼
這篇文章主要介紹了html5使用canvas實現(xiàn)圖片下載功能的示例代碼,非常具有實用價值，需要的朋友可以參考下2017-08-26
