/* 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. POJ--2752--Seek the Name, Seek the Fame【KMP】

    链接:http://poj.org/problem? id=2752 题意:对于一个字符串S,可能存在前n个字符等于后n个字符,从小到大输出这些n值. 思路:这道题加深了对next数组的理解.next ...

  2. from会存在潜在的陷阱

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #from会存在潜在的陷阱 #from时,可能会遇到相同变量名,变量会被悄悄覆盖掉, #但是import语句不 ...

  3. xml 及其语法

    先说一些关于框架,开发中的框架,主要是用反射技术来封装数据. 先指定规范写出xml,然后通过读写流技术封装好一些API用来映射xml文件,方便取得xml中的配置信息.取得xml内容就可以通过取得的内容 ...

  4. 一些很经典的JavaScript的问题

    1.作用域 (function() { var a = b = 5; })(); console.log(b); 输出:5 陷阱是,在函数表达式中有两个赋值,但a是用关键字var 来声明的,这意味着a ...

  5. HDUOJ--------(1312)Red and Black

    Red and Black Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  6. 使用Wireshark mac下抓取分析iphone数据包 --IOS端

    mac系统版本:mac 10.10 Yosemite xcode版本:6.3.1 在追踪bug或者分析借鉴其他公司的app通讯思路时,抓包这件事是非常有必要的.下面说说Wireshark怎么截获iph ...

  7. C#代码规范 程序员必备的秘笈

    1.引言 本文是一套面向C# programmer和C# developer进行开发所应遵循的开发规范 按照此规范来开发C#程序可带来以下益处: 代码的编写保持一致性,提高代码的可读性和可维护性,在团 ...

  8. 【php】基础学习5

    主要包括PHP的错误.异常处理和调试.具体如下: <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http- ...

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

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

  10. redis 学习札记4-sortset

    redis 学习笔记4--sortset redis学习笔记3--sortSet 终于到最后一个数据结构了,加油!! 整体结构图: http://dl.iteye.com/upload/picture ...