本帖最后由 AreYouGlad 于 2017-12-20 16:25 编辑
我们在日常开发中常常会遇到类似于上传头像,需要对头像图片进行裁剪的操作。cropper这款JQuery插件就为我们解决了这个问题。
效果预览
插件下载
首先,我们可以使用bower或者npm下载cropper
[Bash shell] 纯文本查看 复制代码
bower i cropper
npm i cropper
引入插件
下载完成之后,找到cropper.css和cropper.js文件进行引入,需要注意的地方是cropper是依赖于JQuery的,所以需要提前引入JQuery,并且JQuery的版本必须大于等于1.9.1。
HTML操作
引入文件成功后,我们可以对图片进行裁剪操作了。首先在HTML结构中需要用一个块级元素将我们需要裁剪的素材图片包裹。
JS操作
这样,一个素材可以通过滚轮放大缩小、裁剪框可以拖动、缩放的图片裁剪操作已经完成了。需要注意的是,裁剪区域的宽高是继承自我们的父级元素的,也就是我们的box,所以 box必须可见,我们也可以通过控制box的宽高来修改裁剪区域的宽高。还有一点,如果你要使用跨源图片来作为剪裁图片,请确保你的浏览器支持HTML5 CORS settings attributes,并且你的图片服务器支持Access-Control-Allow-Origin属性。
效果预览
旋转操作
cropper还可以对素材图片进行旋转
裁剪区域展示
对素材图片裁剪完毕之后,我们可以通过getCroppedCanvas得到裁剪获得的canvas,然后通过toDataURL方法将其转换为base64格式的图片,最后将base64赋值给img的src属性,完成裁剪区域的展示。
当然,cropper还有很多强大的功能,具体的操作方法大家可以去cropper的官方网站查看API。地址:http://fengyuanchen.github.io/cropper/。
我也做了个小demo于附件供大家参考。
demo.rar
(96.14 KB, 下载次数: 552)
|