APICloud開發者進階之路| JS利用H5的canvas操作微信瀏覽器上傳圖片方向旋轉
阿新 • • 發佈：2020-07-11
專案背景：微信公眾號，不想用微信JS-SDK 圖片上傳功能
發現部分機型，微信內建瀏覽器，vant-upload元件選取圖片會發生旋轉
解決方案：利用H5的canvas標籤操作圖片旋轉
程式碼註釋不全，大概邏輯就是 選圖片=》讀取檔案後=》判斷圖片方向=》用畫布重畫圖片並旋轉=》儲存圖片檔案
程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>圖片處理canvas旋轉方向</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/exif-js/2.3.0/exif.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<van-field required :border="false" name="uploader" label="照片">
<template #input>
<van-uploader v-model="fileList" :max-count="1" :after-read="afterRead"></van-uploader>
</template>
</van-field>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
fileList: []
}
},
methods: {
async afterRead(file) {
var _this = this; // vue物件
// file.status = 'uploading';
// file.message = '圖片處理';
EXIF.getData(file.file, function() {
// 旋轉方向 1：0° 3:180° 6：順時針90° 8：逆時針90°
var Orientation = EXIF.getTag(this, "Orientation");
var imgName = this.name; // 原圖片名稱
var imgType = this.type; // 原圖片型別
if (!this || !window.FileReader) return; // 看支援不支援FileReader
// 建立一個reader
var reader = new FileReader();
// 將圖片2將轉成 base64 格式
reader.readAsDataURL(this);
reader.onloadend = function() {
var img = new Image();
img.src = reader.result;
var width = img.width;
var height = img.height;
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
switch (Number(Orientation)) {
case 3:
canvas.width = width;
canvas.height = height;
ctx.rotate(Math.PI / 180 * 180);
ctx.drawImage(img, 0, 0, img.width, img.height, -img.width, -img.height, img.width, img.height);
break;
case 6:
canvas.width = height;
canvas.height = width;
ctx.rotate(Math.PI / 180 * 90);
ctx.drawImage(img, 0, 0, img.width, img.height, 0, -img.height, img.width, img.height);
break;
case 8:
canvas.width = height;
canvas.height = width;
ctx.rotate(Math.PI / 180 * -90);
ctx.drawImage(img, 0, 0, img.width, img.height, -img.width, 0, img.width, img.height);
break;
default:
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
break;
}
var fileBase64 = canvas.toDataURL(imgType);
var newFile = _this.dataURLtoFile(imgName, imgType, fileBase64)
file.content = fileBase64
file.file = newFile
file.status = 'done'
}
});
},
dataURLtoFile(imgName, imgType, dataurl) {
var arr = dataurl.split(","),
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], imgName, {
type: imgType
});
},
}
})
</script>
</html>
複製程式碼