/* 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. DB2建库简单例子

    --重启数据库 FORCE APPLICATION ALL DB2STOP DB2START --创建数据库 TERRITORY US COLLATE USING SYSTEM ) CONNECT T ...

  2. HTTP报文01

    #xiaodeng #HTTP报文01 #HTTP权威指南 45 报文向下游流动- 不管是请求报文还是响应报文,所有报文都会向下游流动. 所有报文的发送者都在接收者的上游. 报文的组成部分 对报文进行 ...

  3. Falsk-信号

    Flask框架中的信号基于blinker,其主要就是让开发者可是在flask请求过程中定制一些用户行为. 安装:pip3 install blinker request_started = _sign ...

  4. 个人网站不输入www.直接domain.com访问不了,输入www.domain.com能访问

      网站访问跳转到/cgi-sys/defaultwebpage.cgi页面原因之一ip地址不对解决后,www.domain.com是可以访问了.但是直接domain.com去不能?   我记得刚开始 ...

  5. POJ 3233 Matrix Power Series (矩阵乘法)

    Matrix Power Series Time Limit: 3000MS   Memory Limit: 131072K Total Submissions: 11954   Accepted:  ...

  6. python学习笔记——fork()创建多进程

    1 进程概述 引自 Python 多进程 fork()详解 1.1 进程 进程是程序的一次动态执行过程,它对应了从代码加载.执行到执行完毕的一个完整过程. 进程是系统进行资源分配和调度的一个独立单位. ...

  7. Android中asset文件夹和raw文件夹区别(转载)

    原文地址:http://www.cnblogs.com/leizhenzi/archive/2011/10/18/2216428.html *res/raw和assets的相同点: 1.两者目录下的文 ...

  8. eclipse引入的第三方jar包放到同一个目录下

    相信大家对这个不陌生吧: 使用eclipse,在JAVA项目中导入第三方jar包,然后看到一长串引入jar包信息,如下图: 看着不美观,也不是非常有必要,能不能像图中JRE System Librar ...

  9. xtrabackup迁移单独一张INNODB表

  10. 摘记—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( ...