jQuery实现图片上传和裁剪插件Croppie
在很多应用需要上传本地图片然后再按尺寸适当裁剪以符合网站对图片尺寸的要求。最常见的就是各用户系统要求用户上传和裁剪头像的应用。今天我给大家介绍的是一款基于HTML5和jQuery的图片上传和裁剪插件,它叫Croppie。
运行效果图:
HTML
首先我们将相关js和css文件载入head中。
<script src="jquery.min.js"></script> <script src="croppie.min.js"></script> <link rel="stylesheet" href="croppie.css">
接下来我们在页面上放置一个图片上传按钮,我们可以用css将type="file"的文件选择控件转成按钮样式。选择完图片后,在#upload-demo展示上传图片,以及调用裁剪插件Croppie。#result用来展示裁剪后的图片。
<div class="actions"> <button class="file-btn"> <span>上传</span> <input type="file" id="upload" value="选择图片文件" /> </button> <div class="crop"> <div id="upload-demo"></div> <button class="upload-result">裁剪</button> </div> <div id="result"></div> </div>
CSS
使用以下CSS代码,我们很完美的将选择文件的控件转成按钮的样式,其实就是将type="file"透明度设成0,然后和button重叠。此外,我们先将图片裁剪区域.crop设置为不可见,等选择文件后再显示。
button, a.btn { background-color: #189094; color: white; padding: 10px 15px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.5); font-size: 16px; cursor: pointer; text-decoration: none; text-shadow: none; } button:focus { outline: 0; } .file-btn { position: relative; } .file-btn input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .actions { padding: 5px 0; } .actions button { margin-right: 5px; } .crop{display:none}
jQuery
首先利用HTML5的FileReader API读取本地文件,然后$('#upload-demo').croppie()调用了Croppie插件。Croppie的选项viewport:可以设置所裁剪图片的宽度和高度,以及类型(圆形或方形);选项boundary是图片的外围尺寸。它还有参数mouseWheelZoom:是否支持鼠标滚轮缩放图像;showZoom:是否展示缩放条工具;update:回调函数。
$(function(){ var $uploadCrop; function readFile(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $uploadCrop.croppie('bind', { url: e.target.result }); } reader.readAsDataURL(input.files[0]); } else { alert("Sorry - you're browser doesn't support the FileReader API"); } } $uploadCrop = $('#upload-demo').croppie({ viewport: { width: 200, height: 200, type: 'circle' }, boundary: { width: 300, height: 300 } }); $('#upload').on('change', function () { $(".crop").show(); readFile(this); }); $('.upload-result').on('click', function (ev) { $uploadCrop.croppie('result', 'canvas').then(function (resp) { popupResult({ src: resp }); }); }); function popupResult(result) { var html; if (result.html) { html = result.html; } if (result.src) { html = '<img src="' + result.src + '" />'; } $("#result").html(html); } });
当点击“裁剪”按钮后,再次调用Croppie的result的方法,返回一张裁剪后的图片,并显示在#result中。
更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。
以上就是jQuery实现图片上传和裁剪的主要过程,希望对大家学习图片上传和裁剪技术有所帮助。
相关文章
两种方法解决javascript url post 特殊字符转义 + & #
本文主要介绍javascript使用url传值的时候数据丢失的问题,希望对大家有所帮助。2016-04-04jQuery方法简洁实现隔行换色及toggleClass的使用
隔行换色的展示效果想必大家早已熟悉了吧,今天在帮大家回忆一下本例中主要用到的方法是toggleClass(),感兴趣的你可不要错过了哈,希望可以帮助到你2013-03-03jquery实现滑屏大图定时收缩为小banner图片的广告代码
这篇文章主要介绍了jquery实现滑屏大图定时收缩为小banner图片的广告代码,可实现大幅广告图的渐显效果及定时收缩功能,点击左上角关闭按钮还可隐藏广告图片,非常具有实用价值,需要的朋友可以参考下2015-09-09jQuery探测位置的提示弹窗(toolTip box)详细解析
提示弹窗(toolTip box)经常会被用到,但是本文总要的不是弹,也不是窗,而是探测位置,在适当的地方弹窗。需要的朋友可以过来参考下,希望对大家有所帮助2013-11-11
最新评论