js上传图片,利用canvas实现图片压缩

kaka 发布于2019-08-23 16:27 / 3532人阅读

摘要：最近项目中的一个基础功能手机上传图片技术栈利用进行压缩这个应该都比较熟悉利用获取照片旋转角度属性，因为有些手机机型会因为拍照时手机的方向使拍的照片带一个旋转角度的属性核心代码照片角度属性创建临时画布等比压缩旋转度旋转度旋转

最近项目中的一个基础功能-----手机上传图片
技术栈：
1、利用canvas进行压缩（这个应该都比较熟悉）
2、利用exif-js获取照片旋转角度属性，因为有些手机机型会因为拍照时手机的方向使拍的照片带一个旋转角度的属性

核心代码：

var _orientation; //照片角度属性
EXIF.getData(fileInput, function () {
    _orientation = EXIF.getTag(fileInput, "Orientation");
});
let reader = new FileReader();
reader.readAsDataURL(fileInput);
reader.onload = function (e) {
    var image = new Image();
    image.src = e.target.result;
    image.onload = function () {
      var canvas = document.createElement("canvas"); //创建临时画布
      var _width = this.width, _height = this.height, _ratio = _height / _width;
      //等比压缩
      if (this.width > 800) {
        _width = 800;
        _height = 800 * _ratio;
      }    
      canvas.width = _width;
      canvas.height = _height;
      var ctx = canvas.getContext("2d");
      switch (_orientation) {
        case 6:     // 旋转90度
          canvas.width = _height;
          canvas.height = _width;
          ctx.rotate(Math.PI / 2);
          ctx.drawImage(this, 0, -_height, _width, _height);
          break;
        case 3:     // 旋转180度
          ctx.rotate(Math.PI);
          ctx.drawImage(this, -_width, -_height, _width, _height);
          break;
        case 8:     // 旋转-90度
          canvas.width = _height;
          canvas.height = _width;
          ctx.rotate(3 * Math.PI / 2);
          ctx.drawImage(this, -_width, 0, _width, _height);
          break;
        default:
          ctx.drawImage(this, 0, 0, _width, _height);
      }
      //需要上传的数据对象
      const resultBase =dataURItoBlob(canvas.toDataURL("image/jpeg", 0.9));
      //...省略进行上传操作代码
    };
}
//将dataURI转成Blob用于上传
dataURItoBlob:function(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(",")[0].indexOf("base64") >= 0)
      byteString = atob(dataURI.split(",")[1]);
    else
      byteString = unescape(dataURI.split(",")[1]);

    // separate out the mime component
    var mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], {type:mimeString});
  }

GPU云服务器云服务器 js图片压缩上传 js压缩图片上传 js上传图片压缩插件 H5图片压缩上传

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103051.html

移动端H5图片上传的那些坑

摘要：上周做一个关于移动端图片压缩上传的功能。利用，进行图片的压缩，得到图片的的值上传文件。上周做一个关于移动端图片压缩上传的功能。期间踩了几个坑，在此总结下。大体的思路是，部分API的兼容性请参照caniuse：利用FileReader,读取blob对象,或者是file对象，将图片转化为data uri的形式。使用canvas,在页面上新建一个画布,利用canvas提供的API,...

Seay 2019-08-22 10:34 评论0 收藏0
前端文件上传(js/vue.js/axios/canvas图片压缩)

摘要：哈哈主要还是我嫌麻烦四上传图片这里的页面样式，图片压缩和预览都和上面一样，这里我主要配置一下的，让接口能够成功上传。如果想让用户有更好的体验，可以对图片进行一下压缩和本地预览。一、通过Form表单提交上传 HTML enctype属性必不可少上面一种方法通过表单自有属性进行提交，看似简单，但是也有其最大的缺点，那就是提交...

Luosunce 2019-08-23 10:25 评论0 收藏0
前端文件上传(js/vue.js/axios/canvas图片压缩)

摘要：哈哈主要还是我嫌麻烦四上传图片这里的页面样式，图片压缩和预览都和上面一样，这里我主要配置一下的，让接口能够成功上传。如果想让用户有更好的体验，可以对图片进行一下压缩和本地预览。一、通过Form表单提交上传 HTML enctype属性必不可少上面一种方法通过表单自有属性进行提交，看似简单，但是也有其最大的缺点，那就是提交...

Lsnsh 2019-08-02 11:04 评论0 收藏0
用element的upload组件实现多图片上传和压缩

摘要：我用做状态管理，七牛云做图床。关于该组件的其他用法可以在的官方文档查阅上传对图片进行压缩压缩图片的质量对图片进行压缩压缩图片实现起来比较简单。前端向后端请求上传。我用vuex做状态管理，七牛云做图床。项目地址：多图片上传组件效果展示 showImg(https://segmentfault.com/img/bVbocgG?w=960&h=516); 项目执行流程首先，让我们来分...

zorro 2019-07-31 10:03 评论0 收藏0
vue下实现input实现图片上传，压缩，拼接以及旋转

摘要：背景作为一名前端工作人员，相信大家在开发系统的时候，经常有遇到需要这么一种需求，就是需要为用户保存上传的图片，很多小白遇到这个问题的时候，都会虎躯一震，以为会是一个棘手的问题，当你读完这篇文章的时候，你会发现都是你瞎操作了，真相就是这么简单背景作为一名前端工作人员，相信大家在开发系统的时候，经常有遇到需要这么一种需求，就是需要为用户保存上传的图片，很多小白遇到这个问题的时候，都会虎...

megatron 2019-08-23 13:40 评论0 收藏0