|
|
@@ -14,7 +14,7 @@
|
|
14
|
14
|
<view class="statement-header-text-title" @click="topgi"> 返回</view>
|
|
15
|
15
|
</view>
|
|
16
|
16
|
</view>
|
|
17
|
|
- <view class="activite-nav">
|
|
|
17
|
+ <view class="activite-nav" id="huoquId">
|
|
18
|
18
|
<view class="activite-card">
|
|
19
|
19
|
<image
|
|
20
|
20
|
class="activite-card-logo"
|
|
|
@@ -22,7 +22,7 @@
|
|
22
|
22
|
mode=""
|
|
23
|
23
|
></image>
|
|
24
|
24
|
|
|
25
|
|
- <view class="activite-cardImg">
|
|
|
25
|
+ <!-- <view class="activite-cardImg">
|
|
26
|
26
|
<image :src="qrcode_src" mode="widthFix" ref="imagRef"></image>
|
|
27
|
27
|
</view>
|
|
28
|
28
|
<view class="activite-cardText">{{ code_id }}</view>
|
|
|
@@ -43,7 +43,7 @@
|
|
43
|
43
|
mode=""
|
|
44
|
44
|
></image>
|
|
45
|
45
|
</view>
|
|
46
|
|
- </view>
|
|
|
46
|
+ </view> -->
|
|
47
|
47
|
</view>
|
|
48
|
48
|
<!-- <image class="activite-card-logo" :src="imageUrl" mode=""></image> -->
|
|
49
|
49
|
<!-- <view class="downLoadButton" @click="clickGeneratePicture">
|
|
|
@@ -63,7 +63,6 @@
|
|
63
|
63
|
<view class="downLoad-text"> 保存图片 </view>
|
|
64
|
64
|
</view>
|
|
65
|
65
|
</view>
|
|
66
|
|
-
|
|
67
|
66
|
<!-- ************************* 海报画板 **********************-->
|
|
68
|
67
|
<view style="position: absolute; bottom: 10%; left: 0%" v-show="flag">
|
|
69
|
68
|
<l-painter
|
|
|
@@ -113,9 +112,9 @@ export default {
|
|
113
|
112
|
poster: null,
|
|
114
|
113
|
image: "",
|
|
115
|
114
|
flag: false,
|
|
116
|
|
- canvasWidth: 300, // 单位:rpx
|
|
117
|
|
- canvasHeight: 300,
|
|
118
|
115
|
imageUrl: "",
|
|
|
116
|
+ canvasWidth: 300,
|
|
|
117
|
+ canvasHeight: 400,
|
|
119
|
118
|
};
|
|
120
|
119
|
},
|
|
121
|
120
|
onLoad(e) {
|
|
|
@@ -129,7 +128,11 @@ export default {
|
|
129
|
128
|
this.qrcode_src = e.qrcode_src;
|
|
130
|
129
|
this.code_id = e.code_id;
|
|
131
|
130
|
},
|
|
|
131
|
+ mounted() {
|
|
|
132
|
+
|
|
|
133
|
+ },
|
|
132
|
134
|
methods: {
|
|
|
135
|
+
|
|
133
|
136
|
queryByKey() {
|
|
134
|
137
|
const _this = this;
|
|
135
|
138
|
queryByKey({
|
|
|
@@ -151,54 +154,7 @@ export default {
|
|
151
|
154
|
}
|
|
152
|
155
|
);
|
|
153
|
156
|
},
|
|
154
|
|
- async drawImageToCanvas() {
|
|
155
|
|
- // const ctx = uni.createCanvasContext("myCanvas", this);
|
|
156
|
|
- // 清空画布
|
|
157
|
|
- // ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
|
|
158
|
|
- // const img = new Image();
|
|
159
|
|
- // img.crossOrigin = 'anonymous'; // 设置跨域属性
|
|
160
|
|
- // img.src = 'https://example.com/your-image.jpg'; // 替换为实际的图片地址
|
|
161
|
|
- const _this = this;
|
|
162
|
|
- try {
|
|
163
|
|
- const resData = await uni.getImageInfo({
|
|
164
|
|
- src: decodeURIComponent(this.qrcode_src),
|
|
165
|
|
- });
|
|
166
|
|
- const res = resData[1] || {};
|
|
167
|
|
- // 居中绘制图片(带缩放)
|
|
168
|
|
- const imgWidth = res.width;
|
|
169
|
|
- const imgHeight = res.height;
|
|
170
|
|
- const scale = Math.min(
|
|
171
|
|
- this.canvasWidth / imgWidth,
|
|
172
|
|
- this.canvasHeight / imgHeight
|
|
173
|
|
- );
|
|
174
|
|
- const drawWidth = imgWidth * scale;
|
|
175
|
|
- const drawHeight = imgHeight * scale;
|
|
176
|
|
- const offsetX = (this.canvasWidth - drawWidth) / 2;
|
|
177
|
|
- const offsetY = (this.canvasHeight - drawHeight) / 2;
|
|
178
|
|
- console.log(res, "resData");
|
|
179
|
|
- uni.canvasToTempFilePath({
|
|
180
|
|
- x: offsetX,
|
|
181
|
|
- y: offsetY,
|
|
182
|
|
- width: imgWidth,
|
|
183
|
|
- height: imgHeight,
|
|
184
|
|
- destWidth: drawWidth,
|
|
185
|
|
- destHeight: drawHeight,
|
|
186
|
|
- canvasId: "container",
|
|
187
|
|
- success: function (res) {
|
|
188
|
|
- // 在H5平台下,tempFilePath 为 base64
|
|
189
|
|
- // const imageUrl = `data:image/png;base64,${res.tempFilePath}`;
|
|
190
|
|
- const imageUrl = `${res.tempFilePath}`;
|
|
191
|
|
- const contentPath = _this.$refs.imagRef.contentPath;
|
|
192
|
|
- _this.fileDwonload(imageUrl, contentPath);
|
|
193
|
|
- },
|
|
194
|
|
- });
|
|
195
|
157
|
|
|
196
|
|
- // ctx.drawImage(res.path, offsetX, offsetY, drawWidth, drawHeight);
|
|
197
|
|
- // ctx.draw();
|
|
198
|
|
- } catch (err) {
|
|
199
|
|
- console.error("图片加载失败:", err);
|
|
200
|
|
- }
|
|
201
|
|
- },
|
|
202
|
158
|
|
|
203
|
159
|
// 绘制图片
|
|
204
|
160
|
drawPoster() {
|
|
|
@@ -380,26 +336,34 @@ export default {
|
|
380
|
336
|
});
|
|
381
|
337
|
},
|
|
382
|
338
|
clickGeneratePicture2() {
|
|
383
|
|
- //this.drawImageToCanvas();
|
|
|
339
|
+ let _this = this;
|
|
384
|
340
|
let fileName = "pension_分享海报.jpg";
|
|
385
|
|
- if (this.qrcode_src == "") {
|
|
386
|
|
- uni.showToast({
|
|
387
|
|
- title: "无生成二维码",
|
|
388
|
|
- icon: "none",
|
|
389
|
|
- duration: 2000,
|
|
390
|
|
- });
|
|
391
|
|
- return;
|
|
392
|
|
- }
|
|
393
|
|
- let fileUrl = decodeURIComponent(this.qrcode_src);
|
|
394
|
|
- if (window.android) {
|
|
395
|
|
- window.android.downloadFile(fileName, fileUrl);
|
|
396
|
|
- } else {
|
|
397
|
|
- uni.showToast({
|
|
398
|
|
- title: "未检测到Android环境",
|
|
399
|
|
- icon: "none",
|
|
400
|
|
- duration: 2000,
|
|
401
|
|
- });
|
|
402
|
|
- }
|
|
|
341
|
+ this.drawCanvas();
|
|
|
342
|
+ // const cardElement = document.getElementById('huoquId');
|
|
|
343
|
+ // console.log(cardElement,"cardElement")
|
|
|
344
|
+ // html2canvas(cardElement).then((canvas) => {
|
|
|
345
|
+ // const imageUrl = canvas.toDataURL('image/png');
|
|
|
346
|
+ // _this.saveImageData(imageUrl);
|
|
|
347
|
+ // });
|
|
|
348
|
+ //
|
|
|
349
|
+ // if (this.qrcode_src == "") {
|
|
|
350
|
+ // uni.showToast({
|
|
|
351
|
+ // title: "无生成二维码",
|
|
|
352
|
+ // icon: "none",
|
|
|
353
|
+ // duration: 2000,
|
|
|
354
|
+ // });
|
|
|
355
|
+ // return;
|
|
|
356
|
+ // }
|
|
|
357
|
+ // let fileUrl = decodeURIComponent(this.qrcode_src);
|
|
|
358
|
+ // if (window.android) {
|
|
|
359
|
+ // window.android.downloadFile(fileName, fileUrl);
|
|
|
360
|
+ // } else {
|
|
|
361
|
+ // uni.showToast({
|
|
|
362
|
+ // title: "未检测到Android环境",
|
|
|
363
|
+ // icon: "none",
|
|
|
364
|
+ // duration: 2000,
|
|
|
365
|
+ // });
|
|
|
366
|
+ // }
|
|
403
|
367
|
},
|
|
404
|
368
|
// 保存图片
|
|
405
|
369
|
saveImage() {
|
|
|
@@ -442,54 +406,7 @@ export default {
|
|
442
|
406
|
}
|
|
443
|
407
|
},
|
|
444
|
408
|
|
|
445
|
|
- fileDwonload(base64Data, path) {
|
|
446
|
|
- uni.showLoading({ title: "保存中...", mask: true });
|
|
447
|
|
- const _this = this;
|
|
448
|
|
- // const blob = this.base64ToBlob(base64Data);
|
|
449
|
|
- // const blobUrl = URL.createObjectURL(blob);
|
|
450
|
|
- const finName = "海报.jpg";
|
|
451
|
|
- uni.downloadFile({
|
|
452
|
|
- url: path, //请求地址
|
|
453
|
|
- success: (res) => {
|
|
454
|
|
- //下载成功
|
|
455
|
|
- console.log(res, "下载成功");
|
|
456
|
|
- if (res.statusCode === 200) {
|
|
457
|
|
- //保存文件
|
|
458
|
|
- let filePath = res.tempFilePath;
|
|
459
|
|
- // #ifdef H5
|
|
460
|
|
- saveAs(filePath, finName);
|
|
461
|
|
- uni.showModal({
|
|
462
|
|
- title: "保存成功",
|
|
463
|
|
- content: "图片已成功保存到相册,快去分享到您的圈子吧",
|
|
464
|
|
- showCancel: false,
|
|
465
|
|
- });
|
|
466
|
|
- // #endif
|
|
467
|
|
- // #ifdef MP-WEIXIN || APP-PLUS
|
|
468
|
|
- uni.saveFile({
|
|
469
|
|
- tempFilePath: filePath,
|
|
470
|
|
- success: function (filRes) {
|
|
471
|
|
- console.log(filRes, "=====>");
|
|
472
|
|
- },
|
|
473
|
|
- fail: function (err) {
|
|
474
|
|
- console.log("保存失败");
|
|
475
|
|
- },
|
|
476
|
|
- });
|
|
477
|
|
- // #endif
|
|
478
|
|
- uni.hideLoading();
|
|
479
|
|
- }
|
|
480
|
|
- },
|
|
481
|
|
- fail: (e) => {
|
|
482
|
|
- console.log(e, "文件下载失败downloadFile");
|
|
483
|
|
- uni.hideLoading();
|
|
484
|
|
- _this.loadFiles(path, finName);
|
|
485
|
409
|
|
|
486
|
|
- // uni.showToast({
|
|
487
|
|
- // title: "文件下载保存失败",
|
|
488
|
|
- // icon: "error",
|
|
489
|
|
- // });
|
|
490
|
|
- },
|
|
491
|
|
- });
|
|
492
|
|
- },
|
|
493
|
410
|
loadFiles(url, fileName) {
|
|
494
|
411
|
const a = document.createElement("a");
|
|
495
|
412
|
a.href = url;
|
|
|
@@ -531,20 +448,6 @@ export default {
|
|
531
|
448
|
},
|
|
532
|
449
|
});
|
|
533
|
450
|
},
|
|
534
|
|
- base64ToBlob(base64) {
|
|
535
|
|
- const parts = base64.split(";base64,");
|
|
536
|
|
- const mimeType = parts[0].split(":")[1];
|
|
537
|
|
- const base64Data = parts[1];
|
|
538
|
|
- var binaryData = atob(base64.split(";base64,")[1]);
|
|
539
|
|
- // const binaryData = atob(base64Data);
|
|
540
|
|
- const arrayBuffer = new ArrayBuffer(binaryData.length);
|
|
541
|
|
- const uint8Array = new Uint8Array(arrayBuffer);
|
|
542
|
|
- for (let i = 0; i < binaryData.length; i++) {
|
|
543
|
|
- uint8Array[i] = binaryData.charCodeAt(i);
|
|
544
|
|
- }
|
|
545
|
|
-
|
|
546
|
|
- return new Blob([uint8Array], { type: mimeType });
|
|
547
|
|
- },
|
|
548
|
451
|
// 保存到相册
|
|
549
|
452
|
saveImageToAlbum() {
|
|
550
|
453
|
uni.saveImageToPhotosAlbum({
|
|
|
@@ -575,7 +478,7 @@ page {
|
|
575
|
478
|
flex-direction: column;
|
|
576
|
479
|
align-items: center;
|
|
577
|
480
|
justify-content: center;
|
|
578
|
|
-
|
|
|
481
|
+
|
|
579
|
482
|
.statement-header {
|
|
580
|
483
|
position: fixed;
|
|
581
|
484
|
top: 0;
|
|
|
@@ -586,7 +489,7 @@ page {
|
|
586
|
489
|
background: url("https://cdn.bjtdba.com/vod/image/2022-08-23/20220823132549341.png");
|
|
587
|
490
|
display: flex;
|
|
588
|
491
|
justify-content: center;
|
|
589
|
|
-
|
|
|
492
|
+
|
|
590
|
493
|
.statement-header-text {
|
|
591
|
494
|
width: 686rpx;
|
|
592
|
495
|
font-size: 36rpx;
|
|
|
@@ -595,17 +498,17 @@ page {
|
|
595
|
498
|
display: flex;
|
|
596
|
499
|
// margin-top: 107rpx;
|
|
597
|
500
|
align-items: center;
|
|
598
|
|
-
|
|
|
501
|
+
|
|
599
|
502
|
.statement-header-text-neishi {
|
|
600
|
503
|
width: 45rpx;
|
|
601
|
504
|
height: 45rpx;
|
|
602
|
505
|
margin-right: 17rpx;
|
|
603
|
|
-
|
|
|
506
|
+
|
|
604
|
507
|
.statement-header-text-icon {
|
|
605
|
508
|
width: 36rpx;
|
|
606
|
509
|
height: 36rpx;
|
|
607
|
510
|
margin-top: 2rpx;
|
|
608
|
|
-
|
|
|
511
|
+
|
|
609
|
512
|
image {
|
|
610
|
513
|
width: 100%;
|
|
611
|
514
|
height: 100%;
|
|
|
@@ -614,7 +517,6 @@ page {
|
|
614
|
517
|
}
|
|
615
|
518
|
}
|
|
616
|
519
|
}
|
|
617
|
|
-
|
|
618
|
520
|
|
|
619
|
521
|
.activite-nav {
|
|
620
|
522
|
width: 100%;
|