dengrui/components/mosowe-canvas-image/readme.md

7.9 KiB
Raw Blame History

mosowe-canvas-image一个可以制作多用途图片的插件海报二维码分享图

v1.2.0

  1. 添加透明度globalAlpha,值0-1
  2. 修改只能画一个圆形图片问题画圆形图片时耗时较多因为额外增加了一个canvas处理圆形图片请注意arcXarcY的说明;

v1.1.0

  1. 添加本地图片渲染,已支持本地相册/相机 + https的网络图片建议画布宽高750*1330
  2. 添加导出图片的类型:imgType可选值jpg、png
  3. 添加本地图片压缩功能:compress是否开启压缩,compressSize压缩程度默认2Mlists列表图片项需增加传参file
  4. 解决H5网络图片“canvasToTempFilePath:fail SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported”错误问题图片服务器需支持“Access-Control-Allow-Origin: *”
  5. 使用非solt插槽触发事件时请确认$ref是否正确
  6. 示例增加参数编辑,使用前体验插件

平台支持:

APP H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序 QQ小程序
× 未测 未测 未测

插件功能

  1. 支持多图片绘制,多文本绘制,圆形图片绘制;
  2. 支持矩形(线条)绘制;
  3. 支持圆形绘制;
  4. 支持二维码生成,项目用不上可以去插件内去除,毕竟这个插件携带的比较大,单纯用来生成二维码图片也是阔以的;
  5. 支持绘图后预览。

多用于海报图,分享图;

注意H5跨域问题及小程序白名单配置

图片是网络图片:https://....require及import引入不了3Kb以上的绝对路径图片若有大神知道处理方法望不吝赐教谢谢

属性

名称 类型 默认值 说明 版本
width Number \String 200 canvas画布宽度也是导出图片宽度单位px值中不要带单位 1.0.0
height Number \String 200 canvas画布高度也是导出图片高度单位px值中不要带单位 1.0.0
showPreview Boolean false 绘制完成后是否打开预览 1.0.0
lists Array [] 绘制的元素列表:图片,文字,矩形(线条),圆形,二维码 1.0.0
imgType String jpg 生成图片格式可选png 1.1.0
compress Boolean false 是否开启图片压缩 1.1.0
compressSize Number\String 2097152 (2M) 超过多少M压缩 1.1.0

lists<item>属性

注意:图文先后顺序,底层的图片靠前,最上层的在最后,圆形图片放在最后,因为一旦绘制圆形,后续的元素都只在该圆形内显示,而超过圆形范围的将看不见。

名称 类型 必填 说明 版本
type String 元素类型:image图片,text文本,rect矩形(线条),arc圆形,qr二维码 1.0.0
content String image图片路径必填text文字必填qr转二维码的数据必填rect及arc非必填 1.0.0
x Number X轴坐标绘制圆形图片时x = arcX - arcR 1.0.0
y Number Y轴坐标绘制圆形图片时y = arcY - arcR 1.0.0
width Number 图片、矩形(线条)、二维码宽度 1.0.0
height Number 图片、矩形(线条)、二维码高度 1.0.0
arc Boolen type=image时是否绘制圆形图片 1.0.0
arcX Number type=arc时绘制圆形时中心点X轴坐标type=image时图片在圆形canvas的X坐标多为负数版本1.2.0 1.2.0
arcY Number type=arc时绘制圆形时中心点Y轴坐标type=image时图片在圆形canvas的Y坐标多为负数版本1.2.0 1.2.0
arcR Number type=image、arc时绘制圆形的半径 1.0.0
color String 绘制文本、矩形(线条)的颜色,默认:#000000 1.0.0
size Number 绘制文本的字号大小默认20 1.0.0
align String 绘制文本的对齐方式默认left 1.0.0
maxWidth Number 绘制文本的最大宽度,文字长度超过该值会被压缩 1.0.0
file file 选择本地图片的file文件版本1.1.0 1.1.0
globalAlpha Number 透明度0~1默认1版本1.2.0 1.2.0

slots

名称 说明
default 自定义插槽,点击此区会触发绘图事件

事件

名称 回调参数 说明
canvasImage url 绘制成功后返回的本地地址H5为base64

使用方式

page.json中配置了"easycom": true,则无需script引入就可以使用,没有则需要引入。

  1. 无slot组件标签添加ref属性,采用父级调用子组件createCanvas()方法使用,见后文示例;
  2. 有slotslot区点击就会执行

示例

// js
data () {
    return {
			canvasUrl: '',
			lists: [
						{
							type: 'image',
							content: 'https://www.zhonglixunqing.cn/images/uniapp/1.jpg', 
							width: 200, 
							height: 100, 
							x: 50, 
							y: 20, 
						},
						{
							type: 'image',
							content: 'https://www.zhonglixunqing.cn/images/uniapp/2.jpg', 
							width: 80, 
							height: 80, 
							x: 20, 
							y: 200, 
							arc: false, 
							arcX: 0, 
							arcY: 0, 
							arcR: 0 
						},
						{
							type: 'text',
							content: '扫一扫,获取更多信息', 
							x: 120, 
							y: 250, 
							color: '#ff0000', 
							size: 10, 
							// maxWidth: 100, 
							// align: 'left', 
						},
						{
							type: 'rect',
							width: 1,
							height: 100,
							x: 0,
							y: 10,
							color: '#ff0000',
						},
						{
							type: 'image',
							content: 'https://www.zhonglixunqing.cn/images/uniapp/3.jpg', 
							width: 100, 
							height: 100, 
							x: 200, 
							y: 200, 
							arc: true, 
							arcX: 250, 
							arcY: 250, 
							arcR: 50 
						},
					]
    };
  },
  methods: {
		beginCanvas () {
			this.$refs.mosoweCanvasComponents.createCanvas();
		},
		_canvasImage (e) {
			this.canvasUrl = e;
		}
	}

插件外独立按钮触发:

		<button type="default" @click="beginCanvas">开始绘图</button>
		<image :src="canvasUrl" mode="widthFix"></image>
		<mosowe-canvas-image 
			ref="mosoweCanvasComponents" 
			@canvasImage="_canvasImage" 
			:lists="lists" 
			height="300" 
			width="300"
			showPreview />

slot插槽触发

		<mosowe-canvas-image 
			:lists="lists" 
			height="300" 
			width="300"
			showPreview >
			<view class="in_btn">
				slot按钮的
			</view>
			</mosowe-canvas-image>

预览地址