更新记录
1.0.5(2022-01-17)
添加自适应画布大小的功能
1.0.4(2022-01-16)
解决初次加载canvas绘制失败的bug
1.0.3(2021-07-22)
兼容微信小程序及APP
查看更多
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
使用方式
安装到components文件夹,支持easycom组件模式。
平台兼容性
兼容APP及微信小程序,其他平台未测试。由于本插件所使用API:uni.saveImageToPhotosAlbum不兼容H5,故H5端不支持长按下载
属性说明
属性名 |
类型 |
说明 |
ifShow.sync |
Boolean |
是否显示海报图 |
myCanvasSize |
Array |
设置海报图的大小 |
imageBg |
String |
背景图片 |
imageHead |
Array |
内置图片一 |
imageBody |
Array |
内置图片二 |
textHead |
String |
内置文字 |
事件说明
插件内置长按保存到本地相册,无需自定义事件
示例代码
重要:图片地址需自行换成可访问图片地址
<template>
<view>
<button class="btn" type="default" @click="canvasShow">点击显示</button>
<yz-canvas-poster ref="mycanvas" :myCanvasSize="myCanvasSize" :ifShow.sync="ifShow" :imageBg="imageBg"
:imageHead="imageHead" :imageBody="imageBody" :textHead="textHead">
</yz-canvas-poster>
</view>
</template>
<script>
export default {
data() {
return {
ifShow: false,
myCanvasSize: [0.8, 16 / 9], //[0]为画布占屏幕宽度的比例,[1]为背景画布长宽比
imageBg: '',
imageHead: [],
imageBody: [],
textHead: [],
canvasHight: 0,
canvasWidth: 0
}
},
methods: {
canvasShow() {
//获取画布的大小尺寸
this.canvasHight = this.$refs.mycanvas.canvasHeight;
this.canvasWidth = this.$refs.mycanvas.canvasWidth;
// 如下,以canvasHight、canvasWidth为单位进行计算,达到动态布局以适应不同尺寸的手机
this.imageBg = '../../static/bg.jpg';
this.imageHead = ['../../static/logo.png', this.canvasWidth * 0.16 - 20, this.canvasHight * 0.08 - 20, 40,40];
this.imageBody = ['../../static/myQR.jpg', this.canvasWidth * 0.5 - 60, this.canvasHight * 0.48, 120, 120];
this.textHead = ['myCanvas', this.canvasWidth * 0.16 + 28, this.canvasHight * 0.08, '#ffffff', '20'];
// 显示画布
this.ifShow = true;
//绘制画布
let tempTimeOut = setTimeout(() => {
this.$refs.mycanvas.init();
clearTimeout(tempTimeOut)
}, 50);
}
}
}
</script>
<style>
.btn {
margin: 24rpx;
}
</style>
如下示例代码数组项分别为:
myCanvasSize: [0.8, 16 / 9]
- 画布占屏幕宽度的比例
- 背景画布的长宽比
imageHead: ['../../static/logo.png', 50, 20, 40, 40]
- 图片地址
- 图像的左上角在目标canvas上 X 轴的位置
- 图像的左上角在目标canvas上 Y 轴的位置
- 在目标画布上绘制图像的宽度
- 在目标画布上绘制图像的高度
如下示例代码数组项分别为:
textHead: ['myCanvas', 100, 40, '#ffffff', '20']
- 文字内容
- 绘制文本的左上角x坐标位置
- 绘制文本的左上角y坐标位置
- 文字颜色
- 文字字号(以文字middle为基准线)
canvas踩坑
- uni-app中的canvas的width、height的值依赖于父元素的宽高。canvas的父级如果被隐藏。canvas的width、height则都为0。
- 当父元素出现,canvas的高度也就有了。但是canvas并不会绘制显示。解决方法:可以将绘制方法写在异步方法中,同时要注意组件的生命周期,确保实例挂载成功之后再执行。