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

来源：互联网发布：辽宁省软件协会编辑：程序博客网时间：2024/06/01 21:15
<!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 onload="init();"><div id="container"><a id="selectBtn" href="javascript:void(0);" onclick="document.getElementById('input').click();">选择</a><a id="saveBtn" href="javascript:void(0);" onclick="saveImage();">保存</a><input type="file" id="input" size="10" style="visibility:hidden;" onchange="selectImage(this.files)" /><div id="wrapper"><canvas id="cropper"></canvas><a id="rotateLeftBtn" href="javascript:void(0);" onclick="rotateImage(event);">向左旋转</a><a id="rotateRightBtn" href="javascript:void(0);" onclick="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