http://www.jq22.com/demo/uploadimg201812172358/
图片上传截取：
需要引用这3个文件。主要依赖jq。
//html部分
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
http-equiv
=
"x-ua-compatible"
content
=
"ie=edge"
>
<
meta
name
=
"robots"
content
=
"all"
>
<
title
>上传图片，带剪切功能
</
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"index.css"
>
<
script
src
=
"jquery.js"
>
<
/
script
>
<
script
src
=
"iscroll-zoom.js"
type
=
"text/javascript"
charset
=
"utf-8"
>
<
/
script
>
<
script
src
=
"lrz.all.bundle.js"
type
=
"text/javascript"
charset
=
"utf-8"
>
<
/
script
>
<
script
src
=
"jquery.photoClip.min.js"
type
=
"text/javascript"
charset
=
"utf-8"
>
<
/
script
>
</
head
>
<
body
>
<
div
class
=
"clipRow2"
ontouchstart
=
""
>
<
div
class
=
"cover-wrap"
>
<
div
class
=
"clipBgn"
>
<
div
id
=
"clipArea"
style
=
"margin:10px;height: 520px;"
></
div
>
<
div
class
=
"clipButton"
class
=
""
>
<
button
id
=
"clipBtn"
>保存图片
</
button
>
</
div
>
</
div
>
</
div
>
<
div
id
=
"view"
style
=
"width:214px;height:160.5px;"
></
div
>
<
div
style
=
"height:10px;"
></
div
>
<
div
class
=
"clipContent"
>
上传图片
<
input
type
=
"file"
id
=
"file"
>
</
div
>
</
div
>
</
body
>
</
html
>
//js部分：上传封面
imgData = new FormData();
var clipArea = new bjj.PhotoClip("#clipArea", {
size: [240, 280],// 截取框的宽和高组成的数组。默认值为[260,260]
outputSize: [428, 321], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
//outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
file: "#photofile", // 上传图片的<input type="file">控件的选择器或者DOM对象
view: "#js_showBox", // 显示截取后图像的容器的选择器或者DOM对象
ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
loadStart: function () {
// 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
$('.cover-wrap').fadeIn();
// console.log("照片读取中");
},
loadComplete: function () {
// 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
// console.log("照片读取完成");
},
//loadError: function(event) {
}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
clipFinish: function (dataURL) {
// 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
$('.cover-wrap').fadeOut();
$('.js_logoBox').attr('src',dataURL)
$('#view').css('background-size', '100% 100%');
console.log(dataURL); //输出图像base64
var fileName = getFileName($('#photofile').val());
console.log(fileName)
var photoFile=dataURLtoFile(dataURL,fileName)
imgData.append('file', photoFile);
}
});
function getFileName(o){
var pos=o.lastIndexOf("\\");
return o.substring(pos+1);
}
//将base64转成File文件对象
function dataURLtoFile(dataurl, filename) { //将base64转换为文件
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
});
}
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
http-equiv
=
"x-ua-compatible"
content
=
"ie=edge"
>
<
meta
name
=
"robots"
content
=
"all"
>
<
title
>上传图片，带剪切功能
</
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"index.css"
>
<
script
src
=
"jquery.js"
>
<
/
script
>
<
script
src
=
"iscroll-zoom.js"
type
=
"text/javascript"
charset
=
"utf-8"
>
<
/
script
>
<!--<script src="hammer.js" type="text/javascript" charset="utf-8"></script>-->
<
script
src
=
"lrz.all.bundle.js"
type
=
"text/javascript"
charset
=
"utf-8"
>
<
/
script
>
<
script
src
=
"jquery.photoClip.min.js"
type
=
"text/javascript"
charset
=
"utf-8"
>
<
/
script
>
</
head
>
<
body
>
<
div
class
=
"clipRow2"
ontouchstart
=
""
>
<
div
class
=
"cover-wrap"
>
<
div
class
=
"clipBgn"
>
<
div
id
=
"clipArea"
style
=
"margin:10px;height: 520px;"
></
div
>
<
div
class
=
"clipButton"
class
=
""
>
<
button
id
=
"clipBtn"
>保存图片
</
button
>
</
div
>
</
div
>
</
div
>
<
div
id
=
"view"
style
=
"width:214px;height:160.5px;"
></
div
>
<
div
style
=
"height:10px;"
></
div
>
<
div
class
=
"clipContent"
>
上传图片
<
input
type
=
"file"
id
=
"file"
>
</
div
>
</
div
>
<
script
type
=
"text/javascript"
>
//上传封面
var
clipArea
=
new
bjj.
PhotoClip(
"#clipArea", {
size: [
428,
321],
// 截取框的宽和高组成的数组。默认值为[260,260]
outputSize: [
428,
321],
// 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
//outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
file:
"#file",
// 上传图片的<input type="file">控件的选择器或者DOM对象
view:
"#view",
// 显示截取后图像的容器的选择器或者DOM对象
ok:
"#clipBtn",
// 确认截图按钮的选择器或者DOM对象
loadStart:
function () {
// 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
$(
'.cover-wrap').
fadeIn();
console.
log(
"照片读取中");
},
loadComplete:
function () {
// 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
console.
log(
"照片读取完成");
},
//loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
clipFinish:
function (
dataURL) {
// 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
$(
'.cover-wrap').
fadeOut();
$(
'#view').
css(
'background-size',
'100% 100%');
console.
log(
dataURL);
//输出图像base64
}
});
<
/
script
>
</
body
>
</
html
>