|
@@ -14,7 +14,10 @@ Component({
|
|
|
data: {
|
|
|
flag: true,
|
|
|
postId: '',
|
|
|
- imgUrl: []
|
|
|
+ imgUrl: [],
|
|
|
+ featureMap: {},
|
|
|
+ title: '',
|
|
|
+ ratio: ''
|
|
|
},
|
|
|
|
|
|
/**
|
|
@@ -28,16 +31,26 @@ Component({
|
|
|
})
|
|
|
},
|
|
|
//展示分享框
|
|
|
- showPopup (postId, imgUrl) {
|
|
|
+ showPopup (postId, imgUrl, featureMap, title, ratio) {
|
|
|
this.setData({
|
|
|
flag: !this.data.flag,
|
|
|
postId,
|
|
|
- imgUrl
|
|
|
+ imgUrl,
|
|
|
+ featureMap,
|
|
|
+ title,
|
|
|
+ ratio
|
|
|
})
|
|
|
},
|
|
|
//保存图片
|
|
|
saveImage (e) {
|
|
|
const imgUrl = this.data.imgUrl;
|
|
|
+ const ratio = this.data.ratio;
|
|
|
+ const featureMap = this.data.featureMap;
|
|
|
+ const title = this.data.title;
|
|
|
+ //获取屏幕宽度
|
|
|
+ const windowWidth = wx.getSystemInfoSync().windowWidth;
|
|
|
+ //获取图片高度
|
|
|
+ const imgHeight = windowWidth*ratio;
|
|
|
//先绘制图片
|
|
|
for (let item of imgUrl) {
|
|
|
// wx.downloadFile({
|
|
@@ -50,52 +63,76 @@ Component({
|
|
|
const ctx = wx.createCanvasContext('myCanvas');
|
|
|
var imgPath = item;
|
|
|
ctx.setFillStyle('white')
|
|
|
- //获取屏幕宽度
|
|
|
- const windowWidth = wx.getSystemInfoSync().windowWidth;
|
|
|
- ctx.fillRect(0, 0, windowWidth, 1.6 * windowWidth)
|
|
|
-
|
|
|
- ctx.drawImage(imgPath, 30, 10, 300, 100);
|
|
|
-
|
|
|
+ ctx.fillRect(0, 0, windowWidth, imgHeight + 300)
|
|
|
+ //绘制用户上传的图片
|
|
|
+ ctx.drawImage(imgPath, 0, 0, windowWidth, imgHeight);
|
|
|
+ //绘制用户发表的内容和名字
|
|
|
+ ctx.setFontSize(16)
|
|
|
+ ctx.setFillStyle('black')
|
|
|
+ ctx.fillText(title, 135, imgHeight + 55)
|
|
|
ctx.setFontSize(18)
|
|
|
+ ctx.fillText(featureMap.wechatName, 135, imgHeight + 35);
|
|
|
+ //横线
|
|
|
+ ctx.moveTo(20, imgHeight + 140)
|
|
|
+ ctx.lineTo(windowWidth - 40, imgHeight + 140)
|
|
|
+ ctx.stroke()
|
|
|
+ //绘制用户头像圆形切割-开始
|
|
|
+ ctx.save();
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(70, imgHeight + 70, 50, 0, Math.PI * 2, false);
|
|
|
+ ctx.fill();
|
|
|
+ ctx.clip();
|
|
|
+ //圆形切割-结束
|
|
|
+ ctx.drawImage(featureMap.headImgUrl, 20, imgHeight + 20, 100, 100);
|
|
|
+ ctx.restore();
|
|
|
+ //二维码和文字
|
|
|
+ ctx.setFontSize(16)
|
|
|
ctx.setFillStyle('black')
|
|
|
- ctx.fillText('我画的图片', 50, 140)
|
|
|
- ctx.draw();
|
|
|
+ ctx.fillText('长按二维码', 50, imgHeight + 180)
|
|
|
+ ctx.fillText('进入小程序查看更多', 50, imgHeight + 210)
|
|
|
+ ctx.draw()
|
|
|
}
|
|
|
- //canvas生成图片
|
|
|
- wx.canvasToTempFilePath({
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- width: wx.getSystemInfoSync().windowWidth,
|
|
|
- height: 0.6 * wx.getSystemInfoSync().windowWidth,
|
|
|
- destWidth: wx.getSystemInfoSync().windowWidth,
|
|
|
- destHeight:0.6 * wx.getSystemInfoSync().windowWidth,
|
|
|
- canvasId: 'myCanvas',
|
|
|
- success: (res) => {
|
|
|
- console.log('canvas'+res.tempFilePath);
|
|
|
- //保存图片到本地
|
|
|
- wx.saveImageToPhotosAlbum({
|
|
|
- filePath: res.tempFilePath,
|
|
|
- success(res) {
|
|
|
- wx.showModal({
|
|
|
- title: '存图成功',
|
|
|
- content: '图片成功保存到相册了,去发朋友圈',
|
|
|
- showCancel:false,
|
|
|
- confirmText:'好哒',
|
|
|
- confirmColor:'#72B9C3',
|
|
|
- success: function(res) {
|
|
|
- if (res.confirm) {
|
|
|
- console.log('用户点击确定');
|
|
|
- }
|
|
|
- //that.hideShareImg()
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- fail:function (res) {
|
|
|
- console.log(res)
|
|
|
- }
|
|
|
- })
|
|
|
+ setTimeout(() => {
|
|
|
+ this.canvasToImage()
|
|
|
+ }, 200)
|
|
|
+ },
|
|
|
+ canvasToImage () {
|
|
|
+ let that = this;
|
|
|
+ //canvas生成图片
|
|
|
+ wx.canvasToTempFilePath({
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ width: that.windowWidth,
|
|
|
+ height: that.imgHeight + 300,
|
|
|
+ destWidth: that.windowWidth,
|
|
|
+ destHeight: that.imgHeight + 300,
|
|
|
+ canvasId: 'myCanvas',
|
|
|
+ success: (res) => {
|
|
|
+ console.log(res.tempFilePath);
|
|
|
+ //保存图片到本地
|
|
|
+ wx.saveImageToPhotosAlbum({
|
|
|
+ filePath: res.tempFilePath,
|
|
|
+ success(res) {
|
|
|
+ wx.showModal({
|
|
|
+ title: '存图成功',
|
|
|
+ content: '图片成功保存到相册了,去发朋友圈',
|
|
|
+ showCancel:false,
|
|
|
+ confirmText:'我知道了',
|
|
|
+ confirmColor:'#72B9C3',
|
|
|
+ success: function(res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ console.log('用户点击确定');
|
|
|
+ }
|
|
|
+ //that.hideShareImg()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fail:function (res) {
|
|
|
+ console.log(res)
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
|