canvas 调用本地图片并输出图

<!--pages/demo/demo.wxml-->

<canvas canvas-id="myCanvas" style="width:700px;height:750px"/>

// pages/demo/demo.js

Page({

/**

* 页面的初始数据

*/

data: {

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function(options) {

 

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function() {

const ctx = wx.createCanvasContext('myCanvas')

ctx.drawImage('../../image/jc_0.png', -58, -220, 750 / 1.5, 1122)

ctx.drawImage('../../image/jc_1.png', 45 / 2, 54 / 2, 66 / 2, 66 / 2)

ctx.drawImage('../../image/jc_2.png', 138 / 2, 52 / 2, 114 / 2, 37 / 2)

ctx.drawImage('../../image/jc_3.png', 140 / 2, 101 / 2, 107 / 2, 17 / 2)

ctx.drawImage('../../image/jc_4.png', 370 / 2, 60 / 2, 325 / 2, 47 / 2)

ctx.drawImage('../../image/jc_5.png', 41 / 2, 177 / 2, 677 / 2, 109 / 2)

ctx.drawImage('../../image/jc_6.png', 126 / 2, 300 / 2, 148 / 2, 148 / 2)

ctx.drawImage('../../image/jc_6.png', 304 / 2, 300 / 2, 148 / 2, 148 / 2)

ctx.drawImage('../../image/jc_6.png', 482 / 2, 300 / 2, 148 / 2, 148 / 2)

ctx.drawImage('../../image/jc_6.png', 126 / 2, 474 / 2, 148 / 2, 148 / 2)

ctx.drawImage('../../image/jc_6.png', 304 / 2, 474 / 2, 148 / 2, 148 / 2)

ctx.drawImage('../../image/jc_6.png', 482 / 2, 474 / 2, 148 / 2, 148 / 2)

ctx.drawImage('../../image/jc_7.png', 126 / 2, 650 / 2, 120 / 2, 120 / 2)

ctx.drawImage('../../image/jc_7.png', 254 / 2, 650 / 2, 120 / 2, 120 / 2)

ctx.drawImage('../../image/jc_7.png', 382 / 2, 650 / 2, 120 / 2, 120 / 2)

ctx.drawImage('../../image/jc_7.png', 510 / 2, 650 / 2, 120 / 2, 120 / 2)

ctx.drawImage('../../image/jc_8.png', 136 / 2, 796 / 2, 479 / 2, 37 / 2)

ctx.drawImage('../../image/jc_9.png', 255 / 2, 846 / 2, 241 / 2, 37 / 2)

ctx.drawImage('../../image/jc_10.png', 121 / 2, 868 / 2, 509 / 2, 81 / 2)

ctx.drawImage('../../image/jc_11.png', 0, 986 / 2, 750 / 2, 136 / 2)

ctx.drawImage('../../image/jc_12.png', 45 / 2, 1030 / 2, 491 / 2, 43 / 2)

ctx.drawImage('../../image/jc_13.png', 688 / 2, 1038 / 2, 18 / 2, 32 / 2)

ctx.draw(true, setTimeout(function () {

wx.canvasToTempFilePath({

x: 0,

y: 0,

width: 700,

height: 750,

destWidth: 700,

destHeight: 750,

canvasId: 'myCanvas',

success: function (res) {

wx.saveImageToPhotosAlbum({

filePath: res.tempFilePath,

})

}

})

}, 1000))

//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时

wx.showToast({

title: '分享图片生成中...',

icon: 'loading',

duration: 1000

});

 

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function() {

 

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function() {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function() {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function() {

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function() {

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function() {

},

 

})

转载于:https://www.cnblogs.com/ylblogs/p/9645057.html