JQUERY插件-Filerobot图片编辑器JS插件JQUERY插件下载

FileRobot是一个JS图像编辑器。FileRobot可以修改图像的大小、裁剪、旋转和使用内部过滤器过滤图像。

在页面中引入CSS和JS文件

<script src="js/filerobot-image-editor.min.js.js"></script>

初始化插件

filerbot的使用方法非常简单,实例化一个ImageEditor对象,然后通过它打开你想要编辑的图片即可。
const ImageEditor = new FilerobotImageEditor();
ImageEditor.open('https://scaleflex.airstore.io/demo/stephen-walker-unsplash.jpg');
作为React组件使用

安装:
$ npm install --save filerobot-image-editor

使用:
import React, { useState } from 'react';
import { render } from 'react-dom';
import FilerobotImageEditor from 'filerobot-image-editor';

const App = () => {
  const src = 'https://scaleflex.airstore.io/demo/stephen-walker-unsplash.jpg';
  const [show, toggle] = useState(false);
 
  return (
    <div>
      <h1>Filerobot Image Editor</h1>
      <img src={src} onClick={() => { toggle(true) }} alt="example image"/>
      <FilerobotImageEditor
        show={show}
        src={src}
        onClose={() => { toggle(false) }}
      />
    </div>
  )
};

render(<App/>, document.getElementById('app'));
GitHub地址:https://github.com/scaleflex/filerobot-image-editor
在线预览 网盘下载

查看如下隐藏内容里的“提取码”:

关注公众号 关注公众号,发送消息“查看密码”,输入系统回复的“查看密码”,点击“确定”按钮,即可看到“提取码”。

发表评论