tui-image-editor 图片编辑组件

针对图片的涂鸦、缩放、标注等操作，需要借助canvas来操作，这里借助tui-image-editor绘图组件来实现基础的涂鸦等功能

可以参考一篇使用教程博客：

快给你的Vue项目添加一个编辑图片组件吧_Senar的博客-CSDN博客_vue 图片编辑组件https://blog.csdn.net/i_am_a_sb/article/details/109944501里面介绍的很详细，不过我对自己要使用的情况做了一些个性化，并封装成一个组件，方便调用

 tui.image-editor-官方英文文档：（介绍官方的一些方法）

nhn.github.io/tui.image-editor/latest/ImageEditor#loadImageFromFilehttp://nhn.github.io/tui.image-editor/latest/ImageEditor#loadImageFromFile

---

一：安装tui-image-editor

不知道为什么，我直接npm i tui-image-editor，即使安装成功，vue项目也会运行报错，说找不到这个文件，试了好久，最后找到的办法，是安装@toast-ui/vue-image-editor，不知道是不是这个插件更新了？

 你可以直接在package.json文件中复制上这两行，然后在控制台输入 cnpm i  更新包

或者一个个安装：

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

npm install tui-code-snippet

这样引入依赖后，我的项目才能不报错跑起来，但是我看网上其他人直接 npm i tui-image-editor就能运行，哎~

 二：根据教程博客，你能成功运行起来，效果如下

 三：封装自己个性化后的组件

代码中注释我写的十分详细了，自己留心看一下，肯定能看懂的，有些方法是这个组件官方提供的方法，记得看开头提供的官方文档里！【例如获取编辑后图片的base64数据的这个方法，就是官方文档里有介绍的】 

注意：里面图片的获取，我使用的是sessionStorage，你可以通过组件通讯来传递，或者其他方法。

四：在需要使用该组件的页面引入即可

  
 
...
...

// 引入tui-image-editor绘图组件
import SignImage from '@/components/SignImageComponent/SignImage.vue'

export default {
  components: {
...
    SignImage
  },
....
}

五：效果演示（基于我的业务个性化后的样子）

大屏幕（web端）效果

 小屏幕（移动端）效果

 我在代码里加入了屏幕宽度的判定，当屏幕宽度小于一定的范围，我就渲染小画布，反之，渲染大画布，这样就不会出现图片特别大，移动端无法拖动画布的情况（这个组件会根据画布的最大宽高来等比缩放图片）

同时，也在图片左下角插入了一段文字，具体实现方法看代码中的注释~