Filerobot是一款js图片编辑器插件。Filerobot可以对图片进行修改尺寸，剪裁，旋转，以及使用内置的滤镜对图片进行过滤。

使用方法

在页面中引入下面的文件。

初始化插件

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 (

Filerobot Image Editor

{ toggle(true) }} alt="example image"/>

show={show}

src={src}

onClose={() => { toggle(false) }}

)

};

render(, document.getElementById('app'));

html图片编辑器插件,js图片编辑器插件Filerobot相关推荐

web打印插件 js打印插件网页打印插件
平常浏览网页和文档的时候,随处可见打印两个字,有时候不小心点到,就会弹出一个打印的页面,如果连接了打印机,可以直接调用到打印机进行真实的打印.做为开发人员我们在网页开发过程中经常会有打印页面的需求,目 ...
javascript功能插件大集合前端常用插件 js常用插件
包管理器管理着 JavaScript 库,并提供读取和打包它们的工具. npm:npm 是 JavaScript 的包管理器.官网 Bower:一个 web 应用的包管理器.官网 component ...
js图片编辑器插件Filerobot
Filerobot是一款js图片编辑器插件.Filerobot可以对图片进行修改尺寸,剪裁,旋转,以及使用内置的滤镜对图片进行过滤. Filerobot-js图片编辑器插件的github网址为:htt ...
自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)
这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入. 当你用$.load("dir/my-pa ...
WdatePicker，js日期插件，时间相加
//WdatePicker,js日期插件 //点击一个日期选择框后,得到日期,然后另一个日期选择框的日期自动加上一天 function pickedFunc(){ $ ...
js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable
js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 参考文章: (1)js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable ...
java mvc 分页查询条件_java分页条件查询-GridManager.js表格插件+Pageable分页对象+mybatis pagehelper分页插件...
总览: 一. GridManager.js表格插件直接上插件API:链接地址感觉该插件简单好用,插件作者也是有问必答,nice 二. 添加依赖后端: pom文件添加: 1.7.0.RELEASE ...
webpack常用的三种JS压缩插件
这里讲解三种JS 打包插件: (1)UglifyJS 支持: babel present2015.webpack3 缺点: 它使用的是单线程压缩代码,也就是说多个js文件需要被压缩,它需要一个个文 ...
[js插件]JqueryUI日期插件
引言之前使用jqueryUi中的弹出框做了一个可拖拽的弹出登录框,也顺便将里面的常用的日期插件和文本框智能提示插件,也学习了一下. 使用方法首先在项目中引入以下文件: 1 <!-- 日期插件 ...

html图片编辑器插件,js图片编辑器插件Filerobot

Filerobot Image Editor

html图片编辑器插件,js图片编辑器插件Filerobot相关推荐

最新文章

热门文章