公众号手写签名 前端图片显示问题

其他 2018-10-30 19:05:35 阅读次数: 0
{% 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" >
姓 &nbsp;&nbsp;&nbsp;&nbsp;名 : < input name= "name" placeholder= "填写您的姓名" >
</ div >

< div class= "cardcord" >
身份证 : < input name= "card" placeholder= "请填写您的身份证号码" >
</ div >

< div class= "card" >
< p >身份证正反照片: < img class= "i_help" src= "../static/img/zk/[email protected]" ></ p >
< img id= 'preview_left' class= "pica" class= "imgaa" src= "../static/img/zk/[email protected]"
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= "" >
< img id= 'preview_right' class= "picb" class= "imgbb" src= "../static/img/zk/[email protected]"
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" >
< p >个人正面照片: < img class= "i_help" src= "../static/img/zk/[email protected]" ></ p >
< 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 %}


猜你喜欢

转载自blog.csdn.net/Healer_JJJ/article/details/79584898
今日推荐
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
周排行
阿里云短信服务平台注册
Windows下的字符串处理(1)
sqoop: mysql导入数据到hdfs, hive, hbase
commons.lang中常用的工具类
离线安装PostgreSQL11.6
使用PyTorch简单实现卷积神经网络模型
一文彻底搞定谱聚类
一道面试题引发的血案
One Chat for Mac(聊天工具)
TCP/IP的底层队列是如何实现的？
每日归档
更多
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022