vue-graffiti

介绍

基于 vue3 开发的涂鸦组件，支持图片、文字、圆形、矩形、画笔

使用方式 npm

npm i vue-graffiti -S

main.js

import { createApp } from "vue";
import App from "./App.vue";
import vueGraffiti from "vue-graffiti";
import "vue-graffiti/vueGraffiti.css";
createApp(App).use(vueGraffiti).mount("#app");

.d.ts(没有使用 ts 可以省略)

declare module "vue-graffiti" {
	const content: any;
	export default content;
}

在线体验

http://49.232.252.227:1566

Attributes

| 参数 | 说明 | 类型 | 默认值 | | --------------- | ---------------------- | ------ | --------------------------------------------------------------------------------------------------- | | cWidth | canvas 宽度 | number | 800 | | cHeight | canvas 高度 | number | 800 | | optionsTools | 新增工具栏 | Array | img: 工具栏展示的图片（base64）;name: 名称;toolType: 类型 （img 是 5）;cursor: 鼠标样式默认 default | | optionsCanvas | canvas 设置 | Object | isBg 默认没有背景图，path:背景图的 base64 | | imageNameFormat | 保存图片的名称以及格式 | string | 默认是:测试.png |

Methods

| 事件名称 | 说明 | 参数 | | --------------- | --------------- | ------------------------------- | | handlePre | 下一步 | | | handleNext | 上一步 | | | clearCanvas | 清除画布 | | | handleSaveImage | 下载事件 | | | getImageData | 获取 image 图层 | list：图层数组，index：当前图层 |