{% extends "base.html" %}
{% block title %}
{{ title|default:"实名认证" }}
{% endblock %}
{% block stylesheet %}
<
link
rel=
"stylesheet"
href=
"/static/css/zk/user_atf.css"
media=
"screen"
charset=
"utf-8"
xmlns=
"http://www.w3.org/1999/html"
>
{% endblock %}
{% block container %}
<
div
class=
"reminder"
>{% if msg %}{{ msg }}{% else %}请输入真实资料,认证成功方可签约{% endif %}
</
div
>
<
div
class=
"container-fluid"
>
<
form
method=
"post"
action=
"authentification_resulting?current_token={{ current_token }}"
>
<
div
class=
"name"
>
姓
名 :
<
input
name=
"name"
placeholder=
"填写您的姓名"
>
</
div
>
<
div
class=
"cardcord"
>
身份证 :
<
input
name=
"card"
placeholder=
"请填写您的身份证号码"
>
</
div
>
<
div
class=
"card"
>
alt=
"身份证正面"
data_id=
""
>
<
input
id=
'fil_left'
class=
"imgInpa"
style=
"position: absolute;left:9px; top: 48px;opacity: 0;width: 135px;height: 100px;"
class=
"front"
type=
"file"
capture=
"camera"
accept=
"image/*"
name=
""
value=
""
>
alt=
"身份证反面"
data_id=
""
>
<
input
id=
'fil_right'
class=
"imgInpb"
style=
"position: absolute;left:152px; top: 48px;opacity: 0;width: 133px;height: 100px;"
class=
"front"
type=
"file"
capture=
"camera"
accept=
"image/*"
name=
""
value=
""
>
<
input
type=
"hidden"
name=
"imga"
class=
"imga"
>
<
input
type=
"hidden"
name=
"imgb"
class=
"imgb"
>
</
div
>
<
div
class=
"photograph"
>
<
input
id=
"fil_face"
class=
"imgInpc"
style=
"position: absolute;left:9px; top: 48px;opacity: 0;width: 135px;height: 100px;"
type=
"file"
accept=
"image/*"
name=
"Filedata"
>
<
img
id=
'preview_face'
class=
"picc"
class=
"imgcc"
src=
"../static/img/zk/[email protected]"
data_id=
""
>
<
input
type=
"hidden"
name=
"imgc"
class=
"imgc"
>
</
div
>
<
div
class=
"tijiao"
>
<
input
id=
"btn"
type=
"submit"
value=
"提交"
>
</
div
>
</
form
>
</
div
>
{% endblock %}
{% block javascript %}
<
script
src=
"/static/js/exif.js"
>
<
/
script
>
<
script
type=
"text/javascript"
>
$(
document).
ready(
function () {
$(
'div img.i_help').
click(
function () {
location.
href =
'/user/authentification_help?current_token={{ current_token }}';
});
// $(".imgInpa").change(function () {
// var file = $(".imgInpa")[0].files[0];
// console.log(file)
// if (file == null)
// return;
// var formData = new FormData();
// // return ;
// formData.append('Filedata', file);
// $.ajax({
// url: 'http://api.ih2ome.cn/api/picture/image_upload/',
// type: 'POST',
// async: false,
// contentType: false,
// processData: false,
// data: formData,
// timeout: 100000,
// success: function (data) {
// $('.pica').attr('src', data.url);
// $('.pica').attr('data_id', data.id);
// $('.imga').val(data.id)
// },
// error: function (data) {
// console.log(data)
// }
// })
// });
{%
if
is_pro_env %}
var
img_upload_url =
"http://api.shuidiguanjia.com/api/picture/image_upload/";
{%
else %}
var
img_upload_url =
"http://api.ih2ome.cn/api/picture/image_upload/";
{%
endif %}
console.
log(
"{{ is_pro_env }}");
console.
log(
img_upload_url);
var
ipt_left =
document.
getElementById(
'fil_left'),
img_left =
document.
getElementById(
'preview_left'),
Orientation =
null;
ipt_left.
onchange =
function () {
var
file =
ipt_left.
files[
0],
reader =
new
FileReader(),
image =
new
Image();
if (
file) {
EXIF.
getData(
file,
function () {
Orientation =
EXIF.
getTag(
this,
'Orientation');
console.
log(
Orientation)
});
reader.
onload =
function (
ev) {
image.
src =
ev.
target.
result;
image.
onload =
function () {
var
imgWidth =
this.
width,
imgHeight =
this.
height;
// 控制上传图片的宽高
if (
imgWidth >
imgHeight &&
imgWidth >
750) {
imgWidth =
750;
imgHeight =
Math.
ceil(
750 *
this.
height /
this.
width);
}
else
if (
imgWidth <
imgHeight &&
imgHeight >
1334) {
imgWidth =
Math.
ceil(
1334 *
this.
width /
this.
height);
imgHeight =
1334;
}
var
canvas =
document.
createElement(
"canvas"),
ctx =
canvas.
getContext(
'2d');
canvas.
width =
imgWidth;
canvas.
height =
imgHeight;
if (
Orientation &&
Orientation !=
1) {
switch (
Orientation) {
case
6:
// 旋转90度
canvas.
width =
imgHeight;
canvas.
height =
imgWidth;
ctx.
rotate(
Math.PI /
2);
// (0,-imgHeight) 从旋转原理图那里获得的起始点
ctx.
drawImage(
this,
0, -
imgHeight,
imgWidth,
imgHeight);
break;
case
3:
// 旋转180度
ctx.
rotate(
Math.PI);
ctx.
drawImage(
this, -
imgWidth, -
imgHeight,
imgWidth,
imgHeight);
break;
case
8:
// 旋转-90度
canvas.
width =
imgHeight;
canvas.
height =
imgWidth;
ctx.
rotate(
3 *
Math.PI /
2);
ctx.
drawImage(
this, -
imgWidth,
0,
imgWidth,
imgHeight);
break;
}
}
else {
ctx.
drawImage(
this,
0,
0,
imgWidth,
imgHeight);
}
img_left.
src =
canvas.
toDataURL(
"image/jpeg",
0.8);
data =
canvas.
toDataURL(
"image/jpeg",
0.8).
split(
',')[
1];
data =
window.
atob(
data);
var
ia =
new
Uint8Array(
data.
length);
for (
var
i =
0;
i <
data.
length;
i++) {
ia[
i] =
data.
charCodeAt(
i);
}
var
blob =
new
Blob([
ia], {
type:
'image/jpeg'});
//2.提交到服务器
var
fd =
new
FormData();
fd.
append(
'Filedata',
blob);
$.
ajax({
url:
img_upload_url,
type:
'POST',
async:
false,
contentType:
false,
processData:
false,
data:
fd,
timeout:
100000,
success:
function (
data) {
// $('.pica').attr('src', data.url);
$(
'.pica').
attr(
'data_id',
data.
id);
$(
'.imga').
val(
data.
id)
},
error:
function (
data) {
console.
log(
data)
}
})
}
}
reader.
readAsDataURL(
file);
}
}
var
ipt_right =
document.
getElementById(
'fil_right'),
img_right =
document.
getElementById(
'preview_right'),
Orientation =
null;
ipt_right.
onchange =
function () {
var
file =
ipt_right.
files[
0],
reader =
new
FileReader(),
image =
new
Image();
if (
file) {
EXIF.
getData(
file,
function () {
Orientation =
EXIF.
getTag(
this,
'Orientation');
console.
log(
Orientation)
});
reader.
onload =
function (
ev) {
image.
src =
ev.
target.
result;
image.
onload =
function () {
var
imgWidth =
this.
width,
imgHeight =
this.
height;
// 控制上传图片的宽高
if (
imgWidth >
imgHeight &&
imgWidth >
750) {
imgWidth =
750;
imgHeight =
Math.
ceil(
750 *
this.
height /
this.
width);
}
else
if (
imgWidth <
imgHeight &&
imgHeight >
1334) {
imgWidth =
Math.
ceil(
1334 *
this.
width /
this.
height);
imgHeight =
1334;
}
var
canvas =
document.
createElement(
"canvas"),
ctx =
canvas.
getContext(
'2d');
canvas.
width =
imgWidth;
canvas.
height =
imgHeight;
if (
Orientation &&
Orientation !=
1) {
switch (
Orientation) {
case
6:
// 旋转90度
canvas.
width =
imgHeight;
canvas.
height =
imgWidth;
ctx.
rotate(
Math.PI /
2);
// (0,-imgHeight) 从旋转原理图那里获得的起始点
ctx.
drawImage(
this,
0, -
imgHeight,
imgWidth,
imgHeight);
break;
case
3:
// 旋转180度
ctx.
rotate(
Math.PI);
ctx.
drawImage(
this, -
imgWidth, -
imgHeight,
imgWidth,
imgHeight);
break;
case
8:
// 旋转-90度
canvas.
width =
imgHeight;
canvas.
height =
imgWidth;
ctx.
rotate(
3 *
Math.PI /
2);
ctx.
drawImage(
this, -
imgWidth,
0,
imgWidth,
imgHeight);
break;
}
}
else {
ctx.
drawImage(
this,
0,
0,
imgWidth,
imgHeight);
}
img_right.
src =
canvas.
toDataURL(
"image/jpeg",
0.8);
data =
canvas.
toDataURL(
"image/jpeg",
0.8).
split(
',')[
1];
data =
window.
atob(
data);
var
ia =
new
Uint8Array(
data.
length);
for (
var
i =
0;
i <
data.
length;
i++) {
ia[
i] =
data.
charCodeAt(
i);
}
var
blob =
new
Blob([
ia], {
type:
'image/jpeg'});
//2.提交到服务器
var
fd =
new
FormData();
fd.
append(
'Filedata',
blob);
$.
ajax({
url:
img_upload_url,
type:
'POST',
async:
false,
contentType:
false,
processData:
false,
data:
fd,
timeout:
100000,
success:
function (
data) {
// $('.picb').attr('src', data.url);
$(
'.picb').
attr(
'data_id',
data.
id);
$(
'.imgb').
val(
data.
id)
},
error:
function (
data) {
console.
log(
data)
}
})
}
};
reader.
readAsDataURL(
file);
}
};
var
ipt_face =
document.
getElementById(
'fil_face'),
img_face =
document.
getElementById(
'preview_face'),
Orientation =
null;
ipt_face.
onchange =
function () {
var
file =
ipt_face.
files[
0],
reader =
new
FileReader(),
image =
new
Image();
console.
log(
file)
if (
file) {
EXIF.
getData(
file,
function () {
Orientation =
EXIF.
getTag(
this,
'Orientation');
console.
log(
Orientation)
});
reader.
onload =
function (
ev) {
image.
src =
ev.
target.
result;
image.
onload =
function () {
var
imgWidth =
this.
width,
imgHeight =
this.
height;
// 控制上传图片的宽高
if (
imgWidth >
imgHeight &&
imgWidth >
750) {
imgWidth =
750;
imgHeight =
Math.
ceil(
750 *
this.
height /
this.
width);
}
else
if (
imgWidth <
imgHeight &&
imgHeight >
1334) {
imgWidth =
Math.
ceil(
1334 *
this.
width /
this.
height);
imgHeight =
1334;
}
var
canvas =
document.
createElement(
"canvas"),
ctx =
canvas.
getContext(
'2d');
canvas.
width =
imgWidth;
canvas.
height =
imgHeight;
if (
Orientation &&
Orientation !=
1) {
switch (
Orientation) {
case
6:
// 旋转90度
canvas.
width =
imgHeight;
canvas.
height =
imgWidth;
ctx.
rotate(
Math.PI /
2);
// (0,-imgHeight) 从旋转原理图那里获得的起始点
ctx.
drawImage(
this,
0, -
imgHeight,
imgWidth,
imgHeight);
break;
case
3:
// 旋转180度
ctx.
rotate(
Math.PI);
ctx.
drawImage(
this, -
imgWidth, -
imgHeight,
imgWidth,
imgHeight);
break;
case
8:
// 旋转-90度
canvas.
width =
imgHeight;
canvas.
height =
imgWidth;
ctx.
rotate(
3 *
Math.PI /
2);
ctx.
drawImage(
this, -
imgWidth,
0,
imgWidth,
imgHeight);
break;
}
}
else {
ctx.
drawImage(
this,
0,
0,
imgWidth,
imgHeight);
}
img_face.
src =
canvas.
toDataURL(
"image/jpeg",
0.8);
data =
canvas.
toDataURL(
"image/jpeg",
0.8).
split(
',')[
1];
data =
window.
atob(
data);
var
ia =
new
Uint8Array(
data.
length);
for (
var
i =
0;
i <
data.
length;
i++) {
ia[
i] =
data.
charCodeAt(
i);
}
var
blob =
new
Blob([
ia], {
type:
'image/jpeg'});
//2.提交到服务器
var
fd =
new
FormData();
fd.
append(
'Filedata',
blob);
$.
ajax({
url:
img_upload_url,
type:
'POST',
async:
false,
contentType:
false,
processData:
false,
data:
fd,
success:
function (
data) {
// $('.picc').attr('src', data.url);
$(
'.picc').
attr(
'data_id',
data.
id);
$(
'.imgc').
val(
data.
id)
},
error:
function (
data) {
console.
log(
data)
}
})
}
}
reader.
readAsDataURL(
file);
}
}
});
<
/
script
>
{% endblock %}