<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. 【腾讯云服务器】基于centos7搭建ftp服务器(vsftpd)

    该博客分为三部分设置,1.ftp服务器搭建.2.防火墙设置  3.腾讯云安全组 一.ftp服务器搭建 1.1  安装vsftpd yum install vsftpd -y 1.2 启动vsftpd服 ...

  2. MongoDB在Linux系统下的安装与启动

    Mongodb介绍 MongoDB是一个开源文档数据库,提供高性能,高可用性和自动扩展,官方文档:https://docs.mongodb.com/manual/introduction/ Mongo ...

  3. LeetCode算法题-Student Attendance Record I(Java实现)

    这是悦乐书的第258次更新,第271篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第125题(顺位题号是551).您将获得一个表示学生出勤记录的字符串. 该记录仅包含以下 ...

  4. Linux Collection:软件配置

    PAS Debian 9安装最新版Firefox( Firefox 58+/Quantum) Debian 9(Strech)的仓库包含的是firefox-esr(52)版本:需要安装最新版,有如下两 ...

  5. Java11新特性!

    Java11又出新版本了,我还在Java8上停着.不过这也挡不住我对他的热爱,忍不住查看了一下他的新性能,由于自己知识有限,只总结了以下八个特性: 1.本地变量类型推断 什么是局部变量类型推断? va ...

  6. 【Python使用】使用pip安装卸载Python包(含离线安装Python包)未完成???

    pip 是 Python 包管理工具,该工具提供了对Python包的查找.下载.安装.卸载的功能.Python 2.7.9 + 或 Python 3.4+ 以上版本都自带 pip 工具. pip使用( ...

  7. Configuring Apache Kafka Security

    This topic describes additional steps you can take to ensure the safety and integrity of your data s ...

  8. Taro项目遇到的问题

    1. https://taro-ui.aotu.io/#/docs/questions 请在Taro项目根目录找到 config/index.js 文件中的h5项,添加如下: h5: { ... es ...

  9. 【Consul】CONSUL调研

    [Consul]CONSUL调研 2016年08月18日 18:31:53 YoungerChina 阅读数:1962更多 所属专栏: Consul修炼   版权声明:原创不易,转载请注明出处! ht ...

  10. Linux内核入门到放弃-设备驱动程序-《深入Linux内核架构》笔记

    I/O体系结构 总线系统 PCI(Peripheral Component Interconnect) ISA(Industrial Standard Architecture) SBus IEEE1 ...