在開(kāi)發(fā)小程序的過(guò)程中使用到了canvas來(lái)生成海報(bào)刽漂，然后添加小程序的二維碼就可以生成海報(bào)圖了
生成圖片如下：
0067gbbTly1g48mx4m3f3j30b70k40xt.jpg
代碼如下，在這里我是用了uni-app框架進(jìn)行的開(kāi)發(fā)涣楷，如果你使用的是其他的框架或者原生需要進(jìn)行相應(yīng)替換(原文)
html模板
<template>
<view>
<view class="canvas-box" v-bind:style="{display:canvasShow?'block':'none'}">
<canvas canvas-id="shareCanvas"></canvas>
<icon type="cancel" size="32" color="#000" @click="closeShare" />
</view>
<view class="share-btn" @click="saveImageToPhoto">
分享
</view>
</view>
</template>
js代碼
export default {
props: {
imageArray: {
type: Array,
default: () => []
}
},
data() {
return {
shareImageArr: [],
savedImgUrl: '',
canvasShow: false,
ymd: '',
week: '',
initLoad: true
};
},
methods: {
closeShare() {
this.canvasShow = false
},
saveImageToPhoto() {
var that = this;
//格式化時(shí)間
that.getDateTime()
//獲取數(shù)組
that.shareImageArr = that.assignArray(that.imageArray, 9)
that.canvasShow = true
if (that.initLoad) {
that.getShareImage()
setTimeout(function() {
that._canvasToTempFilePath()
}, 800)
that.initLoad = false
}
let reset = function() {
setTimeout(function() {
if (that.savedImgUrl != "") {
that._saveImageToPhotosAlbum()
} else {
that.getShareImage()
setTimeout(function() {
that._canvasToTempFilePath()
reset()
}, 800)
}
}, 1300)
}
reset()
},
_canvasToTempFilePath() {
let that = this;
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: 300,
height: 534,
destWidth: 900,
destHeight: 1600,
canvasId: 'shareCanvas',
success: function(res) {
that.savedImgUrl = res.tempFilePath
},
fail: function(e) {
console.log("canvas save error")
}
}, that)
},
_saveImageToPhotosAlbum() {
let that = this;
uni.saveImageToPhotosAlbum({
filePath: that.savedImgUrl,
success: function() {
uni.showModal({
title: '保存圖片成功',
content: '圖片已經(jīng)保存到相冊(cè)环肘，快去炫耀吧！',
showCancel: false,
success: function(res) {
that.canvasShow = false
},
fail: function(res) {},
complete: function(res) {},
});
},
fail: function(res) {
if (res.errMsg == "saveImageToPhotosAlbum:fail cancel") {
uni.showModal({
title: '保存圖片失敗',
content: '您已取消保存圖片到相冊(cè)揭璃！',
showCancel: false,
success: function(res) {
that.canvasShow = false
}
});
} else {
uni.showModal({
title: '提示',
content: '保存圖片失敗晚凿，您可以點(diǎn)擊確定設(shè)置獲取相冊(cè)權(quán)限后再嘗試保存！',
complete: function(res) {
if (res.confirm) {
uni.openSetting({}) //打開(kāi)小程序設(shè)置頁(yè)面瘦馍，可以設(shè)置權(quán)限
} else {
uni.showModal({
title: '保存圖片失敗',
content: '您已取消保存圖片到相冊(cè)歼秽！',
showCancel: false,
success: function(res) {
that.canvasShow = false
}
});
}
}
});
}
}
})
},
//分享海報(bào)圖片
getShareImage() {
const wxGetImageInfo = this.promisify(uni.getImageInfo)
Promise.all(
this.shareImageArr.map(i => {
return wxGetImageInfo({
src: i
})
})
).then(res => {
const ctx = uni.createCanvasContext('shareCanvas', this)
let w = 0
let h = 0
res.map(e => {
ctx.drawImage(e.path, w, h, this.dengbi(e).w, this.dengbi(e).h)
w = w + 100
if (w >= 300) {
h = h + 100
w = 0
}
})
//底部圖層
ctx.rect(0, 300, 300, 234)
ctx.setFillStyle('rgba(255, 255, 255, 1)')
ctx.fill()
//圖片遮罩
ctx.rect(0, 0, 300, 300)
ctx.setFillStyle('rgba(255, 255, 255, 0.5)')
ctx.fill()
ctx.setFillStyle('#000000')
ctx.setFontSize(16)
ctx.fillText(this.ymd, 10, 400)
ctx.setFillStyle('#000000')
ctx.setFontSize(16)
ctx.fillText(this.week, 10, 430)
ctx.setFillStyle('#333333')
ctx.setFontSize(12)
ctx.fillText("長(zhǎng)按識(shí)別二維碼,獲取更多有趣圖片", 70, 500)
//二維碼
ctx.drawImage('../../static/codes.png', 190, 350, 100, 100)
// ctx.stroke()//描邊
ctx.draw()
})
},
//這是一個(gè)封裝好的方法
promisify(api) {
return (options, ...params) => {
return new Promise((resolve, reject) => {
const extras = {
success: resolve,
fail: reject
}
api({ ...options,
...extras
}, ...params)
})
}
},
//計(jì)算圖片比例
dengbi(e) {
let h = 100 * e.height / e.width
if (h < 100) {
let w = 100 * e.width / e.height
return {
h: 100,
w: w
}
} else {
return {
h: h,
w: 100
}
}
},
//日期格式化
getDateTime() {
let d = new Date()
let weekarr = ["日", "一", "二", "三", "四", "五", "六"]
this.ymd = d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日"
this.week = "星期" + weekarr[d.getDay()]
},
assignArray(data = [], _length = 9) {
if (data.length == 0) {
return new Int8Array(_length)
} else
if (data.length < _length && data.length > 0) {
let arr = []
while (arr.length < _length) {
data.map(e => {
arr.push(e)
})
}
return arr.slice(0, _length)
} else
if (data.length >= 9) {
return data.slice(0, _length)
}
},
},
}
scss樣式
.share-btn {
z-index: 10;
position: fixed;
bottom: 20px;
right: 20px;
height: 30px;
width: 30px;
border-radius: 50%;
padding: 10px;
box-shadow: inset 0px 0px 3px 5px #f7f379;
background: #ffffff;
}
.canvas-box {
z-index: 99;
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
background: rgba(0, 0, 0, 0.5);
canvas {
margin: 10px auto;
width: 300px;
height: 534px;
}
icon {
display: block;
text-align: center;
}
}
如果對(duì)你有幫助就支持一下吧，(￣▽￣)／
