快给你的Vue项目添加一个编辑图片组件吧

给大家推荐一款功能极其强大的图片编辑插件 tui.image-editor

快速体验

• 首选在你的前端项目中安装：

npm i tui-image-editor
// or
yarn add tui-image-editor

• 现在你就去新建一个.vue文件，复制进去下面这段代码：

默认效果：

国际化：

工具中的描述默认都是英文的我们先把这部分汉化一下：

// 将原有的代码改为这样

汉化后

这时候你会发现你可能不需要右上角的Load和Download和左上角这个默认的logo，我们可以通过自定义主题将这部分改掉：
修改上面的代码为：

自定义样式效果

我们将上面的默认图片,Load和Download按钮去掉了，但是会发现上面存在了一条白色的，这就浪费了我们编辑图片的空间，我们继续优化：

需要我们对样式进行修改

// ...
document.getElementsByClassName("tui-image-editor-main")[0].style.top = 0;

下一步我们要拿到编辑后的图片了：

这个插件提供了一个toDataURL的方法,可以将我们编辑后的图片转为base64,然后我们可以通过转为form表单上传到我们的服务器，或者转为图片，这里提供一份上传到后台的逻辑：

// ...
methods: {
  uploadImg() {
    const base64String = this.instance.toDataURL();
    const data = window.atob(base64String.split(",")[1]);
    const ia = new Uint8Array(data.length);
    for (let i = 0; i < data.length; i++) {
      ia[i] = data.charCodeAt(i);
    }
    const blob = new Blob([ia], { type: "image/png" });
    const fd = new FormData();
    fd.append("image", blob);
    // upload fd
  }
}

最后，放上一段完整的代码：

最终效果，战歌起！

最后

如果有什么疑问或者使用中的其他问题可以在评论中讨论一下。