Canvas 绘制
1.liu-poster插件
背景： liu-poster（适用于uni-app项目的canvas海报画板、海报生成、海报图组件，兼容微信小程序、H5
绘制类型：
1. color：背景色
2. image:图片
3. text:文字
4. line:线条
注意事项：
- 注意canvas画布的大小，画布过大在ios系统中无法展示
示例：
<template>
<view class="tab-box">
<view class="btn-complete" @click="open">一键生成海报</view>
<liu-posterref="liuPoster" :width="750" :height="1300" @change="change">
</liu-poster>
<image class="success-img" :src="url" @click="previewImg(url)"></image>
</view>
</template>
<script>
export default {
data() {
return {
canvasList: [
{
type: 'line', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
width: 4, //线条宽度(rpx)
color: '#FFFFFF', //线条颜色
startX: 20, //起点x轴位置(离左边的距离rpx)
startY: 270, //起点y轴位置(离上边的距离rpx)
endX: 730, //终点x轴位置(离左边的距离rpx)
endY: 270, //终点y轴位置(离上边的距离rpx)
lineType: 'dash', //线条类型(solid:实线;dash:虚线)
}, {
type: 'line', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
width: 4, //线条宽度(rpx)
color: '#FFFFFF', //线条颜色
startX: 20, //起点x轴位置(离左边的距离rpx)
startY: 1000, //起点y轴位置(离上边的距离rpx)
endX: 730, //终点x轴位置(离左边的距离rpx)
endY: 1000, //终点y轴位置(离上边的距离rpx)
lineType: 'dash', //线条类型(solid:实线;dash:虚线)
}],
url: ''
};
},
methods: {
//开始绘制
open() {
this.$nextTick(() => {
this.$refs.liuPoster.init(this.canvasList)
})
},
//绘制成功返回生成的海报图片地址
change(e) {
this.url = e
},
//预览生成的海报图片
previewImg(url) {
if (!url) return
uni.previewImage({
urls: [url]
})
}
}
};
</script>
2. html2canvas 插件
背景： html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。
基本语法： html2canvas(element, options);
示例：
1. npm install html2canvas //安装
2. import html2canvas from 'html2canvas' //导入
3. 使用
示例：****
1. npm install html2canvas //安装
2. import html2canvas from 'html2canvas' //导入
3. 使用
html2canvas(document.body, {
onrendered: function(canvas) {
var url = canvas.toDataURL();//图片地址
document.body.appendChild(canvas);
},
width: 300,
height: 300
});
