微信小程序设计画布

最近在学习微信小程序，在生成画布过程中，我们需要调用后台接口的不同图片或者信息。开始时用多个wx.getImageInfo调用图片，

wx.getImageInfo({

src: 'https://www.接口地址/images/1@theme.png',

success: function(res) {

//实现画布在这

}}）

这时，当想要调用第二张图片时，还需要再次写一个wx.getImageInfo来用，并且在相同的success回调函数中，嵌套不好使用，回调res结果中用在画布的context.drawImage(res.path, 0, 0)上，此处不便于用res.path[0]或者其他操作。在经过查看一些资料后。用另一种方法实现，如下：

先简化wx.getImagesInfo的多次使用回调，封装成数组应用。

建立js文件：promisify.js

module.exports = (api) => {

return (options, ...params) => {

return new Promise((resolve, reject) => {

api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);

});

}

}

在index中实现画布

index.wxml：

<button class="shareBtns" bindtap='onClick' type="default">查看结果</button>

<canvas canvas-id="myCanvas" style="position:fixed;visibily:hidden;width: 646px; height: 966px;" />

index.js：（先引入上面的promisify.js）

const promisify = require('promisify')

Page({

/*页面的初始数据*/

data: {

},

//制作一个canvas标签

onClick: function () {

const wxGetImageInfo = promisify(wx.getImageInfo)

Promise.all([

wxGetImageInfo({

src: 'https://www.地址/images/1@theme.png'

}),

wxGetImageInfo({

src: 'https://www.地址/images/code.jpg'

})

]).then(res => {

const ctx = wx.createCanvasContext('myCanvas')

// 底图

ctx.drawImage(res[0].path, 0,0)

// 作者名称

ctx.setFillStyle("#02446e");

ctx.setFontSize(26);

ctx.setTextAlign("center");

ctx.fillText("结果", 170, 100 - 60);

ctx.setTextAlign("left");

ctx.setFillStyle("black");

ctx.setFontSize(18);

ctx.fillText("我等你", 50, 120 - 60);

ctx.setFontSize(22);

// 小程序码

const qrImgSize = 180

ctx.drawImage(res[1].path, 0, 275,100,100)

ctx.stroke()

ctx.draw()

})

},

})

到结束，就实现了画布调用后台接口图片的功能，文字在这并未调用后台的，后续有需要可加入。

因经查看部分资料，如有侵权请见谅，到时我会删除，谢谢。

转载于:https://my.oschina.net/u/3972771/blog/2250462