小程序生成海報，并保存到手機(jī)相冊
需求
小程序要生成一個海報并保存到手機(jī)相冊,海報有個二維碼跺撼，有文字描述等窟感。用戶識別二維碼進(jìn)入小程序，二維碼內(nèi)有參數(shù)歉井，也就是說這個二維碼是動態(tài)的柿祈，需要服務(wù)端生成返回給小程序端。
需求分析
1.一張背景圖片
2.一張二維碼
3.請求接口哩至，并下載2張圖片
4.將2張圖片繪制到canvas
5.繪制文字
6.保存到手機(jī)相冊
技術(shù)點(diǎn)
1.
wx.getImageInfo下載網(wǎng)絡(luò)圖片躏嚎，并生成臨時路勁
2.promise all將2張網(wǎng)絡(luò)圖片都下載完成后在進(jìn)行canvas繪制
3.canvas.drawImage繪制canvas圖片
4.wx.canvasToTempFilePath將canvas生成圖片 生成臨時路徑
5.saveImageToPhotosAlbum將生成的臨時路徑保存到手機(jī)相冊
代碼
html
<button bindtap='create'>生成</button>
<canvas
canvas-id="canvas"
class="canvas"
style="position:absolute;width:{{canvasWidth}};height:{{canvasHeight}};left:{{canvasLeft}};">
</canvas>
js
const ctx = wx.createCanvasContext('shareCanvas')
Page({
data: {
canvasWidth : "",
canvasHeight : "",
canvasLeft : "",
canvasTop : ""
},
/*
獲取圖片，一般我們生成海報菩貌，海報上的二維碼都是動態(tài)生成的卢佣，每次生成的二維碼都不一樣，且都是通過后臺返回的圖片地址箭阶。
包括海報背景也是動態(tài)虚茶，后臺返回會來的戈鲁。所以我們現(xiàn)下載圖片，生成臨時路徑嘹叫。
使用promise主要是海報可能有多個圖片組成婆殿，必須等圖片全部下載完成再去生成
*/
getImage: function (url) {
return new Promise((resolve, reject) => {
wx.getImageInfo({
src: url,
success: function (res) {
resolve(res)
},
fail: function () {
reject("")
}
})
})
},
getImageAll: function (image_src) {
let that = this;
var all = [];
image_src.map(function (item) {
all.push(that.getImage(item))
})
return Promise.all(all)
},
//創(chuàng)建
create: function () {
let that = this;
//圖片一把是通過接口請求后臺，返回倆點(diǎn)地址罩扇，或者網(wǎng)絡(luò)圖片
let bg = 'http://statics.logohhh.com/forum/201610/24/170644l325qooyabhioyaa.jpg';
let qr = 'http://image.weiued.com/UploadImages/question/20170420/3e384842-6af7-44cb-aeb1-f427731c8271.jpg';
//圖片區(qū)別下載完成婆芦，生成臨時路徑后，在盡心繪制
this.getImageAll([bg, qr]).then((res) => {
let bg = res[0];
let qr = res[1];
//設(shè)置canvas width height position-left, 為圖片寬高
this.setData({
canvasWidth : bg.width+'px',
canvasHeight : bg.height+ 'px',
canvasLeft : `-${bg.width + 100}px`,
})
let ctx = wx.createCanvasContext('canvas');
ctx.drawImage(bg.path, 0, 0, bg.width, bg.height);
ctx.drawImage(qr.path, bg.width - qr.width - 100, bg.height - qr.height - 150, qr.width * 0.8, qr.height * 0.8)
ctx.setFontSize(20)
ctx.setFillStyle('red')
ctx.fillText('Hello world', bg.width - qr.width - 50, bg.height - qr.height - 190)
ctx.draw()
wx.showModal({
title: '提示',
content: '圖片繪制完成',
showCancel:false,
confirmText : "點(diǎn)擊保存",
success : function () {
that.save()
}
})
})
},
//保存
save : function () {
wx.canvasToTempFilePath({//canvas 生成圖片 生成臨時路徑
canvasId: 'canvas',
success : function (res) {
console.log(res)
wx.saveImageToPhotosAlbum({ //下載圖片
filePath : res.tempFilePath,
success : function () {
wx.showToast({
title : "保存成功",
icon: "success",
})
}
})
}
})
}
})
