最近做一个app,需要截取页面保存为图片,然后分享给好友。
uni-app官网https://uniapp.dcloud.io/
那么进入正题
首先是页面的ui图
需要的白色区域截图并且保存图片发给好友。
那么就要用到canvas进行画图,图片的话可以使用drawImage设置背景图
第一步,创建画布
<template>
<view>
<canvas class="can" canvas-id="firstCanvas" ></canvas>
</view>
</template>
<script>
export default{
onLoad() {
var that = this
that.toDrawCanvas()
} ,
methods:{
//绘制canvas
toDrawCanvas() {
let that=this
let ctx = uni.createCanvasContext('firstCanvas',this)//后来又做了一个分享的项目,发现不加this就不能用
//uni.upx2px()是尺寸单位转换方法,622为rpx单位,换成px为311,根据设计稿来编辑
let canvaWidth=uni.upx2px(622)
let canvaHight=uni.upx2px(984)
//绘制文字居中对齐使用,根据我的理解,这个数值是要为需要截图区域宽度的一半
let centerCode=uni.upx2px(311)
let xx=uni.upx2px(64)
let yy=uni.upx2px(48)
let font=uni.upx2px(32)//字体大小
let yzmtop=uni.upx2px(130)
let yzmleft=uni.upx2px(232)
let imgurl='../../static/img/my/yqm.png'//设置背景图的路径
ctx.drawImage(imgurl,0,0,canvaWidth,canvaHight)
//绘制您的邀请码文字
ctx.setFillStyle('#333333')//文字颜色
ctx.setFontSize(font)
ctx.textAlign="center"//居中,而且这个需要放在ctx.setFontSize()后面,其他api就没去一一使用过
//绘制文字ctx.fillText(需要绘制的文字,x轴距离,y轴距离);
ctx.fillText("您的邀请码",centerCode,yzmtop);
//绘制邀请码文字
let yqmwenzix=uni.upx2px(311)
let yqmwenziy=uni.upx2px(227)
let yamcodes=“邀请码”//这个是放邀请码
ctx.setFillStyle('#fff')
ctx.setFontSize(font)
ctx.textAlign="center"
ctx.fillText(yamcodes,yqmwenzix,yqmwenziy);
//绘制复制邀请码
let copyMx=uni.upx2px(310)
let copyFont=uni.upx2px(28)
ctx.setFillStyle('#EEB826')
ctx.setFontSize(copyFont)
ctx.textAlign="center"
ctx.fillText("复制邀请码",yqmwenzix,copyMx);
//绘制二维码位置
let erweimaimg='../../static/img/my/appload.png'
let towCodeX=uni.upx2px(172)
let towCodeY=uni.upx2px(436)
let towCodeW=uni.upx2px(280)
ctx.drawImage(erweimaimg,towCodeX,towCodeY,towCodeW,towCodeW)
//绘制扫码下载APP文字
let apploady=uni.upx2px(790)
ctx.setFillStyle('#333333')
ctx.setFontSize(font)
ctx.textAlign="center"
ctx.fillText("扫码下载APP",yqmwenzix,apploady);
//绘制分享好友文字
let shareY=uni.upx2px(890)
ctx.setFillStyle('#FFFFFF')
ctx.setFontSize(font)
ctx.textAlign="center"
ctx.fillText("分享好友",yqmwenzix,shareY);
ctx.draw()//结束绘画
}
}
}
</script>
这样到这边,ui图就实现出来了。
第二步,把当前画布指定区域的内容导出生成指定大小的图片,并且分享好友
在此说一个api问题,如果在浏览器调试,并且报错API share
is not yet implemented,这个是说改share(uni-app的分享api)在浏览器(h5)不能使用,需要在模拟器上或者真机上使用
ps:saveImageToPhotosAlbum要在小程序后台->设置配置隐私协议,说明保存图片是用来干吗的
export default{
methods:{
//绘制canvas
toDrawCanvas() {.......},
//分享点击
appShare() {
let that = this
uni.canvasToTempFilePath({
canvasId: 'firstCanvas',
success: (res) => {
//返回文件路径
that.imageUrl=res.tempFilePath
//保存图片到系统相册
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: (res) => {
uni.showToast({
title: '保存成功'
})
},
fail() {
uni.showToast({
icon: 'none',
title: '保存名片码失败'
})
}
})
//unii-app分享,我在这里是微信分享好友
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 2,
imageUrl: res.tempFilePath,
success: function (res) {
console.log(res);
},
fail: function (err) {
console.log("fail:" + JSON.stringify(err));
}
});
}
})
}
}
}
到此就结束了。
关于分享好友这个点击事件,用canvas绘画出来没有点击事件,只能自己在position: fixed;定位到相对的位置。
OK,准备下班。
最后,如果我的笔记对您有帮助,请给我一个赞~ 谢谢!