uni-app 实现分享生成图片
<div class="cnblogs_Highlighter"><pre class="brush:csharp;gutter:true;"><template>
<view>
<view class="personal_li"
@click="shareClick">
<image src="../../static/address.png"
mode="widthFix"
class="iconImage"></image>
<text class="font14">分享生成图片</text>
<image src="../../static/jt.png"
mode="widthFix"
class="jtIcon"></image>
</view>
<view class="canvasContent" v-if="canvasShow">
<canvas canvas-id="shareCanvas" class="canvasName"></canvas>
<view class="canvasText">图片已保存到相册，可分享给好友</view>
<image src="../../static/error.png" class="errorImage" @click="canvasShow = false"></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
canvasShow: false
}
},
methods: {
//这是一个封装好的方法
promisify: api => {
return (options, ...params) => {
return new Promise((resolve, reject) => {
const extras = {
success: resolve,
fail: reject
}
api({ ...options, ...extras }, ...params)
})
}
},
shareClick() {
const wxGetImageInfo = this.promisify(uni.getImageInfo)
Promise.all([
// 图片目前只随机找了几张图片，后期可自行替换
wxGetImageInfo({
src: 'http://pics.ksudi.com/pic/2019/soms/companycard/jd2.png' // 背景图片
}),
wxGetImageInfo({
src: 'http://pics.ksudi.com/pic/2019/soms/companycard/st2.png' // 二维码图片，二维码图片如需要携带参数，可根据接口将需要扫码进入页面的路径+参数传入后端，后端可根据生产小程序二维码路径，将路径放入这里就ok了,可参考
})
]).then(res => {
console.log(3454)
const ctx = wx.createCanvasContext('shareCanvas')
console.log(ctx)
// 底图
ctx.drawImage(res.path, 0, 0, 600, 700)
// 作者名称
ctx.setTextAlign('center') // 文字居中
ctx.setFillStyle('#000000')// 文字颜色：黑色
ctx.setFontSize(22) // 文字字号：22px
ctx.fillText('作者：张杰', 300 / 2, 100)
// 小程序码
const qrImgSize = 150
ctx.drawImage(res.path, (340 - qrImgSize) / 2, 230, qrImgSize, qrImgSize)
ctx.stroke()
// 绘图生成临时图片
console.log('res', res)
ctx.draw(false,() => {
this.tempFileImage()
})
this.canvasShow = true
})
},
tempFileImage() {
let that = this
uni.canvasToTempFilePath({
canvasId: 'shareCanvas',
success: (res) => {
uni.hideLoading()
that.savePic(res.tempFilePath)
},
fail:function () {
//TODO
}
})
},
//保存
savePic (filePath) {
console.log('filePath', filePath)
uni.showLoading({
title: '正在保存'
});
uni.saveImageToPhotosAlbum({
filePath: filePath,
success: function () {
uni.showToast({
title: '图片保存成功～'
});
},
fail: function (e) {
//TODO
},
complete: function (){
uni.hideLoading()
}
});
}
}
}
</script>
<style lang="scss" scoped>
.canvasContent{
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
flex-direction: column;
padding-top: 50upx;
.canvasName{
width: 80%;
height: calc(100vh - 300upx);
}
.canvasText{
margin: 30upx 0 20upx;
color: #FFFFFF;
}
.errorImage{
width: 80upx;
height: 80upx;
}
}
</style>
</pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/gqx-html/p/11314275.html
頁:
[1]