1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
| <template>
| <view class="share">
| <canvas
| canvas-id="shareCanvas"
| class="canvas"
| bindlongpress="saveImg"
| catchtouchmove="true"
| style="position:fixed;left:500%"
| :style="{height: canvasHeight+'px',width:canvasWidth+'px'}"
| >
| </canvas>
| </view>
| </template>
| <!-- 有项目需要开发的请联系 扣 - 371524845 -->
| <script>
| export default {
| props: {
| canvasHeight: {
| type: Number,
| default: 400,
| },
| canvasWidth: {
| type: Number,
| default: 400,
| },
| width: {
| type: Number,
| default: 80,
| },
| height: {
| type: Number,
| default: 50,
| },
| left: {
| type: Number,
| default: 300,
| },
| top: {
| type: Number,
| default: 320,
| },
| bgImage: {
| type: String,
| default: '',
| },
| },
| data(){
| return {
| ctx:null
| }
| },
| created() {
| //初始化画布
| this.ctx = wx.createCanvasContext('shareCanvas',this)
| },
| methods:{
| //获取图片的基本信息，即将网络图片转成本地图片，
| getImageInfo(src) {
| return new Promise((resolve, reject) => {
| wx.getImageInfo({
| src,
| success: (res) => resolve(res),
| fail: (res) => reject(res)
| })
| });
| },
| exportPost(image2){
| let that = this
| return new Promise(function (resolve, reject) {
| let image = that.bgImage
| //获取系统的基本信息，为后期的画布和底图适配宽高
| uni.getSystemInfo({
| success: function (res) {
| Promise.all([that.getImageInfo(image),that.getImageInfo(image2)]).then(res=>{
| //获取底图和二维码图片的基本信息,通常前端导出的二维码是base64格式的，所以要转成图片格式的才可以获取图片的基本信息
| that.ctx.drawImage(res[0].path,0 , 0,that.canvasWidth,that.canvasHeight);
| that.ctx.drawImage(res[1].path,that.left,that.top,that.width, that.height);
| that.ctx.draw(false,function(){
| wx.canvasToTempFilePath({
| x: 0,
| y: 0,
| width:that.canvasWidth,
| height:that.canvasHeight,
| destWidth:that.canvasWidth*2,//这里乘以2是为了保证合成图片的清晰度
| destHeight:that.canvasHeight*2,
| canvasId: 'shareCanvas',
| fileType:'jpg',//设置导出图片的后缀名
| success: function (res) {
| resolve(res.tempFilePath)
| },
| fail: function (res) {
| reject(res)
| },
| })
| });
| })
| }
| })
| })
| },
| },
| }
| </script>
|
|
