123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202 |
- // pages/extension/poster/index.js
- const app = getApp()
- Page({
- data: {
- swiperImgUrls: [
- 'https://www.wenxingshuju.com/poster_h5/poster_invite_1.png','https://www.wenxingshuju.com/poster_h5/poster_invite_2.png','https://www.wenxingshuju.com/poster_h5/poster_invite_3.png',
- ],
- swiperIndex: 0,
- tempFilePath:'',
- writePhotosFlag:-1,
- invite_code:'',
- id:'',
- evm_url:''
- },
- onLoad: function (options) {
- this.setData({invite_code:wx.getStorageSync('userInfo').invite_code,id:options.id})
- this.getSet()
- this.init()
- },
- init(){
- wx.showLoading({ title: '加载中', })
- app.func.req('/api/sphUserShare/getCommentQrCode', 'get', {
- path:'pages/index/index',
- param:{invite:this.data.invite_code,qun_id:this.data.id}
- }, (res) => {
- wx.hideLoading()
- if(res && res.errno == 0){
- this.setData({evm_url:app.data.rootDocment+'/'+res.rst})
- }else{
- wx.showToast({
- title: res.err,
- icon: 'none',
- duration: 2000
- })
- }
- },()=>{
- wx.hideLoading()
- })
- },
- swiperChange(e) {
- const that = this;
- that.setData({
- swiperIndex: e.detail.current,
- })
- },
- formSubmit: function (e) {//点击生成海报
- var that = this;
- wx.showToast({
- title: '请稍后...',
- icon: 'loading',
- duration: 1000
- });
- setTimeout(function () {
- wx.hideToast()
- that.createNewImg();
- // that.setData({
- // maskHidden: true
- // });
- }, 1000)
- },
- createNewImg: function () {////将canvas转换为图片保存到本地,然后将图片路径传给image图片的src
- var that = this;
- var path1 = ''
- var path2 = ''
- var promise1 = new Promise((resolve, reject) => {
- wx.getImageInfo({
- src: that.data.swiperImgUrls[that.data.swiperIndex],
- success: function (res) {
- path1 = res.path
- resolve()
- }
- })
- });
- var promise2 = new Promise((resolve, reject) => {
- wx.getImageInfo({
- src: that.data.evm_url,
- success: function (res) {
- path2 = res.path;
- resolve()
- }
- })
- });
- Promise.all([promise1,promise2]).then((values)=> {
- var context = wx.createCanvasContext('mycanvas');
- context.drawImage(path1, 0, 0, 350, 494);
- // 绘制图片圆角
- var bg_x = 145,bg_y=390,bg_w=60,bg_h=60,bg_r=10
- context.save()
- context.beginPath()
- context.arc(bg_x + bg_r, bg_y + bg_r, bg_r, Math.PI, Math.PI*1.5)
- context.arc(bg_x + bg_w - bg_r, bg_y + bg_r, bg_r, Math.PI * 1.5, Math.PI * 2)
- context.arc(bg_x + bg_w - bg_r, bg_y + bg_h - bg_r, bg_r, 0, Math.PI * 0.5)
- context.arc(bg_x + bg_r, bg_y + bg_h - bg_r, bg_r, Math.PI * 0.5, Math.PI)
- context.clip()
- context.drawImage(path2, bg_x, bg_y, bg_w, bg_h);
- // 恢复之前保存的绘图上下文
- context.restore()
- context.setStrokeStyle('transparent');
- // 绘制文字
- context.setFontSize(10);
- context.setFillStyle('#B4BDFF');
- context.setTextAlign('center');
- context.fillText("扫码进入小程序", 175, 470);
- context.stroke();
- context.draw();
- //将生成好的图片保存到本地
- setTimeout(function () {
- wx.canvasToTempFilePath({
- canvasId: 'mycanvas',
- success: function (res) {
- var tempFilePath = res.tempFilePath;
- that.setData({
- imagePath: tempFilePath,
- });
- that.downloadImg()
- },
- fail: function (res) {
- console.log(res);
- }
- });
- }, 200);
- });
- },
- downLoadImgEvent(){
- this.getSet(()=>{
- if(!this.data.writePhotosFlag){
- wx.openSetting()
- return
- }
- var _this = this;
- wx.getSetting({
- success(res) {
- if (!res.authSetting['scope.writePhotosAlbum']) {
- _this.setData({writePhotosFlag:false})
- wx.authorize({
- scope:'scope.writePhotosAlbum',
- success() {//授权成功
- _this.setData({writePhotosFlag:true})
- _this.formSubmit()
- },
- fail:function(err){
- _this.setData({writePhotosFlag:false})
- }
- })
- }else{//已经授权
- _this.setData({writePhotosFlag:true})
- _this.formSubmit()
- }
- }
- })
- })
- },
- downloadImg(){
- var _this = this
- var imgSrc = this.data.imagePath
- wx.saveImageToPhotosAlbum({
- filePath: imgSrc,
- success: function (data) {
- _this.recordInvite(2)
- wx.showToast({
- title: '海报已保存到相册',
- icon: 'success',
- duration: 2000
- })
- },
- fail: function (err) {
- },
- complete(res){
- }
- })
- },
- getSet(cb){
- var _this = this;
- wx.getSetting({
- success(res) {
- if(res.authSetting['scope.writePhotosAlbum'] == false){
- _this.setData({writePhotosFlag:false})
- }
- if(res.authSetting['scope.writePhotosAlbum'] == true){
- _this.setData({writePhotosFlag:true})
- }
- cb?cb():''
- }
- })
- },
- recordInvite(type){//按钮埋点
- app.func.req('/api/praise/recordInvite', 'post', {
- sph_praise_id:this.data.id,
- type:type
- }, (res) => {
- if(res && res.errno == 0){
- }else{
- }
- },()=>{
- })
- },
- onShareAppMessage: function (res) {
- this.recordInvite(1)
- return app.extensionShare(res,this.data.id)
- }
- })
|