zan-poster/dist_miniprogram/index.js

通过json在canvas上绘制图像, 基于cax画图框架开发, 本画图组件是json2canvas库的改造、优化版本 (详情查看README.md文档末说明)。

import poster from"./poster";let blankImg="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",wxlog=wx.getRealtimeLogManager?wx.getRealtimeLogManager():null;function getDpr(){let t=1.5;var[a,i,e]=(wx.getAppBaseInfo()?.SDKVersion||"").split(".").map(Number);return t=a<3||3===a&&i<3||3===a&&3===i&&e<=5?1:t}let inter=null;Component({properties:{painting:{type:[Object,Array],value:{}},preload:{type:Boolean,value:!1},isSave:{type:Boolean,value:!0},showCanvas:{type:Boolean,value:!1},showMenu:{type:Boolean,value:!0},showLoading:{type:Boolean,value:!0},sync:{type:Boolean,value:!0}},observers:{painting(t){!this.data.isPainting&&t&&(t=Array.isArray(t)?t:[t]).length&&t.every(t=>t&&t.width&&t.height)&&(this.setData({canvasList:t}),this.data.preload||this.start())},preload(t){t||this.start()},sync(t=!0){this.setData({syncPainting:t})}},data:{canvasId:"canvasId-"+(new Date).getTime(),width:1,height:1,isPainting:!1,imgUrl:"",readying:!1,canvasList:[],canvasBody:null,success:null,fail:null,rate:1,loading:!1,isPc:!1,syncPainting:!0},lifetimes:{ready(){this.createSelectorQuery().select("#"+this.data.canvasId).fields({node:!0,size:!0}).exec(t=>{setTimeout(()=>{getDpr(),this.setData({readying:!0,canvasBody:t,loading:this.data.showLoading,isPc:["mac"].includes(wx.getDeviceInfo()?.platform?.toLowerCase())}),this.triggerEvent("ready",t)})})},detached(){inter&&clearInterval(inter),this.canvasBody=null,this.canvasList=[],poster?.clear()}},methods:{async draw(t){var a;if(t&&"object"==typeof t&&t.painting&&!this.data.isPainting)return void 0!==t.showLoading&&this.setData({loading:!!t.showLoading}),void 0!==t.sync&&this.setData({syncPainting:!(!t.sync&&t.success)}),a=Array.isArray(t.painting)?t.painting:[t.painting],this.setData({success:t.success||null,fail:t.fail||null,readying:!0,canvasList:a}),this.start()},async start(){if(!this.data.isPainting){var t=this.data.loading&&!this.data.preload,s=this.data.canvasList,n=s.length;let i=Array(n).fill({tempFilePath:blankImg}),e=[];this.setData({isPainting:!0}),t&&(!this.data.syncPainting||n<=1)&&wx.showLoading({title:"生成中...",mask:!0});for(let a=0;a<n;a++){t&&this.data.syncPainting&&1<n&&wx.showLoading({title:`生成中(${a+1}/${n})`,mask:!0});var r=s[a];r.scale=getDpr(),await this.drawer(r).then(t=>{i.splice(a,1,t),this.data.syncPainting||this.submitSuccess(i)}).catch(t=>{e.push(t)})}if(this.setData({isPainting:!1,loading:this.data.showLoading,syncPainting:this.data.sync,canvasList:[]}),wx.hideLoading(),i.length)return this.data.syncPainting&&this.submitSuccess(i),this.setData({success:null,fail:null}),i;if(this.data.fail&&this.data.fail(e),this.triggerEvent("fail",e),wxlog.info(`zan-poster.fail-${this.data.canvasId}: `,e),this.setData({success:null,fail:null}),e.length)throw new Error(JSON.stringify(e))}},submitSuccess(t){wx.hideLoading(),this.data.success&&this.data.success(t),this.triggerEvent("change",t)},drawer(t){return new Promise((a,e)=>{inter=setInterval(()=>{if(t&&this.data.readying&&this.data.canvasBody){clearInterval(inter);try{let i=this.data.canvasBody[0].node;poster.draw(t,this.data.canvasBody,this,(t={})=>{setTimeout(()=>{this.data.isSave&&this.saveImage(i,t).then(a).catch(e)},50)},(t={})=>{var a=Math.round(t.width*getDpr()),t=Math.round(t.height*getDpr());this.setData({width:a,height:t}),i.width=a,i.height=t})}catch(t){wxlog.info(`zan-poster.error-${this.data.canvasId}: `,t),e(t)}}},50)})},saveImage(s){return new Promise((a,i)=>{let t={};var e;this.data.isPc&&(e=wx.getWindowInfo()?.pixelRatio||1,t={width:s.width/e,height:s.height/e}),wx.canvasToTempFilePath({...t,fileType:"jpg",quality:.8,canvas:s,complete:t=>{"canvasToTempFilePath:ok"===t.errMsg?(this.setData({imgUrl:t.tempFilePath}),a({tempFilePath:t.tempFilePath,errMsg:"drawer:ok",width:s.width,height:s.height}),console.log(t.tempFilePath)):i({errMsg:JSON.stringify(t||{})})},fail:t=>{i({errMsg:JSON.stringify(t||{})})}},this)})}}});