zoukankan      html  css  js  c++  java
  • 基于html5 canvas 的客户端异步上传图片的插件,支持客户端压缩图片尺寸

      1 /**
      2  * Created by xx on 15-05-28.
      3  * 基于html5 canvas 的客户端异步上传画片的插件
      4  * 在实际应用中,常常要用于上传图片的功能.在现在越来越多的手机webapp应用中,上传图片功能的问题尤为实出,
      5  * 主要表显为:1 手机摄象头太牛B,随便拍拍,照片都有几M
      6  *       2 在没有wifi的情况下,移动网络上线照片还是有点慢的
      7  * 解决以上问题,主要的思路还是在客户端压缩图片尺寸,这就用到这个插件了
      8  *
      9  * 插件中的核心代码参照网络,自己整理了一下
     10  *
     11  * 使用方法
     12  * $("#xxfile").xxUploadImg({
     13                 url: 'upload.php', //上传服务器url
     14                 max: 100, // 上传图片的高或宽(大的那个)的最大值 ,当此值为0时,不压缩
     15                 fileType: 'image/png', //文件格式: image/png image/jpeg   经测试在微信中 jpeg无效
     16                 param: false, //因为上传是异步的,这里是 需要传递的参数 
     17                 callbackFun: function (ret, param) { // 上传成功后的回调函数
     18                     $("#show_img").attr("src", ret);
     19                 }
     20             })
     21  */
     22 
     23 
     24 (function ($) {
     25     $.fn.xxUploadImg = function (options) {
     26         if (typeof options == "string") {
     27             options = {"fileId": options};
     28         }
     29         // build main options before element iteration
     30         var opts = $.extend({}, $.fn.xxUploadImg.defaults, options);
     31         return this.each(function () {
     32             var $this = $(this);
     33             // build element specific options
     34             var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
     35             o.fileObj = $this[0].files[0];
     36 
     37             // 获取 canvas DOM 对象
     38             o.canvas = document.getElementById(o.canvasId);
     39             if (!o.canvas) {
     40                 o.canvas = document.createElement("canvas");
     41                 o.canvas.style.display = "none";
     42             }
     43 
     44             // 获取 canvas的 2d 环境对象,
     45             // 可以理解Context是管理员,canvas是房子
     46             o.ctx = o.canvas.getContext("2d");
     47 
     48             loadImage(o);
     49         });
     50     }
     51 
     52     // 加载 图像文件(url路径)
     53     function loadImage(o) {
     54         //   var src = document.getElementById(o.fileId).files[0];
     55         // 过滤掉 非 image 类型的文件
     56         if (!o.fileObj.type.match(/image.*/)) {
     57             if (window.console) {
     58                 console.log("选择的文件类型不是图片: ", o.fileObj.type);
     59             } else {
     60                 window.confirm("只能选择图片文件");
     61             }
     62 
     63             return;
     64         }
     65 
     66         // 创建 FileReader 对象 并调用 render 函数来完成渲染.
     67         var reader = new FileReader();
     68         // 绑定load事件自动回调函数
     69         reader.onload = function (e) {
     70             // 调用前面的 render 函数
     71             render(e.target.result, o);
     72         };
     73         // 读取文件内容
     74         reader.readAsDataURL(o.fileObj);
     75     }
     76 
     77 
     78     // 渲染
     79     function render(src, o) {
     80         // 创建一个 Image 对象
     81         var image = new Image();
     82         // 绑定 load 事件处理器,加载完成后执行
     83         image.onload = function () {
     84 
     85             if (o.max > 0) {
     86                 if (image.height > image.width) {
     87                     // 如果高度超标
     88                     if (image.height > o.max) {
     89                         // 宽度等比例缩放 *=
     90                         image.width *= o.max / image.height;
     91                         image.height = o.max;
     92                     }
     93                 } else {
     94                     if (image.width > o.max) {
     95                         // 宽度等比例缩放 *=
     96                         image.height *= o.max / image.width;
     97                         image.width = o.max;
     98                     }
     99                 }
    100             }
    101 
    102             // canvas清屏
    103             o.ctx.clearRect(0, 0, o.canvas.width, o.canvas.height);
    104             // 重置canvas宽高
    105             // 这里是使用canvas一个坑,就是先要给canvas设置宽高,然后才可以调用旋转等操作
    106             o.canvas.width = image.width;
    107             o.canvas.height = image.height;
    108             // 将图像绘制到canvas上
    109             o.ctx.drawImage(image, 0, 0, image.width, image.height);
    110             // !!! 注意,image 没有加入到 dom之中
    111 
    112 
    113             upload(o);
    114         };
    115         // 设置src属性,浏览器会自动加载。
    116         // 记住必须先绑定事件,才能设置src属性,否则会出同步问题。
    117         image.src = src;
    118     };
    119 
    120 
    121     function upload(o) {
    122         //上传
    123         var dataurl = o.canvas.toDataURL(o.fileType);
    124         // 为安全 对URI进行编码
    125         // data%3Aimage%2Fpng%3Bbase64%2C 开头
    126         var imagedata = encodeURIComponent(dataurl);
    127         $.post(o.url,
    128             {
    129                 img: dataurl
    130             },
    131             function (ret) {
    132                 o.callbackFun(ret, o.param);
    133             })
    134     }
    135 
    136 
    137     $.fn.xxUploadImg.defaults = {
    138         fileObj: false, //file对象
    139 
    140         canvasId: 'xxcanvas', //canvas标签的ID
    141         canvas: false, //canvas标签的ID
    142         ctx: false, //canvas标签的ID
    143 
    144         url: '', //上传服务器url
    145         max: 0, //压缩图片尺寸大小
    146         fileType: 'image/png', //文件格式 image/png image/jpeg   经测试在微信中 jpeg无效
    147         param: false, //需要传递的参数
    148         callbackFun: function (ret, param) {
    149         } //回调函数
    150     }
    151 })(jQuery);

    源代码转自--http://git.oschina.net/opmetic/xxUploadImg

  • 相关阅读:
    【转】Linux 用cp和rsync同步文件时跳过指定目录
    解决svn错误:postcommit hook failed (exit code 1) with output
    Linux下如何使cp命令不提示覆盖文件
    Linux tar压缩时排除某个目录或文件的参数
    ecshop中404错误页面 .
    Linux如何查看当前目录下文件的个数
    Meta Property=og标签在SEO中的应用
    mysql mysqldump只导出表结构或只导出数据的实现方法
    slaveskiperrors( 转)
    自定义404错误页面返回状态码分析
  • 原文地址:https://www.cnblogs.com/jasonoiu/p/xxUploadImg.html
Copyright © 2011-2022 走看看