介绍

http://ui.toast.com/tui-image-editor

npm i tui-image-editor -S

强大的图片编辑器，可直接调用，或者通过 api 调用编辑器的能力

使用

依赖于 fabric ，安装时会安装 node 版本，windows 安装起来比较困难；

可通过引用 .min.js 版的打包库文件来使用。

<div class="tui-image-editor"></div>

<script src="https://api-storage.cloud.toast.com/v1/AUTH_e18353c4ea5746c097143946d0644e61/toast-ui-cdn/tui-image-editor/v3.11.0/example/fabric-v4.2.0.js"></script>
<script src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
<script src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.min.js"></script>
<script type="text/javascript" src="../dist/tui-image-editor.js"></script>

<script>
  // Image editor
  var imageEditor = new tui.ImageEditor(".tui-image-editor", {
    cssMaxWidth: 700,
    cssMaxHeight: 500,
    selectionStyle: {
      cornerSize: 20,
      rotatingPointOffset: 70,
    },
  });
</script>