遇到的問題:后端返回的是base64格式的圖片,前端拿到返回體后進行拼接展示在img標簽上,微信長按圖片進行保存,發現蘋果長按保存成功,安卓長按保存后相冊中保存的圖片時黑色的(且提示格式損壞)
解決辦法,使用html2canvas插件進行重新繪制,根據設備來選擇渲染方法
1.下載html2canvas
1 npm install --save html2canva
2.導入html2canvas
1 import html2canvas from 'html2canvas';
3.使用html2canvas
1 this.imgUrl = "data:image/jpeg;base64," + res.content.base64_image;
2
3
4 let ua = navigator.userAgent;
5 let isAndroid = ua.indexOf("Android") > -1 || ua.indexOf("Linux") > -1; //判斷設備是不是安卓
6 if (isAndroid) { //如果是安卓,則使用html2canvas繪制
7 html2canvas(this.$refs.imageTofile, { //this.$refs.imageTofile是我的img的父盒子
8 backgroundColor: null,
9 useCORS: true, //解決跨域
10 windowWidth: document.body.scrollWidth,
11 windowHeight: document.body.scrollHeight,
12 x: this.$refs.imageTofile.offsetLeft,
13 y: this.$refs.imageTofile.offsetTop,
14 scale: 6, // 這是分辨率倍數,一般是2,越高圖片越大,越清晰
15 }).then((canvas) => {
16 let url = canvas.toDataURL('image/png');
17 this.imgUrl = url
18 })
19 }
解決辦法2.使用原生canvas進行重新繪制,(優點:不用根據設備來選擇渲染方法,ios/安卓都能兼容)
1.頁面上創建一個canvas容器,設置其隱藏
1 <canvas v-show="false" ref="picture"></canvas>
2.使用canvas重新繪制並賦值
1 this.imgUrl = "data:image/jpeg;base64," + res.content.base64_image;//這個路徑只能蘋果保存
2
3 let img = new Image();
4 img.src = this.imgUrl;
5 this.$nextTick(() => {
6 let canvas = this.$refs.picture; //獲取到canvas的DOM
7 let ctx = canvas.getContext('2d'); //使用2d繪圖
8 img.onload = () => {
9 canvas.width = img.width;
10 canvas.height = img.height;
11 ctx.drawImage(img, 0, 0, img.width, img.height); //完整的將this.imgUrl給裁剪下來
12 let canvasURL = canvas.toDataURL('image/jpeg');
13 this.imgUrl = canvasURL;
14 }
15 })
