采用imagecropper.jss+canvas实现裁剪后多尺寸的图像预览

采用imagecropper.jss+canvas实现裁剪后多尺寸的图像预览


<!doctype html>
<html>

<head>
<meta name="Author" content="flashlizi - www.riaidea.com">
<meta name="Description" content="HTML5 experiment">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>头像上传组件 - HTML5版</title>

<style>
body
{
	padding: 0;
	margin: 0;	
	height: 100%;
	background-color: #eee;
	font-size: 12px;
	color: #666;
}

a
{
	text-decoration: none;
	color: #333;
}

a:hover
{
	text-decoration: none;
	color: #f00;
}

#container
{
	position: absolute;
	left: 20px;
	top: 20px;
}

#wrapper
{
	position: absolute;
	left: 0px;
	top: 40px;
}

#cropper
{
	position: absolute;
	left: 0px;
	top: 0px;
	border: 1px solid #ccc;
}

#previewContainer
{
	position: absolute;
	left: 350px;
	top: 60px;
}

.preview
{
	border: 1px solid #ccc;
}

#selectBtn
{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 119px;
	height: 27px;
	
}

#saveBtn
{
	position: absolute;
	left: 150px;
	top: 0px;
	width: 67px;
	height: 27px;
	
}

#rotateLeftBtn
{
	position: absolute;
	left: 0px;
	top: 315px;
	width: 100px;
	height: 22px;
	padding-left: 25px;
	padding-top: 2px;
	
}

#rotateRightBtn
{
	position: absolute;
	left: 225px;
	top: 315px;
	width: 50px;
	height: 22px;
	padding-right: 25px;
	padding-top: 2px;
	
}

</style>

<!--<script type="text/javascript" src="ImageCropper.js"></script>-->
<script type="text/javascript" src="imagecropper.js"></script>
<script type="text/javascript">

var cropper;

function init()
{	
	cropper = new ImageCropper(300, 300, 180, 180);
	cropper.setCanvas("cropper");
	cropper.addPreview("preview180");
	cropper.addPreview("preview100");
	cropper.addPreview("preview50");

	if(!cropper.isAvaiable())
	{
		alert("Sorry, your browser doesn't support FileReader, please use Firefox3.6+ or Chrome10+ to run it.");
	}
}

function selectImage(fileList)
{
	cropper.loadImage(fileList[0]);
}

function rotateImage(e)
{
	switch(e.target.id)
	{
		case "rotateLeftBtn":
			cropper.rotate(-90);
			break;
		case "rotateRightBtn":
			cropper.rotate(90);
			break;
	}
}


function saveImage()
{
	var imgData = cropper.getCroppedImageData(140, 140);
	console.log(imgData);
	
	var p_url='<?php echo $this->U("userAvatar/ajaxCheckUploadImg");?>';
	var p_data={ImgData:imgData};

	$.post(p_url,p_data,function(data){		
		console.log(data);
		data = eval('(' + data + ')');
		if( data.success )
		{
			window.location.reload();
		}else{
			var d = dialog({				
				fontsize:10,
				content: '上传失败!请重新上传',
				quickClose: true
			}).showModal();
			setTimeout(function () {
			    d.close().remove();
			}, 2000);
		}
	})
	
}

function trace()
{
	if(typeof(console) != "undefined") console.log(Array.prototype.slice.apply(arguments).join(" "));
};

</script>

</head>

<body οnlοad="init();">
	<div id="container">
		<a id="selectBtn" href="javascript:void(0);" οnclick="document.getElementById('input').click();">选择</a>
		<a id="saveBtn" href="javascript:void(0);" οnclick="saveImage();">保存</a>
		<input type="file" id="input" size="10" style="visibility:hidden;" οnchange="selectImage(this.files)" />
		
		<div id="wrapper">
			<canvas id="cropper"></canvas>
			<a id="rotateLeftBtn" href="javascript:void(0);" οnclick="rotateImage(event);">向左旋转</a>
			<a id="rotateRightBtn" href="javascript:void(0);" οnclick="rotateImage(event);">向右旋转</a>

			<span id="status" style="position:absolute;left:350px;top:10px;width:100px;"></span>
			<div id="previewContainer">
				<canvas id="preview180" width="180" height="180" class="preview"></canvas>
				<span style="display:block;width:100%;padding-top:5px;text-align:center;">大尺寸图片,180x180像素</span>
				
				<canvas id="preview100" width="100" height="100" style="position:absolute;left:230px;top:0px;" class="preview"></canvas>
				<span style="position:absolute;left:230px;top:110px;width:100px;text-align:center;">中尺寸图片 100x100像素</span>

				<canvas id="preview50" width="50" height="50" style="position:absolute;left:255px;top:150px;" class="preview"></canvas>
				<span style="position:absolute;left:245px;top:210px;width:70px;text-align:center;">小尺寸图片 50x50像素</span>
			</div>
		</div>
		
	</div>
</body>
</html>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: jss.Serialize 是 JSON 序列化的方法,用于将一个对象序列化为 JSON 字符串。它是 JavaScriptSerializer 类的一个方法,该类是一个 .NET Framework 提供的 JavaScript 对象表示法(JSON)序列化器,用于将 .NET 类型序列化为 JSON 数据格式。jss.Serialize 方法接受一个 object 类型的参数,并返回一个 JSON 字符串,该字符串表示该对象的 JSON 表示形式。在序列化期间,jss.Serialize 方法将对象的公共属性和字段转换为 JSON 对象的属性和值。如果对象包含嵌套对象,则 jss.Serialize 方法将递归序列化该对象,并将其嵌套在父对象中。通过将对象序列化为 JSON 字符串,我们可以将数据传输到客户端或其他应用程序,并在需要时将其反序列化为对象以进行操作。 ### 回答2: jss.Serialize是一个可以将对象转换为字符串格式的方法。"jss"是JavaScriptSerializer类的一个实例,该类是在.NET Framework中用于序列化和反序列化对象的工具。Serialize方法可以将.NET对象转换为JSON格式的字符串,以便在网络传输或存储中使用。 通过使用jss.Serialize方法,我们可以将包含对象数据的.NET对象转换为可以在不同环境或平台上进行传输、存储和解析的字符串。这种序列化的字符串格式通常是JSON(JavaScript Object Notation),它是一种轻量级的数据交换格式,易于阅读和编写,并且可以跨不同类型的应用程序进行互操作性。 使用jss.Serialize方法可以将.NET对象转换为字符串,例如我们可以将一个包含学生信息的对象转换为JSON字符串,然后将其发送到服务器或存储到数据库中。在接收端,我们可以使用反序列化的方法将JSON字符串转换为.NET对象,以便对其进行操作和处理。 总而言之,jss.Serialize是一个用于将.NET对象转换为JSON格式字符串的方法,可以方便地实现对象的传输、存储和解析。这种序列化方式广泛应用于Web开发、移动应用和数据交换等领域。 ### 回答3: jss.Serialize是指将一个对象序列化为JSON格式的字符串的过程。序列化是将对象转换为可存储或传输的特定格式的过程,而JSON是一种常用的数据交换格式,适用于不同编程语言之间的数据传输和存储。 在编程中,我们经常需要将对象转换为字符串形式,以便在网络传输或存储时使用。jss.Serialize是一种用于实现这一目的的方法或工具。它将包含对象属性和值的数据结构转换为JSON格式的字符串,其中属性和值以键值对的形式表示,并使用大括号和逗号进行分隔。 使用jss.Serialize通常需要一个JSON序列化库或类库。在不同的编程语言中,可能会有不同的方法来实现此功能。例如,在C#编程语言中,可以使用Json.net库来进行对象到JSON字符串的序列化操作。 通过jss.Serialize方法,我们可以将一个包含各种数据类型和复杂数据结构的对象转换为字符串,然后在需要时可以将其反序列化为相应的对象。这样可以方便地进行跨平台数据交换和存储,使得不同编程语言之间更容易实现数据的传输和处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值