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

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

快速体验

  • 首选在你的前端项目中安装:
npm i tui-image-editor
// or
yarn add tui-image-editor
  • 现在你就去新建一个.vue文件,复制进去下面这段代码:

默认效果:

默认效果图

国际化:

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

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

汉化后

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


自定义样式效果

自定义样式效果
我们将上面的默认图片,LoadDownload按钮去掉了,但是会发现上面存在了一条白色的,这就浪费了我们编辑图片的空间,我们继续优化:

需要我们对样式进行修改
// ...
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
  }
}

最后,放上一段完整的代码:




最终效果,战歌起!

最终效果

最后

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

你可能感兴趣的