微信小程序保存画布到相册

在上一章中实现生成画布后，现考虑实现保存画布至本地相册。

result.wxml：

<view class='container'>

<canvas class="result" canvas-id="resultCanvas"></canvas>

</view>

<view class='buttom'>

<image class="save" src='../../images/save.png' bindtap='saveClick'></image>

<text class="save_text">保存到手机</text>

<image class="share" src='../../images/share.png' bindtap='shareClick'></image>

<text class='share_text'>分享给好友</text>

</view>

result.js：

// pages/result/result.js

const promisify = require('promisify')

Page({

/**

* 页面的初始数据

*/

data: {

}

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

onReady: function () {

const wxGetImageInfo = promisify(wx.getImageInfo)

Promise.all([

wxGetImageInfo({

src: 'https://www.wonderfulbox.club/images/1@theme.png'

}),

wxGetImageInfo({

src: 'https://www.wonderfulbox.club/images/code.jpg'

})

]).then(res => {

const ctx = wx.createCanvasContext('resultCanvas')

// 底图

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, (600 - qrImgSize) / 2, 530, qrImgSize, qrImgSize)

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

var that = this;

ctx.stroke()

ctx.draw(true, setTimeout(function (){//此处把画布的完成放入draw中，并存放在临时路径

wx.canvasToTempFilePath({

canvasId: 'resultCanvas',

success: (res) => {

that.setData({

shareTempFilePath: res.tempFilePath

})

}

})

}))

})

},

saveClick:function(){

if (!this.data.shareTempFilePath) {

wx.showModal({

title: '提示',

content: '图片绘制中，请稍后重试',

showCancel: false

})

}

wx.saveImageToPhotosAlbum({

filePath: this.data.shareTempFilePath,

success: (res) => {

console.log(res)

},

fail: (err) => {

console.log(err)

}

})

},

})

 

 

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