zoukankan      html  css  js  c++  java
  • JS图片压缩

    /**
     * 图片压缩,默认同比例压缩
     * @param {Object} path    
     *         pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照相图片储存的绝对路径
     * @param {Object} obj
     *         obj 对象 有 width, height, quality(0-1)
     * @param {Object} callback
     *         回调函数有一个参数,base64的字符串数据
     */
    function dealImage(path, obj, callback){
        var img = new Image();
        img.src = path;
        img.onload = function(){
            var that = this;
            // 默认按比例压缩
            var w = that.width,
                h = that.height,
                scale = w / h;
                w = obj.width || w;
                h = obj.height || (w / scale);
            var quality = 0.7;        // 默认图片质量为0.7
            
            //生成canvas
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            
            // 创建属性节点
            var anw = document.createAttribute("width");
            anw.nodeValue = w;
            var anh = document.createAttribute("height");
            anh.nodeValue = h;
            canvas.setAttributeNode(anw);
            canvas.setAttributeNode(anh);
                  
            ctx.drawImage(that, 0, 0, w, h);
            // 图像质量
            if(obj.quality && obj.quality <= 1 && obj.quality > 0){
                quality = obj.quality;
            }
            // quality值越小,所绘制出的图像越模糊
            var base64 = canvas.toDataURL('image/jpeg', quality );
            // 回调函数返回base64的值
            callback(base64);
        }
    }
    
    // 调用函数处理图片                 
    dealImage("路径", {
    // 注意:在pc端可以用绝对路径或相对路径,移动端最好用绝对路径(因为用take photo后的图片路径,我没有试成功(如果有人试成功了可以分享一下经验))
      width : 200
    }, function(base){
    //直接将获取到的base64的字符串,放到一个image标签中就可看到测试后的压缩之后的样式图了
      document.getElementById("transform").src = base;
      console.log("压缩后:" + base.length / 1024 + "  " + base);    
    })
    

      PS:获取到图片,利用H5 canvas技术进行图片数据化为 base64 的字符串,最后传到后台进行,后台将base64的字符串数据进行图像化储存。

  • 相关阅读:
    Oracle 推出 ODAC for Entity Framework 和 LINQ to Entities Beta版
    Entity Framework Feature CTP 5系列文章
    MonoDroid相关资源
    MSDN杂志上的Windows Phone相关文章
    微软学Android Market推出 Web Windows Phone Marketplace
    使用 Visual Studio Agent 2010 进行负载压力测试的安装指南
    MonoMac 1.0正式发布
    Shawn Wildermuth的《Architecting WP7 》系列文章
    使用.NET Mobile API即51Degrees.mobi检测UserAgent
    MongoDB 客户端 MongoVue
  • 原文地址:https://www.cnblogs.com/hejianrong/p/6423992.html
Copyright © 2011-2022 走看看