写在前面
–公司有这个需求，安排调查
–目前各大网站都是采用的-前端做裁剪返回坐标-由后端来做到裁剪
–而使用html-canvas画布可以直接前端裁剪并返回base64流-ajax可以直接下载保存
上代码：
注意配置好依赖-有一张png图片依赖
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-type" content="text/html;charset=UTF-8" /><title></title><link rel="stylesheet" href="css/jquery.Jcrop.min.css" /><script src="js/jquery.min.js" type="text/javascript"></script><script src="js/jquery.Jcrop.min.js" type="text/javascript" charset="utf-8"></script><script>$(function() {var imgUrl;$('input[type=file]').change(function() {var file = this.files[0];var reader = new FileReader();reader.onload = function() {// 通过 reader.result 来访问生成的 DataURLvar url = reader.result;setImageURL(url);};reader.readAsDataURL(file);});var image = new Image();function setImageURL(url) {image.src = url;image.id = "target";$("#img").append(image);var cut = document.getElementById("cut");var ctx = cut.getContext("2d");image.onload = function() {$('#target').Jcrop({setSelect:[0, 0, 400, 400],maxSize: [400, 400],minSize: [400, 400],onChange: updatePreview,onSelect: updatePreview,aspectRatio: 1});//裁剪过程中，每改变裁剪大小执行该函数function updatePreview(c) {if(parseInt(c.w) > 0) {ctx.drawImage(image, c.x, c.y, c.w, c.h, 0, 0, 400, 400);imgUrl = cut.toDataURL("image/png"); //.replace("image/png", "image/octet-stream")console.log(c.x, c.y, c.w, c.h);}};}}$("#submit").click(function(){
// console.log(imgUrl);$.post("#",{img:imgUrl},function(result){alert("OK");});window.location.href = imgUrl;})})</script></head><body><canvas id="cut" width="400" height="400"></canvas><input type="file" /><div id="img"></div><input type="button" id="submit" value="submit"/></body>
</html>
代码不是很长-基本已经做到最精简