摘要:前言項目中需要實現圖片下載功能,第一個想到的是使用標簽的屬性來實現,但是在不同瀏覽器下測試會發現,有的瀏覽器無效,點擊后直接預覽圖片,所以,上網找到了另外一種兼容不同瀏覽器的圖片下載的方法,那就是利用來處理圖片,實現下載項目中點擊事件綁定點
前言:項目中需要實現圖片下載功能,第一個想到的是使用a標簽的download屬性來實現,但是在不同瀏覽器下測試會發現,有的瀏覽器無效,點擊后直接預覽圖片,所以,上網找到了另外一種兼容不同瀏覽器的圖片下載的方法,那就是利用canvas來處理圖片,實現下載;
1.項目中點擊事件綁定:
{{name}}
2.點擊事件中操作:
downloadIamge (imgsrc, name) { const url = imgsrc this.convertUrlToBase64(url).then((base64) => { const blob = this.convertBase64UrlToBlob(base64) if (getBrowser() === "IE" || getBrowser() === "Edge") { window.navigator.msSaveBlob(blob, name) } else { const a = document.createElement("a") const body = document.querySelector("body") a.download = name || "image" a.href = URL.createObjectURL(blob) a.style.display = "none" body.appendChild(a) a.click() body.removeChild(a) window.URL.revokeObjectURL(a.href) } }) },
分析:
3.this.convertUrlToBase64(url)就是利用canvas和toDataURL把圖片轉成base64格式并返回
convertUrlToBase64 (url) { return new Promise((resolve, reject) => { const img = new Image() img.crossOrigin = "Anonymous" img.src = url img.onload = function () { const canvas = document.createElement("canvas") canvas.width = img.width canvas.height = img.height const ctx = canvas.getContext("2d") ctx.drawImage(img, 0, 0, img.width, img.height) const ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase() const dataURL = canvas.toDataURL("image/" + ext) const base64 = { dataURL: dataURL, type: "image/" + ext, ext: ext } resolve(base64) } }) },
其中:img.crossOrigin = "Anonymous"是前端對圖片的跨域處理;
4.this.convertBase64UrlToBlob(base64)是將圖片base64流文件轉成blob文件
convertBase64UrlToBlob (base64) { const parts = base64.dataURL.split("base64,") const contentType = parts[0].split(":")[1] const raw = window.atob(parts[1]) const rawLength = raw.length const uInt8Array = new Uint8Array(rawLength) for (let i = 0; i < rawLength; i++) { uInt8Array[i] = raw.charCodeAt(i) } return new Blob([uInt8Array], { type: contentType }) },
5.getBrowser()用來判斷瀏覽器,解決瀏覽器兼容性問題:
import { getBrowser } from "@/utils/utils"
export function getBrowser () { const userAgent = navigator.userAgent if (userAgent.indexOf("OPR") > -1) { return "Opera" } if (userAgent.indexOf("Firefox") > -1) { return "FF" } if (userAgent.indexOf("Trident") > -1) { return "IE" } if (userAgent.indexOf("Edge") > -1) { return "Edge" } if (userAgent.indexOf("Chrome") > -1) { return "Chrome" } if (userAgent.indexOf("Safari") > -1) { return "Safari" } }
6.如果是IE或者Edge瀏覽器,可以直接使用window.navigator.msSaveBlob(blob, name)完成下載;
聲明:由于ios系統有安全性限制,以上方法在ios上無效;
以上就是記錄項目中用到的圖片下載,瀏覽器兼容的問題,涉及到的base64和blob的知識點和原理還不是很清晰,有時間一定要研究一下,整個方法,親測有效;歡迎測用,與意見反饋。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/104230.html
摘要:將預覽的圖片上傳,后端生成,在管理系統中下載。技術要點文字排版設置指定背景顏色引入外部字體繪制文字圖片將生成的圖片轉成上傳這里根據后端協商,此處后端要求將圖片生成,并點擊批量下載實現步驟文字排版在一般容器中,如果要實現文字的排版很容易。 最近遇到一個業務需求,在小程序端定制預覽功能,并在預覽的圖片中使用指定的外部字體。將預覽的圖片上傳OSS,后端生成PDF,在管理系統中下載。但是………...
摘要:支持動畫狀態的,在動畫開始,執行中,結束時提供回調函數支持動畫可以自定義貝塞爾曲線任何包含數值的屬性都可以設置動畫倉庫文檔演示功能介紹一定程度上,也是一個動畫庫,適用所有的屬性,并且實現的能更方便的實現幀動畫,替代復雜的定義方式。 動畫調研-V1 前言:動畫從用途上可以分為兩種,一種是展示型的動畫,類似于一張GIF圖,或者一段視頻,另一種就是交互性的動畫。這兩種都有具體的應用場景,比如...
摘要:上周做一個關于移動端圖片壓縮上傳的功能。利用,進行圖片的壓縮,得到圖片的的值上傳文件。 上周做一個關于移動端圖片壓縮上傳的功能。期間踩了幾個坑,在此總結下。 大體的思路是,部分API的兼容性請參照caniuse: 利用FileReader,讀取blob對象,或者是file對象,將圖片轉化為data uri的形式。 使用canvas,在頁面上新建一個畫布,利用canvas提供的API,...
閱讀 1033·2021-11-25 09:43
閱讀 1413·2021-11-18 10:02
閱讀 1814·2021-11-02 14:41
閱讀 2366·2019-08-30 15:55
閱讀 1068·2019-08-29 16:18
閱讀 2553·2019-08-29 14:15
閱讀 1391·2019-08-26 18:13
閱讀 733·2019-08-26 10:27