imagecropperを採用する.jss+canvasトリミング後のマルチサイズの画像プレビューを実現

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(" "));
};






	

		  
		  ＃ホゾン＃
		
		
		

			
			 に る
			 に  

			
			

				
				     ，180x180  
				
				
				      100x100  

				
				      50x50