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

    function preview_picture(pic){
      var r=new FileReader();
      r.readAsDataURL(pic);
      r.onload=function(e){
        dealImage(this.result,{600},function(data){
                    picture=data
              $('#pic-box').attr("src",data);
            });
      }
    }
    
    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);
      }
    }
  • 相关阅读:
    PHP 对Memcache的使用实例
    PHP Memcache 扩展安装
    Effective STL 读书笔记
    windows下安装和使用scrapy
    使用insert ignore来避免向数据库重复插入数据
    2017年末
    归并排序
    二叉树的中序遍历
    正则表达式
    tinymq学习小结
  • 原文地址:https://www.cnblogs.com/zjx304/p/9837847.html
Copyright © 2011-2022 走看看