/* 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并压缩的更多相关文章

  1. H5 Js图片转base64编码

    <!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. JS 图片转Base64

    JS 图片转Base64 有时候需要向HTML中插入一张图片,可苦于上线后找不到一个合适的网盘来存储这些图片,有没有一种办法能将图片转换成文字,然后直接插入HTML中呢,通过Base64编码就可以解决 ...

  3. 前端JS转图片为base64并压缩、调整尺寸脚本

    image to base64 to blob //////////////////////////////////////////////////////////////////////////// ...

  4. vue2.X + HTML5 plus 拍照和调用设备相册 另附 图片转base64和压缩图片方法

    HTML5 部分 <button @click="tesCamera()" type="button" :disabled="isshStatu ...

  5. js 图片与base64互相转换

    js将图片转化为base64 参考地址:http://www.cnblogs.com/mr-wuxiansheng/p/6931077.html var img = "imgurl" ...

  6. js 图片转换为base64

    <input id="file" type="file"> <img id="img" style="max-h ...

  7. js 图片转换base64 base64转换为file对象

    function getImgToBase64(url,callback){//将图片转换为Base64 var canvas = document.createElement('canvas'), ...

  8. js 图片转换为base64 (2)

    <input type="file" id="testUpload"> <img src="" id="img& ...

  9. JS图片转Base64

    网络上有很多片介绍通过js将图片转换成base64的文章,之所以再写这篇文章的原因时发现没有找到系统的介绍的文章,有的介绍如何实现本地项目的图片转码,有的介绍如何实现网络资源的图片转化,但是系统介绍的 ...

随机推荐

  1. Oracle 去重查询

      Oracle 去重查询 CreateTime--2018年2月28日15:38:45 Author:Marydon (一)使用distinct --查询指定区间内表停诊字段的值 SELECT DI ...

  2. C#基础蛋疼到爆的Byte类型表数范围之网兜毛衣见解……

    事实上写这篇对Byte类型表数范围的文章,真的是蛋疼+蛋疼+蛋疼,每每看到Byte表数范围这一块.都对-128如此的陌生与迷茫.操蛋的Byte,操蛋的人生-- 熊孩子出场:Byte 恶作剧结果:表数范 ...

  3. request.getcontextPath() 详解(转)

    本文转自:http://blog.csdn.net/pengxuan/article/details/6604578 <%=request.getContextPath()%>是为了解决相 ...

  4. html5中的FileReader对象

    表单中有图片选项,选中图片文件之后要求可以预览.这个功能很多控件都封装好了,但是它们的底层都是FileReader对象. FileReader对象提供了丰富的功能,包括以二进制.以文本方式读取文件内容 ...

  5. DataSnap使用UniDac处理自增长字段

    原来使用ado来访问数据库,用在DataSnap中也很方便.后来便一直使用UniDac,可发现UniDac如果用在DataSnap中要比ado麻烦很多,尤其对自增长字段.缺省值的处理上,感觉对Data ...

  6. linux常见面试题及答案

    1. 在Linux系统中,以文件方式访问设备. 2. Linux内核引导时,从文件/etc/fstab中读取要加载的文件系统. 3. Linux文件系统中每个文件用i字节来标识. 4. 全部磁盘块由四 ...

  7. hadoop集群虚拟机配置

    hadoop_1, hadoop_2, hadoop_3 用户名riluo 密码19841984 查看Linux自带的JDK是否已安装 (卸载centOS已安装的1.4) 安装好的CentOS会自带O ...

  8. oc 调用c语言方法和oc的方法调用

    //c语方的方法 void sayHello(){ printf("Hello OC"); } int main(int argc, char * argv[]) { sayHel ...

  9. asp.net core mvc视频A:笔记3-7.ViewStart与ViewImort

    项目位置 放在其它目录应该不会执行! 默认配置 默认配置

  10. struts2.xml中所有constant详解--大全

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-/ ...