图片上传和裁剪应用:Croppie

原创文章 作者:月光光 2015年11月27日 15:30helloweba.com 标签:文件上传  HTML5 

在很多应用需要上传本地图片然后再按尺寸适当裁剪以符合网站对图片尺寸的要求。最常见的就是各用户系统要求用户上传和裁剪头像的应用。今天我给大家介绍的是一款基于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中。

更多详情请关注Croppie项目官网:https://github.com/Foliotek/Croppie

声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/336.html

7条评论

  • baitwoWN

    你好,我想使用rem像素单位实现自适应,怎么做啊?谁能告诉我

  • baitwoWN

    源代码不行啊

  • 跨省少年

    查看 演示 有问题

  • 火狐上没有反应

  • 怎么有这个裁切多多张图???
    它下面只有一个裁切的函数。

    我还要复制他的函数再资写一个????

  • 不行

  • 火狐43.0.4版本不行,点了没反应