cropperjs达成裁剪图片的具体代码是什么

发布时间：2023-08-12 12:24:08 所属栏目：语言来源：

导读：这篇文章给大家分享的是cropperjs实现裁剪图片的具体代码是什么。小编觉得挺实用的，因此分享给大家做个参考，文中的介绍得很详细，而要易于理解和学习，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。cro

这篇文章给大家分享的是cropperjs实现裁剪图片的具体代码是什么。小编觉得挺实用的，因此分享给大家做个参考，文中的介绍得很详细，而要易于理解和学习，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

cropperjs (裁剪图片)

vue版本

// 下载

// npm install cropperjs -save

// 使用

//1.0 引入

import Cropper from 'cropperjs'

// 2.0初始化裁剪框

data(){

return{

croppable: false // 控制上传后的显隐

}

methods:{

var _this= this;

var image = document.getElementById('image');

this.cropper = new Cropper(image, {

aspectRatio: 1,

viewMode: 1,

background:false,

zoomable:false,

ready: function () {

_this.croppable = true;

}

});

}

jq版本

<!--必须引入 jquery.min.js , cropper.min.js

样式引入 css/cropper.min.css css/ImgCropping.css-->

<body>

</div>

<input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onChange="selectImg(this)">选择图片

</label>

</div>

</div>

</div>

</div>

</div>

</body>

//弹出框水平垂直居中

(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]);

// console.log(file);

}

//cropper图片裁剪

$('#tailoringImg').cropper({

aspectRatio: 16/9,//默认比例

preview: '.previewImg',//预览视图

guides: false, //裁剪框的虚线(九宫格)

autoCropArea: 0.8, //0-1之间的数值，定义自动剪裁区域的大小，默认0.8

movable: false, //是否允许移动图片

dragCrop: false, //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域

movable: true, //是否允许移动剪裁框

resizable: true, //是否允许改变裁剪框的大小

zoomable: false, //是否允许缩放图片大小

mouseWheelZoom: false, //是否允许通过鼠标滚轮来缩放图片

touchDragZoom: true, //是否允许通过触摸移动来缩放图片

rotatable: true, //是否允许旋转图片

crop: function(e) {

// 输出结果数据裁剪图像。

// console.log(e);

}

});

//旋转

$(".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');//获取被裁剪后的canvas

var base64url = cas.toDataURL('image/png'); //转换为base64地址形式

$("#finalImg").prop("src",base64url);//显示为图片的形式

// 将base64转换成file对象

var src = dataURLtoFile(base64url);

console.log(base64url);

console.log(src);

closeTailor(); //关闭裁剪框

}

});

//关闭裁剪框

function closeTailor() {

$(".tailoring-container").toggle();

}

// 转files

function dataURLtoFile (dataurl, filename = 'file') {

let arr = dataurl.split(',')

let mime = arr[0].match(/:(.*?);/)[1]

let suffix = mime.split('/')[1]

let bstr = atob(arr[1])

let n = bstr.length

let u8arr = new Uint8Array(n)

while (n--) {

u8arr[n] = bstr.charCodeAt(n)

}

return new File([u8arr], `${filename}.${suffix}`, {type: mime})

}

</script>

以上就是关于“cropperjs实现裁剪图片的具体代码是什么”的相关知识，感谢各位的阅读。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!