用cropper截取的图片怎么以图片文件形式获取保存在本地？cropper默认输出base64

????' 2018-06-07 09:28:42

用cropper截取的图片怎么以图片文件形式获取保存在本地？cropper默认输出base64，但是图片比较大的话base64码就会非常非常长

...全文

1388 3 打赏收藏转发到动态举报

写回复

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

ambit_tsai-微信 2018-06-07

打赏
举报

回复

FileSaver.js了解一下

????' 2018-06-07

打赏
举报

回复

要用js实现啊

cropper非常强大，做出的图片裁剪插件不失真，可用于裁剪图片，banner,头像等等

cropper有两种方式上传截取的图片数据，一种是前端把裁剪的数据传到后台进行裁剪后保存，第二种是前端拿到剪裁后的数据，转成base64后上传，cropper图片裁剪案例java-base64上传

利用Cropper.js进行图片剪裁并上传。随便搞了个php后台，代码可以直接放到www目录下直接运行。(ps：没有实现多图片上传，且代码写的不好，代码上传利用了base64，后台接收base64直接用字符串截取掉然后直接转成图片，这里是特别提醒，希望大家能下载到对自己有用的资源，，，请谨慎下载)

react-easy-crop 一个 React 组件，可以通过简单的交互来裁剪图像/视频演示查看示例：带有钩子的基本示例带有类的基本示例带有裁剪图像输出的示例带有用户选择的图像的示例（+ 自动旋转手机图片) 圆形裁剪区域和无网格示例没有限制位置的示例保存/加载到/从本地存储的裁剪示例视频示例功能支持拖动、缩放和旋转交互以像素和百分比提供裁剪尺寸支持任何图像格式 ( JPEG, PNG, 甚至 GIF) 作为 url 或 base64 字符串支持 HTML5 支持的任何视频格式移动友好安装 yarn add react-easy-crop 或 npm install react-easy-crop --save 基本用法裁剪器的样式带有位置：绝对占据其父级的全部空间。因此，你需要用一个使用 position:relative 的元素来包装它，否则裁剪器将填满整个页面。 import Cropper from 'react-easy-crop' class App extends React.Component { state = { image:

效果展示公司需要截取指定大小像素的广告图，并能保存本地，由于第一次使用cropper插件，编写该文。做好笔记！！！功能：截图自定义大小的图片并保存本地，可以用来：制作头像，截取指定格式像素 cropper.js 通过canvas实现图片裁剪，最后在通过canvas获取裁剪区域的图片base64串。 cropper官方文档：cropper.js 前端页面首先要导入对应的插件，这里我是使用的是cdn js文件 <script src="https://cdn.bootcss.co

87,838

社区成员

224,614

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章