美文网首页前端女的踩坑之路
图片上传,压缩方法

图片上传,压缩方法

作者: 杉沐 | 来源:发表于2019-03-22 16:07 被阅读0次

1、点击图片上传,拿到图片,转化base64,然后在执行图片压缩

addImg() {

  let _this = this;

  plus.gallery.pick(function (path) {

    plus.io.resolveLocalFileSystemURL(path,function (entry) {

      entry.file(function (file) {

        let files = {

          src: '',

          name: file.name

        };

        let reader = new plus.io.FileReader();

        reader.readAsDataURL(file);   // 读出base64

        reader.onloadend = function (e) {

          _this.canvasDataURL(e.target.result,{

            quality: 0.7

          },function (base64Codes) {

            files.src = base64Codes;

            _this.fileUp(files);

          });

        };

        _this.$toast.loading({

          duration: 10000,// 持续展示toast

          forbidClick: true,// 禁用背景点击

          loadingType: 'spinner',

         message: '正在上传...'

        });

      });

    });

  },function (err) {

  },null);

},

2、图片压缩的方法

canvasDataURL(path,obj,callback) {

  let img = new Image();

  img.src= path;

  img.onload= function () {

    let that = this;  //默认按比例压缩

    let w = that.width,

h = that.height,

scale = w / h;

    w = obj.width || w;

    h = obj.height || (w / scale);

    let quality = 0.7; // 默认图片质量为0.7

    //生成canvas

    let canvas = document.createElement('canvas');

    let ctx = canvas.getContext('2d');

    // 创建属性节点

    let anw = document.createAttribute('width');

    anw.nodeValue= w;

    let 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值越小,所绘制出的图像越模糊

    let base64 = canvas.toDataURL('image/jpeg',quality);

    // 回调函数返回base64的值

    callback(base64);

  };

},

相关文章

  • 提高上传效率,iOS图片压缩总结

    最近项目中用到七牛上传图片,多张上传时,png图片大,上传极慢,特地研究了一下图片压缩的方法。 两种压缩图片的方法...

  • iOS - 图片压缩

    1,图片尺寸压缩 方法举例: 2,尺寸不变,大小压缩 举例:ASI上传图片时, 3,QBImagePickerCo...

  • 图片上传,压缩方法

    1、点击图片上传,拿到图片,转化base64,然后在执行图片压缩 addImg() { let _this = ...

  • IOS中图片压缩

    需求:把图片压缩上传到服务器 方法一 像素压缩: UIImageJPEGRepresentation UIImag...

  • Android图片压缩

    方法一:质量压缩 这种压缩方法不压缩bitmap的内存,而是在上传下载时的图片的大小变小,除了这种压缩方法,其他的...

  • iOS 网络上传图片

    上传图片 构造参数(NSArray *)files 上传图片—压缩 压缩到小于(...

  • iPic for Mac(图床神器) v1.7.0中文免费版

    上传图片相关设置 上传前压缩图片 可以在 iPic 的 偏好设置 中开启「上传前压缩图片」选项,目前支持压缩的图片...

  • Vue上传图片压缩的问题

    上传图片太大,需要前台进行图片压缩上传图片大于100* 1024 的用canvas 来压缩来解决然后IOS拍照上传...

  • 图片压缩上传

    参考1-HTML5实现图片压缩上传功能参考2-移动前端—图片压缩上传实践参考3-移动端H5图片压缩上传 大体步骤 ...

  • 前端学习之路——图片上传压缩

    废话不多少,直接上代码! 压缩图片函数 调用函数 图片上传与压缩 图片上传与压缩就是这么简单,欢迎大家点评指导。

网友评论

    本文标题:图片上传,压缩方法

    本文链接:https://www.haomeiwen.com/subject/ayelvqtx.html