图片处理利器-CSDN博客

本文链接：https://blog.csdn.net/qq_20343517/article/details/87919374

这篇文章有几个功能，第一个是支持拖拽，第二个是压缩，第三个是裁剪编辑，第四个是上传和上传进度显示。

1、拖拽上传

拖拽读取图片的功能主要是监听HTML5的 drag 事件，这个没什么好说的，查查API就知道怎么做的，主要在于怎么读取用户拖过来的图片并他把转成base64以在本地显示出来，代码如下：

2、压缩图片

压缩图片可以借助canvas，canvas可以很方便的实现压缩，其原理是把一张图片画到一个小的画布，然后再把这个画布的内容导出base64，就能够拿到一张被压小的图片了，修改上面代码如下

3、裁剪图片

裁剪图片，使用了一个 cropper 插件，这个插件还是挺强大的，支持裁剪、旋转、翻转，但是他并没有对图片真正的处理，只是记录了用户做了哪些变换，然后你自己再去处理，官方文档在这里，只要仔细阅读就可以上手了，

下面附上完整代码

<html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link  href="cropper.css" rel="stylesheet">
  <script src="http://code.jquery.com/jquery-2.2.4.min.j

前端图片处理