jQuery+html5 canvas实现新浪微博头像裁切预览代码 - 酷炫特效,js特效,css3特效,html5特效 - CSS模版园-免费网站模版下载
当前位置 CSS模版园 >> 酷炫特效 >> jQuery+html5 canvas实现新浪微博头像裁切预览代码

jQuery+html5 canvas实现新浪微博头像裁切预览代码

jQuery+html5 canvas实现新浪微博头像裁切预览代码

采用html5元素canvas标签预览裁剪图片

采用canvas.getDataURL函数获取裁剪图片数据预览图片

1、引入js

<script type="text/javascript" src="js/cropbox.js"></script>

2、使用方式:

html代码,由图可看出,网页分为2部分:左边功能区、右边预览区,左功能区分为:上图片选择区、下按钮区

<!--大图片框-->
<div class="imageBox">
	<div class="thumbBox"></div>
	<div class="spinner" style="display: none">Loading...</div>
</div>

<!--选择上传图片按钮-->
<a href="javascript:void(0)"> <label for="upload-file" >上传图像</label></a>
<input type="file" class="" name="upload-file" id="upload-file" />

<!--图片裁剪、放大、缩小 按钮-->
<input type="button" id="btnCrop"  class="Btnsty_peyton" value="裁切">
<input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"  >
<input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >

<!--右侧预览-->
<div class="cropped"></div>

js

var options ={
	thumbBox: '.thumbBox',
	spinner: '.spinner',
	imgSrc: 'images/avatar.jpg'
}
var cropper = $('.imageBox').cropbox(options);

//选择图片
$('#upload-file').on('change', function(){
	var reader = new FileReader();
	reader.onload = function(e) {
		options.imgSrc = e.target.result;
		cropper = $('.imageBox').cropbox(options);
	}
	reader.readAsDataURL(this.files[0]);
	this.files = [];
});
//裁切
$('#btnCrop').on('click', function(){
	var img = cropper.getDataURL();
	$('.cropped').html('');
	$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
	$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
	$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
})

//放大
$('#btnZoomIn').on('click', function(){
	cropper.zoomIn();
})
//缩小
$('#btnZoomOut').on('click', function(){
	cropper.zoomOut();
})

声明本站所有资源仅供学习与参考,请勿用于商业用途。转载请注明来自:cssteach.com

原文http://cssteach.com/html/show-13-198.html

推荐模版

热门网站模版

猜您喜欢

热门网站模版

热门网站模版

评论

若文章内容有错误或无法下载,请在回复中说明(可无需登录,直接评论)