js上傳圖片,利用canvas實現圖片壓縮

kaka 發布于2019-08-23 16:27 / 3551人閱讀

摘要：最近項目中的一個基礎功能手機上傳圖片技術棧利用進行壓縮這個應該都比較熟悉利用獲取照片旋轉角度屬性，因為有些手機機型會因為拍照時手機的方向使拍的照片帶一個旋轉角度的屬性核心代碼照片角度屬性創建臨時畫布等比壓縮旋轉度旋轉度旋轉

最近項目中的一個基礎功能-----手機上傳圖片
技術棧：
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圖片壓縮上傳

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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