发现一个牛逼的图片编辑器！

程序员老鱼

发布于 2022-12-02 10:11:59

1.7K1

发布于 2022-12-02 10:11:59

文章被收录于专栏：前端实验室

大家好,我是前端实验室的大师兄!一名资深的互联网玩家，专注分享大前端领域技术、面试宝典、学习资料。

最近老板提出一个新的需求，要求用户上传图片时可以对图片进行旋转、标注、裁剪、滤镜、添加文本等等编辑功能。我就想那铁定不能自己写啊，我还要留出更多时间找对象呢...

终于，大师兄在 Github 找到了这款功能强大、界面还很美观的图片编辑器！

效果展示

1.图标标注

2.画画

3.裁剪

4.旋转

5.文字标注

6.滤镜

也不知道是妹子好看还是这款图片编辑器功能强大...

废话不多说，我们来看如何使用吧~

安装

npm

$ npm install --save tui-image-editor # Latest version

CDN

<link
  rel="stylesheet"
  href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css"
/>
<script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>

用法

HTML

<template>
    <div class="container">
      <div id="tui-image-editor"></div>
    </div>
</template>

javascript

methods: {
 init() {
  this.instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
   includeUI: {
    loadImage: {
     path: "src/assets/wallhaven-1jvld9.jpg",
     name: 'image'
    },
    menu: ['resize', 'crop', 'rotate', 'draw', 'shape', 'icon', 'text',
    'filter'], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask
    initMenu: 'draw', // 默认打开的菜单项
    menuBarPosition: 'bottom', // 菜单所在的位置
    locale: locale_zh, // 本地化语言为中文
   },
   cssMaxWidth: 1000, // canvas 最大宽度
   cssMaxHeight: 800 // canvas 最大高度
  })
  document.getElementsByClassName('tui-image-editor-main')[0].style.top = '80px' // 调整图片显示位置
 },
},

这样一个简单的图片编辑器就实现啦！