/*  将页面选择的图片等比压缩成指定大小(长边固定)
  file:图片文件
callBack:回调函数
maxLen:长边的长度
*/
function makePic(file,callBack,maxLen){
  
  var url = webkitURL.createObjectURL(file);
  /* 生成图片 */
  var $img = new Image();
  $img.src = url;
  // $('body').append($img);
  $img.onload = function() {
    //生成比例
    var width = $img.width,height = $img.height;
    //计算缩放比例
    var rate=1;
    if(width>=height){
      if(width>maxLen){
        rate=maxLen/width;
      }
    }else{
      if(height>maxLen){
        rate=maxLen/height;
      }
   }
  $img.width=width*rate;
  $img.height=height*rate;
  //生成canvas
  var $canvas =$('#thecanvas');
  var ctx = $canvas[0].getContext('2d');
  $canvas.attr({width : $img.width, height : $img.height});
  ctx.drawImage($img, 0, 0, $img.width, $img.height);
  var base64 = $canvas[0].toDataURL('image/jpeg',0.9);
  callBack(base64);//
  } } $('.unPic_list input[type=file]').bind('change',function(e){
  var that=this;
  for(var j=0;j<e.target.files.length;j++){
    makePic(e.target.files[j],function(imgStr){
      var img = new Image();
      img.src=imgStr;
      img.onload=function(){
      $('body').append(img);
      /*此处将 imgStr.substr(22)操作即的图片二进制流,可发送到服务器*/    }   },750); } })

利用html5压缩图片,产出base64图片的更多相关文章

  1. 移动端实现裁剪图片生成base64图片(可缩放)

    移动端实现裁剪图片生成base64图片(可缩放)<pre><!DOCTYPE html><html lang="en"> <head> ...

  2. 利用HTML5,前端js实现图片压缩

    http://blog.csdn.NET/qazwsx2345/article/details/21827553 主要用了两个HTML5的 API,一个file,一个canvas,压缩主要使用cnav ...

  3. 利用html5的画布canvas进行图片压缩处理

    在网上找的代码,按自己的需求改了下,忘记在哪找的了.这里记着方便自己以后学习. // 参数,最大高度 //var MAX_HEIGHT = 100; var MAX_WIDTH = 200; // 渲 ...

  4. 基于vue上传base64图片,通过canvas压缩base64

    其实和vue关系不大,和我们之前做上传压缩性质是一样的 当然下面的代码是没有处理ios横屏拍照的bug的 有兴趣的可以多搜一下  网上都有相应的解答 .. var that = this if (e. ...

  5. 图片与Base64的转换

    图片转为Base64 // 图片转化成base64字符串 public static String GetImageStr() {// 将图片文件转化为字节数组字符串,并对其进行Base64编码处理 ...

  6. JS 图片转Base64

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

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

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

  8. HTML5 JS 压缩图片,并取得图片的BASE64编码上传

    基本过程 1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象. 2) 在image对象的 ...

  9. 图片上传前 压缩,base64图片压缩 Exif.js处理ios拍照倒置等问题

    曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台,可惜没有及时做总结保留代码,只记得js利用了base64位压缩和Exif.js进行图片处理,还有其中让我头疼的ios拍照上传后会倒置等诸多问题 ...

随机推荐

  1. 在Mac下显示所有文件

    显示所有隐藏文件: 第一个命令:defaults write com.apple.finder AppleShowAllFiles TRUE 回车后,迫使系统将用户资源库里Preferences文件夹 ...

  2. 浅谈测试rhel7新功能时的感受及遇到的问题【转载】

    半夜起来看世界杯,没啥激情,但是又怕错误意大利和英格兰的比赛,就看了rhel7 相关新功能的介绍. rhel7的下载地址: https://access.redhat.com/site/downloa ...

  3. 关于IP在MySQL中的存储

    对于很多新手而言,他们总会纠结,怎样才能更好的设计MySQL数据库呢:作为一个从菜鸟走过来的人,深有体会,刚开始我也不知道什么是外键.什么是事务处理.怎样合理的定义一个字段,说到字段,今天我就带领大家 ...

  4. 启动apache服务时报错【the requested operation has failed】

    想要解决错误,首先要找到错误的原因. 使用ApacheMonitor.exe启动apache服务看不到任何错误的原因. 找到问题原因:cmd--命令端--切换到apache的bin目录,执行如下命令: ...

  5. .project

    http://blog.csdn.net/qiushuichangtian888/article/details/9299843 一个老项目导入新环境后老是提示build.properties不存在的 ...

  6. iOS View 模糊效果(毛玻璃)

    iOS View 模糊效果(毛玻璃)   相关资料 http://stackoverflow.com/questions/18404907/using-gpuimage-to-recreate-ios ...

  7. ant android打包--学习第一弹

    1. 准备工作 用eclipse创建一个android项目 安装ant和SDK,并且添加到系统环境变量 2.ant 使用 2.1 ant简单的帮助命令 ant -p 2.2 创建ant配置文件%AND ...

  8. TextureView+SurfaceTexture+OpenGL ES来播放视频(三)

    引自:http://www.jianshu.com/p/291ff6ddc164 做好的Demo截图 opengl-video 前言 讲了这么多,可能有人要问了,播放视频用个android封装的Vid ...

  9. 内联函数 inline 漫谈

    内联函数存在的结论是: 引入内联函数是为了解决函数调用效率的问题 由于函数之间的调用,会从一个内存地址调到另外一个内存地址,当函数调用完毕之后还会返回原来函数执行的地址.函数调用会有一定的时间开销,引 ...

  10. mysql中的substr()函数

    mysql中的substr()函数和hibernate的substr()参数都一样,就是含义有所不同. 用法: substr(string string,num start,num length); ...