js上传图片压缩,并转化为base64
<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的更多相关文章
- js 图片压缩上传(base64位)以及上传类型分类
一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...
- JS 上传图片压缩,原比例压缩
复制 粘贴 改吧改吧就可用,原生js var fileObj = file.file;//原文件 file是我用vue-vant里的组件,里边有file(原文件)和content(base64) 其它 ...
- layui中实现上传图片压缩
一.关于js上传图片压缩的方法,百度有很多种方法,这里我参考修改了一下: function photoCompress(file, w, objDiv) { var ready = new FileR ...
- 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器
使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...
- js 上传图片、压缩、旋转
亲测 <!doctype html> <html> <head> <meta charset="utf-8"> <title& ...
- gulpfile.js 合并压缩 requirejs 的配置文件
var gulp = require("gulp"); // var babel = require("gulp-babel"); // 用于ES6转化ES5 ...
- 项目总结13:Jav文件压缩-InputStream转化为base64-Base64解码并生成图片
Jav文件压缩-InputStream转化为base64-Base64解码并生成图片 直接上源码,解释见文章尾部 package com.hs.common.util.imgecode; import ...
- HTML5 Canvas ( 图片绘制 转化为base64 ) drawImage,toDataURL
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 原生 js 上传图片
js <!doctype html> <html> <head> <meta charset="utf-8"> <title& ...
随机推荐
- Cherrypy文件上传非ASCII文件名乱码问题解决
Cherrypy 版本: 18.0.1 由于某些特殊原因(可能是与标准兼容的问题),Cherrypy对上传文件的原文件名使用 ISO-8859-1 编码方式解码,导致非 ASCII 的文件名显示为乱码 ...
- 英语进阶系列-A04-英语升级练习二
古诗背诵 要求:背诵和朗读,然后翻译成现代文,并绘制图像描述图中的内容,同时看看某些内容可以用什么单词替换,时间限制到15 minutes. 速记词汇系列 要求:将词汇快速朗读并记忆,时间为8 min ...
- Django--session(登录用)
一.session的原理图 二.Django中session对象的设置/读取/删除及其他方法 三. Django--配置 settings.py中与session有关的参数 一.session的原理图 ...
- Linux学习笔记(一)----Ubuntu下的apt命令
一.原理与目录 先介绍几个和apt-get相关的目录: /var/lib/dpkg/available文件的内容是软件包的描述信息, 该软件包括当前系统所使用的 Debian 安装源中的所有软件包,其 ...
- PHP程序员从小白到高手,掌握这些技能少走弯路
PHP程序员从小白到高手,掌握这些技能少走弯路 PHP究竟是不是最好的语言,一直以来是程序员最大的“争议”,但毋庸置疑的是,PHP绝对是最有前途和力量的变成语言,也是你入门最值得学习的语言. 作为老牌 ...
- B. Obtaining the String(模拟)
比较水的模拟 思路:就是模拟题意 注意:把数组开大点,开始wa了几次就是这个原因 #include<iostream> #include<string> #include< ...
- C++ shared_ptr、unique_ptr、weak_ptr
shared_ptr unique_ptr weak_ptr 内存泄漏 智能指针 引用计数 循环引用 reset
- .net core2.1 三层中使用Autofac代替原来Ioc
首先,现有的三层项目的结构 其中 Repository public interface IPersonRepository { string Eat(); } public class Perso ...
- OCR技术浅析-无代码篇(1)
图像识别中最贴近我们生活的可能就是 OCR 技术了. OCR 的定义:OCR (Optical Character Recognition,光学字符识别)是指电子设备(例如扫描仪或数码相机)检查纸上打 ...
- 06 Django REST Framework 版本控制
01-版本控制 对接口进行版本控制只是一种杀死已部署客户端的“礼貌”方式. - 罗伊菲尔丁. 1. API版本控制允许您更改不同客户端之间的行为.REST框架提供了许多不同的版本控制方案. 2. 版本 ...