JS 之图片编辑器插件

今天跟大家分享下JS 之图片编辑器插件的知识。

1 图片编辑器插件Filerobot

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

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

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

2 初始化插件

filerbot的使用方法非常简单，实例化一个ImageEditor对象，然后通过它打开你想要编辑的图片即可。

const ImageEditor = new FilerobotImageEditor();
ImageEditor.open('https://scaleflex.airstore.io/demo/stephen-walker-unsplash.jpg');

3 作为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"/><FilerobotImageEditorshow={show}src={src}onClose={() => { toggle(false) }}/></div>)
};render(<App/>, document.getElementById('app'));

关于JS 之图片编辑器插件，你学会了多少？欢迎在留言区评论！

JS 之图片编辑器插件相关推荐

html图片编辑器插件,js图片编辑器插件Filerobot
Filerobot是一款js图片编辑器插件.Filerobot可以对图片进行修改尺寸,剪裁,旋转,以及使用内置的滤镜对图片进行过滤. 使用方法在页面中引入下面的文件. 初始化插件 filerbot的 ...
js图片编辑器插件Filerobot
Filerobot是一款js图片编辑器插件.Filerobot可以对图片进行修改尺寸,剪裁,旋转,以及使用内置的滤镜对图片进行过滤. Filerobot-js图片编辑器插件的github网址为:htt ...
JS导出PDF插件（支持中文、图片使用路径）
JS导出PDF插件(支持中文.图片使用路径) 原文:JS导出PDF插件(支持中文.图片使用路径) 在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfma ...
CheckCode.js 前端验证码插件
CheckCode.js 前端验证码插件效果截图插件使用方法 CheckCode.js 本插件的参考示例效果截图插件使用方法 // 在html页面引入CheckCode.js <scri ...
js Grid - 列表插件
js Grid - 列表插件 1)Sponsor Flip Wall With jQuery & CSS一个非常不错的显示数据到网格里的插件. 点击后,缩略图会翻转,然后显示更多信息 ...
sortable 拖拽时互换目标的位置_双端通用型JS拖拽插件的封装与应用
最近工作中遇到一个需求,需要将一个元素从某位置拖动到另一固定位置后执行某一交互行为,具体效果如下: 这个看似简单的需求,然而实现起来却并不那么顺利.我首先想到的是如何通过哪个现有的插件来快速解决这个问 ...
sublime text3安装js提示的插件
今天安装Sublime Text3的js插件,在网上查了很多资料,为了方便以后看,写一个安装插件的总结和方法. 要安装js相关的插件,就要先安装一个Package Control(插件管理器)的插件, ...
直接拿来用！Vue.js 第三方常用插件盘点 | CSDN 博文精选
作者 | 张猛责编 | 伍杏玲出品 | CSDN 博客 [CSDN 编者按]作者介绍几个Vue.js常用的插件和用法,简单实用,你可以直接拿来用! Vue.js DevTools 用于开发调试Vu ...
Js与flash交互：在html页面中用js与MyReport插件交互
<sdt id="89512093" sdtgroup="t" contentlocked="t" sdtlocked="t ...

JS 之图片编辑器插件

1 图片编辑器插件Filerobot

2 初始化插件

3 作为React组件使用

JS 之图片编辑器插件相关推荐

最新文章

热门文章

JS 之 图片编辑器插件

1 图片编辑器插件Filerobot

2 初始化插件

3 作为React组件使用

JS 之 图片编辑器插件相关推荐

最新文章

热门文章

JS 之图片编辑器插件

JS 之图片编辑器插件相关推荐