最近公司的移动产品相约app要做一次活动,涉及到图片上传,图片又不能太大,不然用户体验太差,必须先压缩再上传,所以用到了html5的canvas和FileReader,代码先上,小弟前端经验不足,代码写得有点乱,有什么不足之处,望大神指点!

<div class="free-upload">
<p>上传您的约会照片,一张合影、一张票据哦!</p>
<div class="free-upload-photo">
<span id="photo_img"></span>
<input type="file" id="photo" />
</div>
<div class="free-upload-bill">
<span id="bill_img"></span>
<input type="file" id="bill" />
</div>
<p id="photo_loading">正在上传...</p>
</div>

js用到了jquery

var photo = $('#photo');

function isCanvasSupported(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
} photo.on('change', function(event){
if(!canvasSupported){
return;
  }
      
compress(event, function(base64Img){
      $.ajax({
      'url' : '/?s=free/upload',
      'type' : 'post',
      'data' : {'base64Img' : base64Img},
   'success' : function(ret){
     //拿到php传过来的图片地址
      }
     });
   });
}); function compress(event, callback){
var file = event.currentTarget.files[0];
var reader = new FileReader(); reader.onload = function (e) { var image = $('<img/>');
image.on('load', function () {
var square = 700;
var canvas = document.createElement('canvas'); canvas.width = square;
canvas.height = square; var context = canvas.getContext('2d');
context.clearRect(0, 0, square, square);
var imageWidth;
var imageHeight;
var offsetX = 0;
var offsetY = 0; if (this.width > this.height) {
imageWidth = Math.round(square * this.width / this.height);
imageHeight = square;
offsetX = - Math.round((imageWidth - square) / 2);
} else {
imageHeight = Math.round(square * this.height / this.width);
imageWidth = square;
offsetY = - Math.round((imageHeight - square) / 2);
} context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
var data = canvas.toDataURL('image/jpeg');
callback(data);
}); image.attr('src', e.target.result);
}; reader.readAsDataURL(file);
}  

  

    

js图片压缩上传的更多相关文章

  1. js 图片压缩上传(base64位)以及上传类型分类

    一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...

  2. js 图片压缩上传(纯js的质量压缩,非长宽压缩)

    下面是大神整理的demo,很实用,这里存一下备用,感谢大神! 此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下 <!DOCTYPE ht ...

  3. JS—图片压缩上传(单张)

    *vue+webpack环境,这里的that指到vue实例 <input type="file" name="file" accept="ima ...

  4. 纯原生js移动端图片压缩上传插件

    前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...

  5. 基于vue + axios + lrz.js 微信端图片压缩上传

    业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...

  6. 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)

    涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...

  7. Html5+asp.net mvc 图片压缩上传

    在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...

  8. 分享图片压缩上传demo,可以选择一张或多张图片也可以拍摄照片

    2016-08-05更新: 下方的代码是比较OLD的了,是通过js进行图片的剪切 旋转 再生成,效率较低. 后来又整合了一个利用native.js本地接口的压缩代码 ,链接在这 .页面中有详细的说明, ...

  9. js图片压缩和上传并显示

    由于近期项目中需要做个图片压缩上传,所以就在网上找了些资料自己写了一个 html部分 <input id="file" type="file"> & ...

随机推荐

  1. linux调用库的方式

    linux调用库的方式有三种:1.静态链接库2.动态链接库3.动态加载库 其中1,2都是在编程时直接调用,在链接时加参数-l进行链接,运行时自动调用第三种需要在编程时使用dlopen等函数来获取库里面 ...

  2. 数据库访问接口之ODBC

    ODBC API 实现数据库操作的手段是句柄.在ODBC中,使用不同的句柄(HANDLE)来标志环境(environment).连接(Connection).语句(statement).描述符(des ...

  3. linux 中gcc的·安装、编译过程

    一.安装gcc编译器 通过命令gcc -v查看当前的GCC版本 [root@localhost /]# gcc -v Reading specs from /usr/i386-glibc-2.1-li ...

  4. 高性能高可用的微服务框架TarsGo的腾讯实践

    conference/2.3 高性能高可用的微服务框架TarsGo的腾讯实践 - 陈明杰.pdf at master · gopherchina/conferencehttps://github.co ...

  5. java time

    package cn.itcast_04;       import java.text.SimpleDateFormat;   import java.util.Date;       public ...

  6. wan口的ip是干什么用的

    wan口的ip是外网的ip,属于公网的ip.主要用于外网的识别,WAN口主要用于连接外部网络,如ADSL.DDN.以太网等各种接入线路:而LAN口用来连接家庭内部网络,主要与家庭网络中的交换机.集线器 ...

  7. set serveroutput on

    使用set serveroutput on 命令设置环境变量serveroutput为打开状态,从而使得pl/sql程序能够在SQL*plus中输出结果 使用函数dbms_output.put_lin ...

  8. Linux Mint设置自定义快捷键

    我使用的是 Linux Mint 19.2 Tina 先搜索键盘,把键盘的功能调出来 快捷键--->>自定义快捷键--->>添加自定义快捷键 名称可自定义(这里我定义的是“截图 ...

  9. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_15-webpack研究-webpack-dev-server-程序调试

    webpack把我们的js文件都打包了.所以不能用chrome的调试工具. 打包生成的js文件比较乱无法跟踪. 配置好了以后就可以让浏览器查看到打包后的源代码 在源代码这里加一个debuuger 这里 ...

  10. Spring事务管理5-----声明式事务管理(3)

    声明式事务管理  基于注解 在配置文件中需要开启注解驱动<tx:annotation-driven transaction-manager="transactionManager&qu ...