利用cropper制作图片裁剪，且不失真

废话不多说，上代码;
先把css和js引入进来，如果是webpack项目可以自行npm下载

<link rel="stylesheet" type="text/css" href="css/ImgCropping.css" />
<link rel="stylesheet" type="text/css" href="css/cropper.min.css" /><script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/cropper.min.js" type="text/javascript" charset="utf-8"></script>

开始编写代码结构：

<div style="display: flex;align-items: flex-start;"><span>默认图：</span><img src="data:image/manbig.png"></div>
<div class="headModel" style="margin-top: 24px;"><label class="headUpload" id="replaceImg"><button>上传头像</button></label>
</div>
<!--图片裁剪框 start-->
<div style="display: none;" class="tailoring-container"><div class="black-cloth" onclick="closeTailor(this)"></div><div class="tailoring-content"><div class="tailoring-content-one"><label title="上传图片" for="chooseImg" class="l-btn choose-btn"><input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg"class="hidden" onchange="selectImg(this)">选择图片</label><div class="close-tailoring" onclick="closeTailor(this)">×</div></div><div class="tailoring-content-two"><div class="tailoring-box-parcel"><img id="tailoringImg"></div><div class="preview-box-parcel"><p>图片预览：</p><div class="square previewImg"></div><div class="circular previewImg"></div></div></div><div class="tailoring-content-three"><button class="l-btn cropper-reset-btn">复位</button><button class="l-btn cropper-rotate-btn">旋转</button><button class="l-btn cropper-scaleX-btn">换向</button><button class="l-btn sureCut" id="sureCut">确定</button></div></div>
</div>
<div class="after_uploading"><span>裁剪后的图片：</span><img src="" alt="" width="100%" height="100%">
</div>
<!--图片裁剪框 end-->

最重要的JavaScript来了：
设置弹出框水平垂直居中

(window.onresize = function() {var win_height = $(window).height();var win_width = $(window).width();if (win_width <= 768) {$(".tailoring-content").css({"top": (win_height - $(".tailoring-content").outerHeight()) / 2,"left": 0});} else {$(".tailoring-content").css({"top": (win_height - $(".tailoring-content").outerHeight()) / 2,"left": (win_width - $(".tailoring-content").outerWidth()) / 2});}
})();

弹出图片裁剪框

$("#replaceImg").on("click", function() {$(".tailoring-container").toggle();
});

图像上传

function selectImg(file) {if (!file.files || !file.files[0]) {return;}var reader = new FileReader();reader.onload = function(evt) {var replaceSrc = evt.target.result;//更换cropper的图片$('#tailoringImg').cropper('replace', replaceSrc, false); //默认false，适应高度，不失真}reader.readAsDataURL(file.files[0]);
}

cropper图片裁剪设置

$('#tailoringImg').cropper({aspectRatio: 1 / 1, //默认比例preview: '.previewImg', //预览视图guides: false, //裁剪框的虚线(九宫格)autoCropArea: 0.5, //0-1之间的数值，定义自动剪裁区域的大小，默认0.8movable: false, //是否允许移动图片dragCrop: true, //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域movable: true, //是否允许移动剪裁框resizable: true, //是否允许改变裁剪框的大小zoomable: false, //是否允许缩放图片大小mouseWheelZoom: false, //是否允许通过鼠标滚轮来缩放图片touchDragZoom: true, //是否允许通过触摸移动来缩放图片rotatable: true, //是否允许旋转图片crop: function(e) {// 输出结果数据裁剪图像。console.info('实时的裁剪尺寸'+(dataURLtoFile($('#tailoringImg').cropper('getCroppedCanvas').toDataURL('image/png'), 'file').size/1024).toFixed(2) + 'KB')}
});

裁剪图片旋转功能

$(".cropper-rotate-btn").on("click", function() {$('#tailoringImg').cropper("rotate", 45);
});

裁剪图片复位功能

$(".cropper-reset-btn").on("click", function() {$('#tailoringImg').cropper("reset");
});

裁剪图片换向功能

var flagX = true;
$(".cropper-scaleX-btn").on("click", function() {if (flagX) {$('#tailoringImg').cropper("scaleX", -1);flagX = false;} else {$('#tailoringImg').cropper("scaleX", 1);flagX = true;}flagX != flagX;
});

裁剪后的处理

$("#sureCut").on("click", function() {if ($("#tailoringImg").attr("src") == null) {return false;} else {var cas = $('#tailoringImg').cropper('getCroppedCanvas'); //获取被裁剪后的canvasvar base64url = cas.toDataURL('image/png'); //转换为base64地址形式if (base64url.split(',')[0] == 'data:') {alert('请选择图片后再试！')return;}var formData = new FormData();formData.append("file", dataURLtoFile(base64url, 'file'));//关闭裁剪框closeTailor();/* 上传图片代码 */$(".after_uploading img").attr("src", base64url); //显示图片/* 上传图片代码 */}
});

关闭裁剪框

function closeTailor() {$(".tailoring-container").toggle();
}

将base64转换为文件

function dataURLtoFile(dataurl, filename) { var arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, {type: mime});
}

以上就是裁剪图片的方法，欢迎大家一起讨论。
ps：个人主页附有demo，需要的自行下载，顺便点个赞哦

利用cropper制作图片裁剪，且不失真相关推荐

一个利用html5的图片裁剪功能（已解决ios压扁缩放等bug）
推荐: 这一篇文章是早年为了解决图片裁剪的探索性文章,现在已经开放出了falsh版及html5版本的图片裁剪插件,各位有时间可以看看: 浮士德html5图片裁剪器2016开源版浮士德头像裁剪flas ...
cropper（图片裁剪插件）
https://github.com/fengyuanchen/cropper cropper使用说明一.特性 jQuery v1.9.1以上版本支持插件有38个options,27种method ...
利用photoshop制作图片壁纸
步骤: (1)打开图片,ctrl+c复制图层,ctrl+n新建图层,ctrl+v复制图层得到图层一 (2)新建透明图层,命名为图层2,设置前景色(R:127 G:202 B:250) (3) 利用油漆 ...
cropper.js图片裁剪的使用
1.安装 npm install cropperjs 2.在main.js引入cropper的css样式(一定要加,一定要加,一定要加) import 'cropperjs/dist/cropper. ...
利用scrollTop 制作图片无缝滚动
<!doctype html> <title>javascript无缝滚动 by 司徒正美</title> <meta charset="utf-8 ...
利用background-position 制作图片爆炸的效果
思路: 效果: <html lang="en"> <head> <meta charset="utf-8"> <met ...
js截取图片裁剪图片之cropper.js插件用法详解
js截取图片裁剪图片之cropper.js插件用法详解源码:https://github.com/fengyuanchen/cropper 引入+使用 <link href="/p ...
图片裁剪的js有哪些（整理）
图片裁剪的js有哪些(整理) 一.总结一句话总结:如果用了amaze框架就去amaze框架的插件库里面找图片裁剪插件,如果没用,jcrop和cropper都不错. 1.amazeui的插件库中有很多 ...
使用JCrop进行图片裁剪，裁剪js说明，裁剪预览，裁剪上传，裁剪设计的图片处理的工具类和代码
1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/ 案例效果如下: 2.引入JCrop的js代码,具体要引入那 ...

利用cropper制作图片裁剪，且不失真

利用cropper制作图片裁剪，且不失真相关推荐

最新文章

热门文章