<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. Oracle根据符合条件的数据循环批量更新

    --批量对符合条件的表记录进行更新 --aa代表查询出的符合条件数据的别名 --aa后的表示需要符合的条件 --loop后开始写更新操作 begin for aa in (select a.objec ...

  2. 20180831-Linux环境下Python 3.6.6 的安装说明

    20180831-Linux环境下Python 3.6.6 的安装说明 摘要:Python3 安装部署,普通用户,编译安装 Author: andy_yhm@yeah.net Date: 201808 ...

  3. c/c++ llinux epoll系列4 利用epoll_wait实现非阻塞的connect

    llinux epoll系列4 利用epoll_wait实现非阻塞的connect connect函数是阻塞的,而且不能设置connect函数的timeout时间,所以一旦阻塞太长时间,影响用户的体验 ...

  4. PowerDesigner导出SQL,注释为空时以name代替

    版本 操作步骤 打开Edit Current DBMS 选中Script->Objects->Column->Add 将Value中的内容全部替换为如下 %20:COLUMN% [% ...

  5. Elixir 简介

    概述 Elixir 是一种基于 Erlang 虚拟机的函数式,面向并行的通用语言, 它是一门通用语言,所以不仅可以用在擅长的高可用,高并发场景下,也可以用在 web 开发等场景下. Erlang 诞生 ...

  6. jsonpath 使用教程(快速处理dict的深度查询)

    一 简介 JSONPath - 用于JSON的XPath 用来解析多层嵌套的json数据;JsonPath 是一种信息抽取类库,是从JSON文档中抽取指定信息的工具. 二 安装 安装方法:pip in ...

  7. C# — Windows服务安装后自动停止问题

    今天在使用VS创建一个Windows服务时,为了得到一些提示,引用了Windows.Forms程序集,然后使用MessageBox.Show()方法渴望得到一些弹窗提示: 但是最后在安装好服务后,在任 ...

  8. P5239 回忆京都(洛谷3月月赛T2)

    题目描述 射命丸文在取材中发现了一个好玩的东西,叫做组合数. 组合数的定义如下:从n个不同元素中,任取m(m≤n)个元素并成一组,叫做从n个不同元素中取出m个元素的一个组合.所有组合的数量,就是组合数 ...

  9. 在Web界面中实现Excel数据大量导入的处理方式

    在早期Bootstrap框架介绍中,我的随笔<结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传.预览.提交的导入Excel数据操作流程> ...

  10. 几行c#代码,轻松搞定一个女大学生

    几行c#代码,轻松搞定一个女大学生 的作业... 哈哈,标题党了哈,但是是真的,在外面敲代码,想赚点外快,接到了一个学生的期末考试,是一个天气预报的程序.程序并不难. 看到这个需求第一个想法就是只要找 ...