<input type="file"   onchange="startUpload(this,'front')"  id="renm"/>
<input type="hidden" id="front" name="front"/>

function startUpload(fileId,site){
var this_=$(fileId);
var front;
if(site=='back' || site=='head'){
front=$('#front').val();
if(front.length==0){
layer.msg('请先上传身份证正面照');
return;
}
}
readAsDataURL( fileId,function(img){
this_.prev().attr({src : img});
this_.show();
this_.next().val(img);
});
} /**
* 读取图片为base64数据 返回 base64图片
* @param file 文件
* @param callback 回调函数
*/
function readAsDataURL(fileId,callback){
var file = $(fileId).get(0).files[0];
var reader = new FileReader();
var image = new Image();
var canvas = createCanvas();
var ctx = canvas.getContext("2d");
reader.onload = function(){ // 文件加载完处理
var result = this.result;
image.onload = function(){ // 图片加载完处理
var imgScale = imgScaleW(800,this.width,this.height);
canvas.width = imgScale.width;
canvas.height = imgScale.height;
ctx.drawImage(image,0,0,imgScale.width,imgScale.height);
var dataURL = canvas.toDataURL('image/jpeg'); // 图片base64
ctx.clearRect(0,0,imgScale.width,imgScale.height); // 清除画布
callback (dataURL); //dataURL:处理成功返回的图片base64
};
image.src = result;
};
reader.readAsDataURL(file);
}
/**
* 创建画布
* @returns
*/
function createCanvas(){
var canvas = document.getElementById('canvas');
if(!canvas){
var canvasTag = document.createElement('canvas');
canvasTag.setAttribute('id','canvas');
canvasTag.setAttribute('style','display:none;');//隐藏画布
document.body.appendChild(canvasTag);
canvas = document.getElementById('canvas');
}
return canvas;
}
/**
* 图片压缩
* @param maxWidth 最大宽度或最大高度
* @param width 宽度
* @param height 高度
* @returns {___anonymous1968_1969}
*/
function imgScaleW(maxWidth,width,height){
var imgScale = {};
var w = 0;
var h = 0;
if(width <= maxWidth && height <= maxWidth){ // 如果图片宽高都小于限制的最大值,不用缩放
imgScale = {
width:width,
height:height
};
}else{
if(width >= height){ // 如果图片宽大于高
w = maxWidth;
h = Math.ceil(maxWidth * height / width);
}else{ // 如果图片高大于宽
h = maxWidth;
w = Math.ceil(maxWidth * width / height);
}
imgScale = {
width:w,
height:h
};
}
return imgScale;
}

js上传图片压缩,并转化为base64的更多相关文章

  1. js 图片压缩上传(base64位)以及上传类型分类

    一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...

  2. JS 上传图片压缩,原比例压缩

    复制 粘贴 改吧改吧就可用,原生js var fileObj = file.file;//原文件 file是我用vue-vant里的组件,里边有file(原文件)和content(base64) 其它 ...

  3. layui中实现上传图片压缩

    一.关于js上传图片压缩的方法,百度有很多种方法,这里我参考修改了一下: function photoCompress(file, w, objDiv) { var ready = new FileR ...

  4. 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器

    使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...

  5. js 上传图片、压缩、旋转

    亲测 <!doctype html> <html> <head> <meta charset="utf-8"> <title& ...

  6. gulpfile.js 合并压缩 requirejs 的配置文件

    var gulp = require("gulp"); // var babel = require("gulp-babel"); // 用于ES6转化ES5 ...

  7. 项目总结13:Jav文件压缩-InputStream转化为base64-Base64解码并生成图片

    Jav文件压缩-InputStream转化为base64-Base64解码并生成图片 直接上源码,解释见文章尾部 package com.hs.common.util.imgecode; import ...

  8. HTML5 Canvas ( 图片绘制 转化为base64 ) drawImage,toDataURL

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 原生 js 上传图片

    js <!doctype html> <html> <head> <meta charset="utf-8"> <title& ...

随机推荐

  1. DataReader的使用

    public List<Student> GetList()        {            string sql = "select * from Student&qu ...

  2. 20181225-Linux Shell Bash环境下自动化创建ssh互信脚本

    20181225-Linux Shell Bash环境下自动化创建ssh互信脚本 1. 我的Blog 博客园 https://www.cnblogs.com/piggybaba/ 个人网站 http: ...

  3. AngularJS学习之旅—AngularJS Table(十一)

    1.AngularJS 表格 1. ng-repeat 指令可以完美的显示表格 AngularJS 实例 <!DOCTYPE html> <html> <head> ...

  4. 列表、enumerate()函数,以及查看数据类型所有的内置方法

    随便看看 """ forList(): 测试list和enumerate()函数 examineFun(): 查看数据类型所有的内置方法 ""&quo ...

  5. MFC自绘菜单

    自绘控件问题多多.本文以菜单为例. ①当要使用顶层菜单资源.对话框资源.状态栏资源等这3种资源的任何一种.那么CWinApp::InitInstance函数内部必须使用LoadFrame函数来加载资源 ...

  6. LeetCode算法题-Find Mode in Binary Search Tree(Java实现)

    这是悦乐书的第246次更新,第259篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第113题(顺位题号是501).给定具有重复项的二叉搜索树(BST),找到给定BST中的 ...

  7. IDF-cookie欺骗

    原题链接:http://ctf.idf.cn/game/web/40/index.php 进入题目,发现一个长字符串,放到md5.base64均无意义. 观察地址栏,发现有两个参数,line和file ...

  8. equals方法相关总结

    先说一下Object类吧: 这是一个号称为祖宗类的东西,是所有类的父类,也是唯一一个没有父类的类. 接口不继承object类 并且Object类存在于java的lang包中,我们都知道存在于lang包 ...

  9. windows 下mysq安装之后的数据恢复案例

    1.进入mysql的安装目录 cd C:\Java\mysql--winx64\bin 2.以默认的账号root,无密码登录mysql默认数据库 mysql -u root mysql 3.查询表us ...

  10. iOS开发基础-Plist实现嵌套模型

    一.plist文件结构图 说明: title 属性表示该 item 下汽车名字的首字母, cars 属性存放首字母为 title 的汽车, icon 属性存放图片的名称, name 属性存放汽车的名字 ...