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() {

},
 
})

猜你喜欢

转载自www.cnblogs.com/ylblogs/p/9645057.html