js图片转base64并压缩
/* 2015-09-28 上传图片*/
function convertImgToBase64(url, callback, outputFormat){
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function(){
var width = img.width;
var height = img.height;
// 按比例压缩4倍
var rate = (width<height ? width/height : height/width)/4;
canvas.width = width*rate;
canvas.height = height*rate;
ctx.drawImage(img,0,0,width,height,0,0,width*rate,height*rate);
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
callback.call(this, dataURL);
canvas = null;
};
img.src = url;
} function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // web_kit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
// 前端只需要给input file绑定这个change事件即可(上面两个方法不用管)huodong-msg为input class
$('.huodong-msg').bind('change',function(event){
var imageUrl = getObjectURL($(this)[0].files[0]);
convertImgToBase64(imageUrl, function(base64Img){
// base64Img为转好的base64,放在img src直接前台展示(<img src="data:image/jpg;base64,/9j/4QMZRXh...." />)
alert(base64Img);
// base64转图片不需要base64的前缀data:image/jpg;base64
alert(base64Img.split(",")[1]);
});
event.preventDefault();
});
/* 2015-09-28 */
js图片转base64并压缩的更多相关文章
- H5 Js图片转base64编码
<!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- JS 图片转Base64
JS 图片转Base64 有时候需要向HTML中插入一张图片,可苦于上线后找不到一个合适的网盘来存储这些图片,有没有一种办法能将图片转换成文字,然后直接插入HTML中呢,通过Base64编码就可以解决 ...
- 前端JS转图片为base64并压缩、调整尺寸脚本
image to base64 to blob //////////////////////////////////////////////////////////////////////////// ...
- vue2.X + HTML5 plus 拍照和调用设备相册 另附 图片转base64和压缩图片方法
HTML5 部分 <button @click="tesCamera()" type="button" :disabled="isshStatu ...
- js 图片与base64互相转换
js将图片转化为base64 参考地址:http://www.cnblogs.com/mr-wuxiansheng/p/6931077.html var img = "imgurl" ...
- js 图片转换为base64
<input id="file" type="file"> <img id="img" style="max-h ...
- js 图片转换base64 base64转换为file对象
function getImgToBase64(url,callback){//将图片转换为Base64 var canvas = document.createElement('canvas'), ...
- js 图片转换为base64 (2)
<input type="file" id="testUpload"> <img src="" id="img& ...
- JS图片转Base64
网络上有很多片介绍通过js将图片转换成base64的文章,之所以再写这篇文章的原因时发现没有找到系统的介绍的文章,有的介绍如何实现本地项目的图片转码,有的介绍如何实现网络资源的图片转化,但是系统介绍的 ...
随机推荐
- Stage3d 由浅到深理解AGAL的管线vertex shader和fragment shader || 简易教程 学习心得 AGAL 非常非常好的入门文章
Everyday Stage3D (一) Everyday Stage3D (二) Triangle Everyday Stage3D (三) AGAL的基本概念 Everyday Stage3D ( ...
- 〖Linux〗Ubuntu13.04解决Chrome的flash中文乱码的问题。
1. 安装flash sudo aptitude install flashplugin-installer 2. 禁用chrome自带的flash插件 在chrome浏览器中输入 chrome:// ...
- JDBC实例--通过连接工具类DBUtil +配置文件来获取连接数据库,方便又快捷
根据前面的连接方法,还有缺点就是,如果人家要换数据库,还得改动源代码,然后还要编译什么的.这样客户修改也不容易. 做法:我们写一个配置文件,把该数据写在配置文件上面,然后通过类来加载改文件,然后读取相 ...
- 触发器学习笔记(:new,:old用法)
触发器学习笔记(:new,:old用法) 触发器是数据库发生某个操作时自动运行的一类的程序 用于保持数据的完整性或记录数据库操作信息方面 触发器不能够被直接调用,只能够 ...
- CentOS 中文乱码
同事刚装的一台CentOS服务器,SSH登录乱码: 猜测应该是安装时选择的是简体中文,因为发现/etc/sysconfig/i18n文件里面是zh_CN. LANG="zh_CN.UTF-8 ...
- eclipse里面的时间错误,比电脑系统时间慢了8个小时
eclipse里面的时间错误,比电脑系统时间慢了8个小时 解决办法: 打开<eclipse安装目录>/eclipse.ini文件 在文件末尾追加 -Duser.timezone=Asia/ ...
- Linux安装JDK详细步骤(rpm方式)
1. 先从网上下载jdk(jdk-6u32-linux-i586-rpm) ,下载后放在/home目录中,当然其它地方也行. 进入安装目录 #cd /home#cp jdk-6u32-linux-i5 ...
- ExpandoObject与DynamicObject的使用
using ImpromptuInterface; using System; using System.Dynamic; namespace ConsoleApp2 { class Program ...
- OAF_OAF编译代码至应用详解(案例)
201-06-01 Created By BaoXinjian
- linux下判断文件和目录是否存在
1.前言 工作中涉及到文件系统,有时候需要判断文件和目录是否存在.我结合APUE第四章文件和目录,总结一下如何正确判断文件和目录是否存在,方便以后查询. 2.stat系列函数 stat函数用来返回与文 ...