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的文章,之所以再写这篇文章的原因时发现没有找到系统的介绍的文章,有的介绍如何实现本地项目的图片转码,有的介绍如何实现网络资源的图片转化,但是系统介绍的 ...
随机推荐
- DB2建库简单例子
--重启数据库 FORCE APPLICATION ALL DB2STOP DB2START --创建数据库 TERRITORY US COLLATE USING SYSTEM ) CONNECT T ...
- HTTP报文01
#xiaodeng #HTTP报文01 #HTTP权威指南 45 报文向下游流动- 不管是请求报文还是响应报文,所有报文都会向下游流动. 所有报文的发送者都在接收者的上游. 报文的组成部分 对报文进行 ...
- Falsk-信号
Flask框架中的信号基于blinker,其主要就是让开发者可是在flask请求过程中定制一些用户行为. 安装:pip3 install blinker request_started = _sign ...
- 个人网站不输入www.直接domain.com访问不了,输入www.domain.com能访问
网站访问跳转到/cgi-sys/defaultwebpage.cgi页面原因之一ip地址不对解决后,www.domain.com是可以访问了.但是直接domain.com去不能? 我记得刚开始 ...
- POJ 3233 Matrix Power Series (矩阵乘法)
Matrix Power Series Time Limit: 3000MS Memory Limit: 131072K Total Submissions: 11954 Accepted: ...
- python学习笔记——fork()创建多进程
1 进程概述 引自 Python 多进程 fork()详解 1.1 进程 进程是程序的一次动态执行过程,它对应了从代码加载.执行到执行完毕的一个完整过程. 进程是系统进行资源分配和调度的一个独立单位. ...
- Android中asset文件夹和raw文件夹区别(转载)
原文地址:http://www.cnblogs.com/leizhenzi/archive/2011/10/18/2216428.html *res/raw和assets的相同点: 1.两者目录下的文 ...
- eclipse引入的第三方jar包放到同一个目录下
相信大家对这个不陌生吧: 使用eclipse,在JAVA项目中导入第三方jar包,然后看到一长串引入jar包信息,如下图: 看着不美观,也不是非常有必要,能不能像图中JRE System Librar ...
- xtrabackup迁移单独一张INNODB表
- 摘记—Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Cha
What a Unicode string ? The binaries in RAM have the final word. NOT string literals in Text Editor( ...