JavaScript toDataURL圖片轉(zhuǎn)換問題解讀

更新時間：2023年06月17日 09:38:24 作者：Tornado_Liao

這篇文章主要介紹了JavaScript toDataURL圖片轉(zhuǎn)換問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

JavaScript toDataURL圖片轉(zhuǎn)換

問題

js業(yè)務(wù)中涉及到圖片轉(zhuǎn)換格式，.在安卓手機(jī)的微信瀏覽器上出現(xiàn)

stack: "Error: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported

最初解決方法（在安卓的微信瀏覽器上有問題）

??? ?let image = new Image();
??? ?image.src = img;
? ? image.setAttribute('crossOrigin', 'anonymous');

最開始使用的這個方法。是將跨域?qū)傩栽O(shè)置為anonymous，然后服務(wù)器的nginx端也添加跨域header=*

但測試時會卡住

最終解決方法

??? ?let image = new Image();
??? ?image.setAttribute('crossOrigin', 'anonymous');
??? ?image.src = img;

調(diào)試了很久發(fā)現(xiàn)將屬性設(shè)置放在圖片的賦值前面就解決問題了

js將圖片轉(zhuǎn)為base64（解決Canvas.toDataURL 圖片跨域問題）

場景一

將項(xiàng)目中的圖片資源轉(zhuǎn)為base64

function convertImgToBase64(url, callback) {
? ? ? ? let canvas = document.createElement('canvas'),
? ? ? ? ctx = canvas.getContext('2d'),
? ? ? ? img = new Image();
? ? ? ? img.crossOrigin = 'anonymous';//解決Canvas.toDataURL 圖片跨域問題
? ? ? ? img.onload = () => {
? ? ? ? ? canvas.height = img.height;
? ? ? ? ? canvas.width = img.width;
? ? ? ? ? ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
? ? ? ? ? let ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); // 獲取到圖片的格式
? ? ? ? ? let dataURL = canvas.toDataURL("image/" + ext); // 得到base64 編碼的 dataURL
? ? ? ? ? callback && callback(dataURL);
? ? ? ? ? canvas = null;
? ? ? ? };
? ? ? ? img.src = url;
? ? ? }
var ?baseUrl = ''
convertImgToBase64(this.options.logo, (baseUrl) => {
? ? baseUrl = baseUrl
})

場景二

將用戶本地上傳的資源轉(zhuǎn)化，即用戶通過瀏覽器點(diǎn)擊文件上傳時，將圖片資源轉(zhuǎn)化成base64：

<!DOCTYPE html>
<html>
<head>
? <meta charset="utf-8">
? <meta name="viewport" content="width=device-width,initial-scale=1.0">
? <style>
? </style>
</head>
<body>
? <p><input type="file" id="upfile"></p>
? <p><button id="upJS">用原生JS上傳</button>
? </div>
? <script>
? ? function imgFileTobase64() {
? ? ? var reader = new FileReader();
? ? ? var AllowImgFileSize = 2100000; //上傳圖片最大值(單位字節(jié))（ 2 M = 2097152 B ）超過2M上傳失敗
? ? ? var file = document.getElementById('upfile').files[0]
? ? ? if (file) {
? ? ? ? //將文件以Data URL形式讀入頁面
? ? ? ? reader.readAsDataURL(file);
? ? ? ? reader.onload = function (e) {
? ? ? ? ? //var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64碼部分（可選可不選，需要與后臺溝通）
? ? ? ? ? if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
? ? ? ? ? ? alert('上傳失敗，請上傳不大于2M的圖片！');
? ? ? ? ? ? return;
? ? ? ? ? } else {
? ? ? ? ? ? //執(zhí)行上傳操作
? ? ? ? ? ? alert(reader.result);
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? }
? ? document.getElementById("upJS").onclick = function () {
? ? ? imgFileTobase64()
? ? }
? </script>
</body>
</html>