cropper设置头像图片大小裁剪代码



56 221 74



特效描述:cropper 头像图片大小裁剪,cropper.js制作头像图片裁剪,设置调整图片大小,点击按钮确认生成图片裁剪代码。可以通过Base64编码导出剪裁后的图片。支持手机端演示。

代码结构

1. 引入CSS

<link rel="stylesheet" href="dist/Cropper.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">

2. 引入JS

<script src="dist/cropper.js"></script>

3. HTML代码

	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"
	         style="position:absolute">
	        <symbol viewBox="0 0 315.58 315.58" id="icon-frame-landscape">
	            <path d="M310.58 33.331H5a5 5 0 0 0-5 5v238.918a5 5 0 0 0 5 5h305.58c2.763 0 5-2.238 5-5V38.331c0-2.762-2.237-5-5-5zm-25 209.055l-68.766-71.214a2.047 2.047 0 0 0-2.823-.114l-47.695 41.979-60.962-75.061a2.007 2.007 0 0 0-1.63-.756 2.043 2.043 0 0 0-1.597.822L30 234.797V63.331h255.58v179.055z"></path>
	            <path d="M210.059 135.555c13.538 0 24.529-10.982 24.529-24.531 0-13.545-10.991-24.533-24.529-24.533-13.549 0-24.528 10.988-24.528 24.533 0 13.548 10.98 24.531 24.528 24.531z"></path>
	        </symbol>
	    </svg>
	<div class="container">
		<h1>js-cropper</h1>
		<br>
		<br>
		<div class="row">
			<div>
				<h3>Demo</h3>
				<div id="crop"></div>
			</div>
			<div>
				<h3>Preview (base64)</h3>
				<button onClick="showResult()" title="Update preview">点击这里开始剪裁图片</button>
				<br>
				<img src="" alt="" id="result">
			</div>
		</div>
		<br>
		<h4>API Demo</h4>
		<label for="data">Data (json):</label>
		<br>
		<textarea name="data" id="data" rows="10"></textarea>
		<br>
		<button onClick="getData()">cropper.getData()</button>
		<button onClick="setData()">cropper.setData(data)</button>
	</div>
	<script type="text/javascript">
		var cropper = new Cropper({
	            onInit: function (crop) {
	                console.info("Cropper is ready");
	            },
	            onChange: function (crop) {
	                console.log("onChange callback");
	            }
	        });
	        cropper.render("#crop");
	        cropper.loadImage("img/big.jpg").then(function (crop) {
	            console.info("Image is ready to crop.");
	        });
	        function showResult() {
	            document.getElementById("result").src = cropper.getCroppedImage();
	        }
	        function getData() {
	            document.getElementById("data").value = JSON.stringify(cropper.getData(), null, 2);
	        }
	        function setData() {
	            cropper.setData(JSON.parse(document.getElementById("data").value));
	        }
	</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 拖动 拖拽 拖动插件 拖拽插件 图片拖动 图片拖拽

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到