#jquery+Jcrop剪裁图片。网络图片地址,弹窗实现剪裁,保存,并上传

#jquery+Jcrop剪裁图片。网络图片地址,弹窗实现剪裁,保存,并上传

一、引入jquery.js、jcrop.js、jcrop.css

点击按钮,弹窗加载图片

(注释:1、不要给图片设置样式宽高。 2、样式宽高需要计算和图片原本尺寸比例。 再用比例和截取得到的宽高计算)

使用剪裁插件

var selectArea = ‘’ // 声明变量保存截取的信息
$(‘.被剪裁图片的class|id’).Jcrop({
minSize: [375, 250],
onSelect: updateCoords,
onRelease: cancelSelect
});
function updateCoords©{
console.log(c.x);// x轴
console.log(c.y);// y轴
console.log(c.w);// 宽
console.log(c.h);// 高
selectArea = c
};
function cancelSelect(){
selectArea = ‘’
console.log(‘取消选择’)
};

得到截取后的图片。

添加点击事件,保存图片。(使用的是阿里云图片地址拼接,@后面拼接图片尺寸)http://uimg.liecdn.cn/image/post/69/ee/57/ce/69ee57cee743b0dc6fbdc5710e07c2ab.jpg@0-50-100-100a

保存截取后的图片

加载网络地址,转成file文件上传
fileProcess(endUrl,function (imageObj){
console.log(imageObj)
var fileData = imageObj.newFile
uploader.addFile(fileData) // 上传发送请求
})

//将base64转换为file文件
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.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});

function fileProcess(fileUrl,callBack){
var img = fileUrl;
var imgName = fileUrl.split(‘/’)
var image = new Image();
image.src = img;
// 允许跨域操作
image.setAttribute(“crossOrigin”,‘anonymous’);
image.onload = function(){
console.log(image.width,image.height)
var base64 = getBase64Image(image);
var newFile = dataURLtoFile(base64,imgName[imgName.length-1]);
console.log(newFile)
var imageObj = {
base64: base64,
newFile: newFile,
}
callBack (imageObj)
return imageObj
}
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值