微信H5中遇到的问题Vue（一）

一、动态修改title

1.一般解决办法：

document.title = "你的标题";

在具体情况中，会出现ios部分机型不能改变的情况，原因是因为在某些场景下，页面没有刷新，导致页面没有实时更新title。

解决办法：（利用iframe的onload事件刷新页面）

dynamicStateTitle(title) {

setTimeout(function () {

document.title = title;

var iframe = document.createElement("iframe");

iframe.style.visibility = "hidden";//解决在过渡过程中会出现黑斑，实现无缝过渡刷新

iframe.style.width = "1px";

iframe.style.height = "1px";

iframe.onload = function () {

setTimeout(function () {

document.body.removeChild(iframe);

}, 0);

};

document.body.appendChild(iframe);

}, 0);

二、input框在ios暗黑模式下，字体颜色为纯白色，影响用户体验

解决办法：那是因为在代码中没有设置input框字体颜色，系统默认黑色会导致这一情况，所以根据自己的需求在css属性中设置个color

三、移动端海报的生成（二维码分享）

方法一：（基于uniapp、vue）不可取，暂未想到解决办法，只做记录

准备插件：qrcodejs2

  1  <template>
  2     <view class="">
  3         <view class="login">
  4             <view class="" @click="lookimg">
  5                 <image :src="imgPath[0].icon" v-if="imgPath[0].icon" mode="widthFix" crossorigin="anonymous"></image>
  6             </view>
  7             <u-navbar title="canvas" :is-back="false" title-color="#333"></u-navbar>
  8             <view class="tki" :style="isclass">
  9                 <canvas class="tki-canvas" :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="myCanvas" id="myCanvas"></canvas>
 10                 <div class="qrcode" ref="qrCodeUrl" style="display: none;"></div>
 11             </view>
 12         </view>
 13     </view>
 14 </template>
 15 
 16 <script>
 17     var _this;
 18     let qrcode;
 19     import titleImg from "../../static/images/icon.ok.png"
 20     import assetsImg from "../../static/images/icon-assets.png"
 21     import gouImg from "../../static/images/icon-gou.png"
 22     import QRCode from 'qrcodejs2'
 23     import {
 24         pathToBase64,
 25         base64ToPath
 26     } from 'image-tools'
 27     export default {
 28         components: {},
 29         data() {
 30             return {
 31                 canvasW: 0,
 32                 canvasH: 0,
 33                 SystemInfo: {},
 34                 goodsImg: {},
 35                 ewmImg: {},
 36                 titleImg: titleImg,
 37                 assetsImg: assetsImg,
 38                 gouImg: gouImg,
 39                 title: "①品质好，品牌开发商开发，居住舒适度高；②绿化高，临近主要干道，生活配套完善；③户型多，选择性高，适合多类人群。",
 40                 price: "158.00",
 41                 Oldprice: "350.00",
 42                 name: "天涯过客",
 43                 tags: ['品牌房企', '地铁物业', '清水新房'],
 44                 houseInfoMap: {},
 45                 my_qrcode: '',
 46                 imgPath: [{
 47                     icon: ''
 48                 }],
 49                 pixelRatio: '',
 50                 isclass: '',
 51                 id: ''
 52             };
 53         },
 54         async onLoad(e) {
 55             let that = this;
 56             this.id = e.id
 57             if (this.isIOS()) {
 58                 if (window.history && window.history.pushState) {
 59                     history.pushState(null, null, document.URL);
 60                     window.addEventListener("popstate", this.goIndex, false); //false阻止默认事件
 61                 }
 62             }
 63             that.SystemInfo = await that.getSystemInfo();
 64             // this.goodsImg = await this.getImageInfo(
 65             //     "https://cd-ok.oss-cn-hangzhou.aliyuncs.com/fang/20210203/161235392439999768148.png"
 66             // );
 67             that.request.getHouseById(e.id).then((res) => {
 68                 console.log(res.result);
 69                 that.houseInfoMap = res.result.houseInfoMap;
 70                 that.canvasW = that.SystemInfo.windowWidth;
 71                 that.canvasH = that.SystemInfo.windowHeight;
 72                 that.pixelRatio = that.SystemInfo.pixelRatio;
 73                 if (
 74                     that.SystemInfo.errMsg == "getSystemInfo:ok"
 75                 ) {
 76                     console.log("ok");
 77                     uni.showToast({
 78                         icon: "loading",
 79                         mask: true,
 80                         duration: 10000,
 81                         title: "海报绘制中",
 82                     });
 83                     setTimeout(() => {
 84                         console.log(that.houseInfoMap);
 85                         var ctx = uni.createCanvasContext("myCanvas", that);
 86                         // 1.填充背景色，蓝色
 87                         ctx.setFillStyle("#000CFF");
 88                         ctx.fillRect(0, 0, that.canvasW, that.canvasH);
 89                         that.fillRoundRect(ctx, 10, 90, that.canvasW - 20, 460, 10, '#fff');
 90                         // 2.绘制标题图片
 91                         ctx.drawImage(that.titleImg, 170, 20, 69, 32);
 92                         // 3.绘制title
 93                         ctx.setFontSize(10);
 94                         ctx.setFillStyle("#FFF");
 95                         ctx.fillText('房 产 合 伙 人 创 业 服 务 平 台', 130, 70);
 96                         // 4.绘制产品名称
 97                         ctx.setFontSize(23);
 98                         ctx.font = 'normal bold 23px Arial,sans-serif'
 99                         console.log(that.canvasW, that.canvasH);
100                         ctx.setFillStyle("#000000");
101                         ctx.fillText(that.houseInfoMap.houseName, 30, 130);
102                         // 5.绘制地址信息
103                         ctx.drawImage(that.assetsImg, that.canvasW - 100, 120, 12, 12);
104                         ctx.setFontSize(12);
105                         ctx.setFillStyle("#000000");
106                         ctx.fillText(that.houseInfoMap.getSaleInfo.belongArea, that.canvasW - 85, 130);
107                         // 6.绘制标签
108                         let distanceImgW = 30;
109                         let distanceTxtW = 50;
110                         let houseLabelArry = JSON.parse(that.houseInfoMap.houseLabel);
111                         for (let i = 0; i < houseLabelArry.length; i++) {
112                             ctx.drawImage(that.gouImg, distanceImgW, 160, 14, 14);
113                             ctx.setFontSize(12);
114                             ctx.setFillStyle("#000000");
115                             ctx.fillText(houseLabelArry[i], distanceTxtW, 170);
116                             distanceImgW += 80;
117                             distanceTxtW += 80;
118                         }
119                         // 7.绘制产品图
120                         // let image = new Image();
121                         // image.crossOrigin = 'Anonymous'; // 支持跨域图片
122                         // image.src = that.houseInfoMap.cover + '?v=' + Math.random();
123                         // image.onload = function() {
124                         //     console.log(image, 'oooo')
125                         //     ctx.drawImage(image, 0, 0, 322, 233);
126                         // }
127                         that.circleImg(ctx, that.houseInfoMap.cover, 30, 190, 322, 233, 10);
128                         8. 绘制产品信息
129                         ctx.setFontSize(12);
130                         ctx.setFillStyle("#7E7E7E");
131                         ctx.fillText('销售均价', 30, 450);
132                         ctx.setFontSize(12);
133                         ctx.setFillStyle("#7E7E7E");
134                         ctx.fillText('建筑面积', 130, 450);
135                         ctx.setFontSize(12);
136                         ctx.setFillStyle("#7E7E7E");
137                         ctx.fillText('户型', 250, 450);
138                         ctx.setFontSize(14);
139                         ctx.setFillStyle("#1563F1");
140                         ctx.fillText(that.houseInfoMap.getSaleInfo.salePrice + '/㎡', 30, 470);
141                         ctx.setFontSize(14);
142                         ctx.setFillStyle("#7E7E7E");
143                         ctx.fillText(that.houseInfoMap.getHouseTypeInfo[0].typeArea + "㎡", 130, 470);
144                         ctx.setFontSize(14);
145                         ctx.setFillStyle("#7E7E7E");
146                         ctx.fillText(that.houseInfoMap.getHouseTypeInfo[0].typeName, 250, 470);
147                         // 10.绘制其他信息
148                         that.fillRoundRect(ctx, 10, 480, that.canvasW - 20, 110, 10, '#E7E7E7');
149                         // 10.1 绘制标题
150                         ctx.setFontSize(14);
151                         ctx.setFillStyle("#333");
152                         ctx.fillText('项目优势：', 30, 510);
153                         // 10.2绘制二维码
154 
155                         // 10.3 绘制商品简介，多余文字自动换行
156                         ctx.setFontSize(12);
157                         ctx.setFillStyle("#333");
158                         let _strlineW = 0;
159                         let _strLastIndex = 0; //每次开始截取的字符串的索引
160                         let _strHeight = 530; //绘制字体距离canvas顶部的初始高度
161                         let _num = 1;
162                         for (let i = 0; i < that.title.length; i++) {
163                             _strlineW += ctx.measureText(that.title[i]).width;
164                             if (_strlineW > that.canvasW - 155) {
165                                 if (_num == 3 && 3) {
166                                     //文字换行数量大于二进行省略号处理
167                                     ctx.fillText(
168                                         that.title.substring(_strLastIndex, i - 5) + "...",
169                                         30,
170                                         _strHeight
171                                     );
172                                     _strlineW = 0;
173                                     _strLastIndex = i;
174                                     _num++;
175                                     break;
176                                 } else {
177                                     ctx.fillText(
178                                         that.title.substring(_strLastIndex, i),
179                                         30,
180                                         _strHeight
181                                     );
182                                     _strlineW = 0;
183                                     _strHeight += 20;
184                                     _strLastIndex = i;
185                                     _num++;
186                                 }
187                             } else if (i == that.title.length - 1) {
188                                 ctx.fillText(
189                                     that.title.substring(_strLastIndex, i + 1),
190                                     30,
191                                     _strHeight
192                                 );
193                                 _strlineW = 0;
194                             }
195                         }
196                         // 10.4 生成二维码
197                         that.my_qrcode = new QRCode(that.$refs.qrCodeUrl, {
198                             text: that.shareURL + "/pages/index/ok-room-info?id=" + that.houseInfoMap.id + "&pId=" + JSON.parse(
199                                 localStorage
200                                 .getItem("userInfo")).id, // 需要转换为二维码的内容
201                             width: 60,
202                             height: 60,
203                             colorDark: '#000000',
204                             colorLight: '#ffffff',
205                             correctLevel: QRCode.CorrectLevel.H
206                         });
207                         let img = ''; // 二维码
208                         img = that.my_qrcode._oDrawing._elCanvas.toDataURL();
209                         ctx.drawImage(img, that.canvasW - 100, 500); // 二维码图载入画板  后面是定位参数
210                         // 10.5 绘制简述
211                         ctx.setFontSize(10);
212                         ctx.setFillStyle("#333");
213                         ctx.fillText('扫码了解详情', that.canvasW - 100, 580);
214                         ctx.draw(true, (ret) => {
215                             console.log(ret);
216                         });
217                         uni.showToast({
218                             icon: "success",
219                             mask: true,
220                             title: "绘制完成",
221                         });
222                         setTimeout(function() {
223                             that.saveImg()
224                         }, 1000)
225                     }, 1500);
226                 } else {
227                     console.log("err");
228                 }
229             })
230         },
231         onHide() {
232             let that = this;
233             window.removeEventListener("popstate", that.goIndex); //false阻止默认事件
234         },
235         methods: {
236             lookimg() {
237                 alert("点击了")
238                 uni.showLoading({
239                     title: "图片处理中..."
240                 })
241                 base64ToPath(this.imgPath[0].icon)
242                     .then(path => {
243                         console.log(path, "9999")
244                         uni.hideLoading();
245                         let imgsArray = [];
246                         imgsArray[0] = path;
247                         uni.previewImage({
248                             urls: imgsArray,
249                             longPressActions: {
250                                 itemList: ["发送给朋友", "保存图片", "收藏"],
251                                 success: function(data) {
252                                     console.log(data, "5555")
253                                 },
254                                 fail: function(err) {
255                                     console.log(err.errMsg);
256                                 },
257                             },
258                         })
259                     })
260                     .catch(error => {
261                         console.error(error)
262                     })
263             },
264             saveImg() {
265                 let that = this;
266                 uni.canvasToTempFilePath({
267                     canvasId: 'myCanvas',
268                     fileType: 'png',
269                     x: 0,
270                     y: 0,
271                     width: that.SystemInfo.windowWidth,
272                     height: that.SystemInfo.windowHeight,
273                     destWidth: that.SystemInfo.windowWidth * that.pixelRatio,
274                     desthHeight: that.SystemInfo.windowHeight * that.pixelRatio,
275                     quality: 1,
276                     success: function(res) {
277                         alert("到这了哦1111")
278                         console.log(res.tempFilePath, '123')
279                         that.$set(that.imgPath, 0, {
280                             icon: res.tempFilePath
281                         })
282                         that.isclass = "display:none";
283                         alert("到这了")
284                         // this.imgPath = res.tempFilePath
285                         console.log(that.imgPath, '2324')
286                         // 在这里保存图片
287                     },
288                     fail: function(error) {
289                         alert(JSON.stringify(error))
290                         console.log(error)
291                     },
292                 })
293             },
294             //请求详情数据
295             getHouseById(e) {
296                 let that = this;
297                 that.request.getHouseById(e).then((res) => {
298                     that.houseInfoMap = res.result;
299                     console.log(res)
300                 })
301             },
302             fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) {
303                 //圆的直径必然要小于矩形的宽高
304                 if (2 * radius > width || 2 * radius > height) {
305                     return false;
306                 }
307 
308                 cxt.save();
309                 cxt.translate(x, y);
310                 //绘制圆角矩形的各个边
311                 this.drawRoundRectPath(cxt, width, height, radius);
312                 cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值
313                 cxt.fill();
314                 cxt.restore();
315             },
316             drawRoundRectPath(cxt, width, height, radius) {
317                 cxt.beginPath(0);
318                 //从右下角顺时针绘制，弧度从0到1/2PI
319                 cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
320 
321                 //矩形下边线
322                 cxt.lineTo(radius, height);
323 
324                 //左下角圆弧，弧度从1/2PI到PI
325                 cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
326 
327                 //矩形左边线
328                 cxt.lineTo(0, radius);
329 
330                 //左上角圆弧，弧度从PI到3/2PI
331                 cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);
332 
333                 //上边线
334                 cxt.lineTo(width - radius, 0);
335 
336                 //右上角圆弧
337                 cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);
338 
339                 //右边线
340                 cxt.lineTo(width, height - radius);
341                 cxt.closePath();
342             },
343             //绘制圆形矩形
344             circleImg(ctx, img, x, y, w, h, r) {
345                 ctx.save();
346                 if (w < 2 * r) r = w / 2;
347                 if (h < 2 * r) r = h / 2;
348                 ctx.beginPath();
349                 ctx.moveTo(x + r, y);
350                 ctx.arcTo(x + w, y, x + w, y + h, r);
351                 ctx.arcTo(x + w, y + h, x, y + h, r);
352                 ctx.arcTo(x, y + h, x, y, r);
353                 ctx.arcTo(x, y, x + w, y, r);
354                 ctx.closePath();
355                 ctx.strokeStyle = '#FFFFFF'; // 设置绘制圆形边框的颜色
356                 ctx.stroke();
357                 ctx.clip();
358                 ctx.drawImage(img, x, y, w, h);
359                 ctx.restore();
360             },
361             // 获取图片信息
362             getImageInfo(image) {
363                 return new Promise((req, rej) => {
364                     uni.getImageInfo({
365                         src: image,
366                         success: function(res) {
367                             req(res);
368                         },
369                     });
370                 });
371             },
372         },
373     };
374 </script>
375 
376 <style>
377 </style>

View Code

备注：基本思路：利用canvas绘制页面内所需产品的详细信息，再利用uniapp框架uni.canvasToTempFilePath截取成图片（在这一步中我个人遇到的问题，后台返回的图片链接在这是跨域的话一定要喊后端配置跨域，不然前端设置是无效的，无论是代理还是创建图片对象添加到canvas设置 image.crossOrigin = 'Anonymous'，在这里我都试过；在途中我遇到截取图片丢失问题就是跨域导致的）,截取后就拿到base64，uniapp保存图片 uni.saveImageToPhotosAlbum(OBJECT)这玩意就是不支持H5，考虑另一种方法，生成图片后通过v-if控制显示canvas的绘制和生成后base64的显示，中间加个生成海报的过渡动画就ok，然后利用uni.previewImage(OBJECT)预览图片这个API，然后利用手机自带的长按保存来实现功能。缺陷：1.生成海报后用户还要点一次到达预览图片，用户体验不是很好；2.这样的生成的二维码和海报有点模糊；3.uni.canvasToTempFilePath这个api在版本Alpha3.14才真正修复截取canvas的宽高问题，其他版本都试过，截取海报的高度和宽度无论怎么设置都未成功；4.这样方式在移动端兼容问题上有很大缺陷，每个机型显示的都不如意；5.暂未想到其他缺陷，有问题，待补充

方法二：（基于uniapp、vue）

准备插件：html2canvas.min.js vue-qr

  1 <template>
  2     <view>
  3         <div id="html2canvas" ref="html2canvas" style="background-color:#000CFF;height:100vh;" v-if="isImg == ''" v-cloak>
  4             <view style="display: flex;flex-direction: column;align-items: center;padding-top: 20rpx;">
  5                 <image :src="titleImg" mode="" style="width: 128rpx;height: 64rpx;"></image>
  6                 <view style="font-size: 20rpx;color: #fff;margin-top: 20rpx;">
  7                     房产合伙人创业服务平台
  8                 </view>
  9             </view>
 10             <view style="width: 86%;height: 964rpx;background: #fff;margin:20rpx auto;border-radius: 10rpx;padding: 30rpx;position: relative;">
 11                 <view class="" style="display: flex;justify-content: space-between;align-items: center;">
 12                     <view style="font-size: 46rpx;font-weight: bold;">
 13                         {{houseInfoMap.houseName}}
 14                     </view>
 15                     <view style="display: flex;">
 16                         <image :src="assetsImg" mode="" style="width: 24rpx;height: 24rpx;"></image>
 17                         <view style="font-size: 20rpx;margin-left: 10rpx;">
 18                             {{houseInfor.belongArea}}
 19                         </view>
 20                     </view>
 21                 </view>
 22                 <view style="margin-top: 20rpx;">
 23                     <view style="display: flex;align-items: center;">
 24                         <view style="display: flex;align-items: center; margin-right: 20rpx;" v-for="(item,index) in houseLabelArry" :key="index">
 25                             <image :src="gouImg" mode="" style="width: 24rpx;height: 24rpx;"></image>
 26                             <view style="font-size: 24rpx;">
 27                                 {{item}}
 28                             </view>
 29                         </view>
 30                     </view>
 31                     <image :src="cover" mode="" style="width: 644rpx;height: 446rpx;margin: 20rpx auto;border-radius: 10rpx;"
 32                      crossOrigin="anonymous"></image>
 33                     <view style="display: flex;">
 34                         <view style="display: flex;flex-direction: column;margin-right: 104rpx;">
 35                             <view style="font-size: 24rpx;">
 36                                 销售均价
 37                             </view>
 38                             <view style="font-size: 24rpx;margin-top: 10rpx;">
 39                                 {{houseInfor.salePrice}}元
 40                             </view>
 41                         </view>
 42                         <view style="display: flex;flex-direction: column;margin-right: 104rpx;">
 43                             <view style="font-size: 24rpx;">
 44                                 建筑面积
 45                             </view>
 46                             <view style="font-size: 24rpx; margin-top: 10rpx;">
 47                                 {{houseInfor.typeArea}}㎡
 48                             </view>
 49                         </view>
 50                         <view style="display: flex;flex-direction: column;margin-right: 104rpx;">
 51                             <view style="font-size: 24rpx;">
 52                                 户型
 53                             </view>
 54                             <view style="font-size: 24rpx;margin-top: 10rpx;">
 55                                 {{houseInfor.typeName}}
 56                             </view>
 57                         </view>
 58                     </view>
 59                     <view style="width: 100%;background-color: #E7E7E7;height: 236rpx;position: absolute;display: flex;justify-content: space-between;bottom: 0;left: 0;border-radius: 10rpx;">
 60                         <view style="display: flex;flex-direction: column;margin-left: 40rpx;">
 61                             <view style="font-size: 24rpx;margin-top: 40rpx;">
 62                                 项目优势
 63                             </view>
 64                             <view style="font-size: 20rpx;margin-top: 20rpx;height: 100rpx;width: 90%;">
 65                                 ①品质好，品牌开发商开发，居住舒适度高；②绿化高，临近主要干道，生活配套完善；③户型多，选择性高，适合多类人群。
 66                             </view>
 67                         </view>
 68                         <view style="">
 69                             <view style="display: flex;flex-direction: column;align-items: center;margin-top: 20rpx;margin-right: 40rpx;width:180rpx;height: 180rpx;">
 70                                 <vue-qr :logoSrc="icon_my" :text="my_qrcodeText" :size="220"></vue-qr>
 71                                 <!--                                 <image :src="qrcode" mode="" style="width: 180rpx;height: 180rpx;"></image>
 72  -->
 73                                 <view style="font-size: 20rpx;margin-top: 4rpx;">
 74                                     扫码查看详情
 75                                 </view>
 76                             </view>
 77                         </view>
 78                     </view>
 79                 </view>
 80                 <div class="qrcode" ref="qrCodeUrl" style="display: none;"></div>
 81         </div>
 82         <image :src="isImg" v-else mode="" style="height: 100vh;" crossOrigin="anonymous"></image>
 83     </view>
 84 </template>
 85 <script>
 86     import titleImg from "../../static/images/icon.ok.jpg"
 87     import assetsImg from "../../static/images/icon-assets.png"
 88     import gouImg from "../../static/images/icon-gou.png"
 89     import html2canvas from "../../static/js/html2canvas.min.js"
 90     import vueQr from "vue-qr";
 91     // import QRCode from 'qrcodejs2'
 92     export default {
 93         components: {
 94             vueQr
 95         },
 96         data() {
 97             return {
 98                 titleImg: titleImg,
 99                 assetsImg: assetsImg,
100                 gouImg: gouImg,
101                 houseInfoMap: {},
102                 isImg: '',
103                 qrcode: '',
104                 houseInfor: {
105                     salePrice: '',
106                     typeArea: '',
107                     typeName: '',
108                     belongArea: ''
109                 },
110                 houseLabelArry: [],
111                 cover: '',
112                 id: '',
113                 my_qrcodeText: '',
114                 icon_my: ''
115             }
116         },
117         onLoad(e) {
118             if (this.isIOS()) {
119                 if (window.history && window.history.pushState) {
120                     history.pushState(null, null, document.URL);
121                     window.addEventListener("popstate", this.goIndex, false); //false阻止默认事件
122                 }
123             }
124             this.getHouseById(e.id);
125             this.id = e.id
126         },
127         onHide() {
128             let that = this;
129             window.removeEventListener("popstate", that.goIndex); //false阻止默认事件
130         },
131         methods: {
132             isIOS() {
133                 let isIphone = navigator.userAgent.includes('iPhone')
134                 let isIpad = navigator.userAgent.includes('iPad')
135                 return isIphone || isIpad
136             },
137             goIndex() {
138                 let that = this;
139                 if (this.isIOS()) {
140                     // console.log(window.location.origin)
141                     window.location.href = window.location.origin + `/pages/index/ok-room-info?id=${that.id}`;
142                 } else {
143                     uni.redirectTo({
144                         url: `/pages/index/ok-room-info?id=${thatid}`
145                     });
146                 }
147             },
148             //绘制二维码
149             drawCode() {
150                 let that = this;
151                 that.my_qrcodeText = that.shareURL + "/pages/index/ok-room-info?id=" + that.houseInfoMap.id + "&pId=" + JSON.parse(
152                         localStorage.getItem("userInfo")).id, // 需要转换为二维码的内容
153                     that.icon_my = JSON.parse(localStorage.getItem("userInfo")).headImg;
154             // that.my_qrcode = new QRCode(that.$refs.qrCodeUrl, {
155             //     text: that.shareURL + "/pages/index/ok-room-info?id=" + that.houseInfoMap.id + "&pId=" + JSON.parse(
156             //         localStorage
157             //         .getItem("userInfo")).id, // 需要转换为二维码的内容
158             //     width: 180,
159             //     height: 180,
160             //     colorDark: '#000000',
161             //     colorLight: '#ffffff',
162             //     correctLevel: QRCode.CorrectLevel.H
163             // });
164             // console.log(that.my_qrcode, "1232")
165             // that.qrcode = that.my_qrcode._oDrawing._elCanvas.toDataURL();
166             // console.log(that.qrcode, '3434')
167             // uni.hideLoading();
168             setTimeout(function() {
169                 that.saveImage();
170             }, 800)
171         },
172         //请求详情数据
173         getHouseById(e) {
174             let that = this;
175             uni.showLoading({
176                 title: '海报生成中',
177                 mask: true
178             });
179             that.request.getHouseById(e).then((res) => {
180                 that.houseInfoMap = res.result.houseInfoMap;
181                 that.cover = res.result.houseInfoMap.cover;
182                 that.houseLabelArry = JSON.parse(res.result.houseInfoMap.houseLabel);
183                 that.houseInfor.belongArea = res.result.houseInfoMap.getSaleInfo.belongArea;
184                 that.houseInfor.salePrice = res.result.houseInfoMap.getSaleInfo.salePrice;
185                 that.houseInfor.typeArea = res.result.houseInfoMap.getHouseTypeInfo[0].typeArea;
186                 that.houseInfor.typeName = res.result.houseInfoMap.getHouseTypeInfo[0].typeName;
187                 console.log(res)
188                 setTimeout(function() {
189                     that.drawCode();
190                 }, 500)
191             })
192         },
193         //点击方法
194         saveImage() {
195             let that = this;
196             html2canvas(that.$refs.html2canvas, {
197                 allowTaint: true, //允许跨域图片
198                 useCORS: true, //是否尝试使用CORS从服务器加载图像
199                 dpi: 300, // 处理模糊问题
200             }).then((canvas) => {
201                 let base64ImgSrc = canvas.toDataURL("image/png")
202                 /* 如果只是显示,可用以下代码 */
203                 that.isImg = base64ImgSrc;
204                 uni.hideLoading();
205             })
206         },
207         // 获取设备信息
208         getSystemInfo() {
209             return new Promise((req, rej) => {
210                 uni.getSystemInfo({
211                     success: function(res) {
212                         console.log(res)
213                         req(res);
214                     },
215                 });
216             });
217         },
218     },
219     }
220 </script>
221 <style>
222     [v-cloak] {
223         display: none;
224     }
225 </style>

View Code

备注：基本思路：先用Html画海报的所需信息，用html2canvas直接截屏获取canvas图片，加一个生成动画，过渡OK，兼容性OK，生成也OK，问题：在IOS上面截取图片时如果有外链图片，html2canvas.min.js要选择4版本的，不然截取的图片外链图片会消失，官网现在是7版本，清晰度问题就按API的设置来弄，一般情况下都OK的，暂未发现其他问题

posted @ 2021-03-05 10:56 暮雪上的晨星阅读(323) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

暮雪上的晨星

吾之初心，永世不忘

微信H5中遇到的问题Vue（一）

公告