1. /* 2015-09-28 上传图片*/
  2. function convertImgToBase64(url, callback, outputFormat){
  3. var canvas = document.createElement('CANVAS');
  4. var ctx = canvas.getContext('2d');
  5. var img = new Image;
  6. img.crossOrigin = 'Anonymous';
  7. img.onload = function(){
  8. var width = img.width;
  9. var height = img.height;
  10. // 按比例压缩4倍
  11. var rate = (width<height ? width/height : height/width)/4;
  12. canvas.width = width*rate;
  13. canvas.height = height*rate;
  14. ctx.drawImage(img,0,0,width,height,0,0,width*rate,height*rate);
  15. var dataURL = canvas.toDataURL(outputFormat || 'image/png');
  16. callback.call(this, dataURL);
  17. canvas = null;
  18. };
  19. img.src = url;
  20. }
  21.  
  22. function getObjectURL(file) {
  23. var url = null ;
  24. if (window.createObjectURL!=undefined) { // basic
  25. url = window.createObjectURL(file) ;
  26. } else if (window.URL!=undefined) { // mozilla(firefox)
  27. url = window.URL.createObjectURL(file) ;
  28. } else if (window.webkitURL!=undefined) { // web_kit or chrome
  29. url = window.webkitURL.createObjectURL(file) ;
  30. }
  31. return url ;
  32. }
  33. // 前端只需要给input file绑定这个change事件即可(上面两个方法不用管)huodong-msg为input class
  34. $('.huodong-msg').bind('change',function(event){
  35. var imageUrl = getObjectURL($(this)[0].files[0]);
  36. convertImgToBase64(imageUrl, function(base64Img){
  37. // base64Img为转好的base64,放在img src直接前台展示(<img src="data:image/jpg;base64,/9j/4QMZRXh...." />)
  38. alert(base64Img);
  39. // base64转图片不需要base64的前缀data:image/jpg;base64
  40. alert(base64Img.split(",")[1]);
  41. });
  42. event.preventDefault();
  43. });
  44. /* 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. Unity 文字爆炸(风化)消失效果 粒子系统应用

    利用Unity的粒子系统,使用C#代码控制粒子的位置和速度,实现文字风化爆炸的效果. Unity的东西,不像flash,不能直接放到网页中,没办法了,只能放截图了.有兴趣的可以下载看看:text_ex ...

  2. Divisibility by Eight

    把当前数删除几位然后能够整除与8 那么可得知大于3位数的推断能否整除于八的条件是(n%1000)%8==0 能够得出我们的结论:仅仅须要枚举后三位后两位后一位就可以知道是否可整除于8 #include ...

  3. PHP原生实现,校验微信公众号||小程序服务器地址

    1.原生的.php文件:  test.php <?php header('Content-type:text'); define("TOKEN", "weixin& ...

  4. tomcat 的配置文件 server.xml 详解

    server.xml位于$TOMCAT_HOME/conf目录下,作为整个 tomcat 服务器最核心的配置文件,server.xml的每一个元素都对应了 tomcat中的一个组件,通过对xml中元素 ...

  5. cxf使用wsdl文件生成代码

    1.先下载cxf包 http://cxf.apache.org/download.html,现在cxf包.(下载资源就有) 2.解压缩包,通过cmd命令进入到bin目录下(cd cxf\bin的路径) ...

  6. C++知识整理(进制)

    ++输出二进制.十进制.八进制和十六进制总结 分类: C++ 2013-01-14 02:26 592人阅读 评论(0) 收藏 举报 在C++中,默认状态下,数据按十进制输入输出.如果要求按八进制或十 ...

  7. 非IE内核浏览器如何支持activex插件

    原文地址:https://blog.csdn.net/johnson2008t/article/details/46126605 之前在一个B/S项目中遇到一个需求,就是客户需要在页面上对报表的布局以 ...

  8. Redis客户端

    1.自带的: Redis-cli 2.redis-desktop-manager-0.7.9.809  是一个图形化客户端 但是不支持集群  **由于linux防火墙默认开启,redis的服务端口63 ...

  9. page_address()函数分析

    由于X86平台上面,内存是划分为低端内存和高端内存的,所以在两个区域内的page查找对应的虚拟地址是不一样的. 一. x86上关于page_address()函数的定义 在include/linux/ ...

  10. iOS开发打包

    ios11个论坛地址   邓白氏编码    邓白氏申请 http://blog.fir.im/faq/ AdHoc,InHouse,App Store Account Type: InHouse  ( ...