记录一次项目中用到的图片涂鸦功能（Vue）

记录一次项目中用到的图片涂鸦功能（Vue）

在项目中涉及到一个作战地图标绘的功能（百度地图截图后在截图上可以任意添加icon），然后点击下载可以保存编辑完成后的图片。

效果预览：

插件名称：TOAST UI Image Editor

安装依赖：

npm install --save @toast-ui/vue-image-editor

引入：

<template>
	<tui-image-editor
      :include-ui="useDefaultUI"
      :options="options"
      ref="tuiImageEditor">
    </tui-image-editor>
</template>
import { ImageEditor } from "@toast-ui/vue-image-editor";
import "tui-image-editor/dist/tui-image-editor.css";
export default {
    components: {
        'tui-image-editor': ImageEditor
    },
    data() {
        return {
            useDefaultUI: true,
            options: { // for tui-image-editor component's "options" prop
                cssMaxWidth: 700,
                cssMaxHeight: 500
            }
        };
    }
}

vue中使用ImageEditor的方法需要使用invoke方法来调用tui.ImageEditor的方法，第一个参数是方法的名称，第二个参数是方法的参数。具体方法请访问官方文档。

个人在项目主要用addImageObject方法来添加自己的icon，添加后的icon是可以自由旋转和改变大小的。

addImage(url) {
    //url是图片的地址
	const tuiImageEditor = this.$refs.tuiImageEditor;
	tuiImageEditor.invoke("addImageObject", url).then((res) => {
		console.log(res);
	});
},