使用canvas實現圖片壓縮

only_do 發布于2019-08-22 11:03 / 3224人閱讀

摘要：如果超出取值范圍，將會使用默認值。返回的是字符串，如果要轉成進制測試結果由所拍攝的圖片上傳，由平均左右壓縮至再見

那，首先通過URL.createObjectURL(file)從file對象直接取得了圖片的地址

前面就不詳細說了，開始壓縮咯 ( ′ ▽ ` )?

噢，有個注意點:

每次調用createObjectURL的時候，一個新的URL對象就被創建了，即使是同一個file對象，也會創建一個新對URL對象，所以，為了最佳性能和內存使用，當不再需要這個對象的時候要URL.revokeObjectURL()釋放它。

開始壓縮

創建一個compressImage函數，將之圖片的地址url作參數傳入：

compressImage (url) {
  let cvs = document.createElement("canvas")
  let ctx = cvs.getContext("2d")
  let img = new window.Image()
  img.src = url
  img.onload = () => {
    cvs.width = img.width
    cvs.height = img.height
    setTimeout(() => {
      ctx.drawImage(img, 0, 0, cvs.width, cvs.height)
      this.newImageData = cvs.toDataURL("image/jpeg", 0.1)
    }, 0)
    this.showPreviewer = true
  }
},

這里說說

canvas.toDataURL(type, encoderOptions)
HTMLCanvasElement.toDataURL() 方法接受兩個參數，type和encoderOptions

type是可選的，圖片格式，默認是 image/png，encoderOptions表示圖片質量，在type為image/jpeg 或 image/webp時可以從 0 到 1 的區間內選擇圖片的質量。如果超出取值范圍，將會使用默認值 0.92。其他參數會被忽略。

toDataURL()返回的是base64字符串，如果要轉成2進制

convertToBinary (dataURI) {
  let byteString = window.atob(dataURI.split(",")[1])
  let ab = new ArrayBuffer(byteString.length)
  let ia = new Uint8Array(ab)
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i)
  }
  let bb = new window.Blob([ ab ])
  return bb
}

測試結果：由iphone6所拍攝的圖片上傳，由平均1.9M左右壓縮至170k

*?゜??*:.?..?.:*?"(*?▽?*)"?*:.?. .?.:*?゜??*

再見

云服務器 GPU云服務器使用canvas畫圖 js實現視頻壓縮 php實現頁面壓縮圖片壓縮

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91697.html

vue下實現input實現圖片上傳，壓縮，拼接以及旋轉

摘要：背景作為一名前端工作人員，相信大家在開發系統的時候，經常有遇到需要這么一種需求，就是需要為用戶保存上傳的圖片，很多小白遇到這個問題的時候，都會虎軀一震，以為會是一個棘手的問題，當你讀完這篇文章的時候，你會發現都是你瞎操作了，真相就是這么簡單背景作為一名前端工作人員，相信大家在開發系統的時候，經常有遇到需要這么一種需求，就是需要為用戶保存上傳的圖片，很多小白遇到這個問題的時候，都會虎...

megatron 2019-08-23 13:40 評論0 收藏0
vue下實現input實現圖片上傳，壓縮，拼接以及旋轉

摘要：背景作為一名前端工作人員，相信大家在開發系統的時候，經常有遇到需要這么一種需求，就是需要為用戶保存上傳的圖片，很多小白遇到這個問題的時候，都會虎軀一震，以為會是一個棘手的問題，當你讀完這篇文章的時候，你會發現都是你瞎操作了，真相就是這么簡單背景作為一名前端工作人員，相信大家在開發系統的時候，經常有遇到需要這么一種需求，就是需要為用戶保存上傳的圖片，很多小白遇到這個問題的時候，都會虎...

Invoker 2019-08-02 12:05 評論0 收藏0
vue下實現input實現圖片上傳，壓縮，拼接以及旋轉

摘要：背景作為一名前端工作人員，相信大家在開發系統的時候，經常有遇到需要這么一種需求，就是需要為用戶保存上傳的圖片，很多小白遇到這個問題的時候，都會虎軀一震，以為會是一個棘手的問題，當你讀完這篇文章的時候，你會發現都是你瞎操作了，真相就是這么簡單背景作為一名前端工作人員，相信大家在開發系統的時候，經常有遇到需要這么一種需求，就是需要為用戶保存上傳的圖片，很多小白遇到這個問題的時候，都會虎...

ChristmasBoy 2019-08-29 17:22 評論0 收藏0
Vue使用mixins手寫壓縮圖片代碼

摘要：一介紹本文將介紹再項目中通過對圖片進行壓縮后使用。把圖片能轉換成出發事件對賦值完成，觸發事件生成，調用回調函數。將圖片將轉成格式把轉換成文件四壓縮完成使用五參考鏈接壓縮圖片到以下一、介紹本文將介紹再Vue項目中通過js對圖片進行壓縮后使用。（純前端實現，不依賴后臺）主要使用Canvas.toDataURL(type, encoderOptions)對圖片大小進行調整參數描...

CoXie 2019-08-22 15:23 評論0 收藏0
基于canvas的圖片壓縮函數實現

摘要：由于圖片壓縮中使用了大量異步操作，這里使用語法處理異步問題基本思路是先將數據讀取為類型的數據，再將繪制到，通過的轉換為數據并壓縮數據，最后再將數據轉換為數據類型，再上傳到服務器。下面是具體的實現方式。由于圖片壓縮中使用了大量異步操作，這里使用es7 async 語法處理異步問題基本思路是:先將file數據讀取為DataUrl類型的數據，再將DataUrl繪制到canvas，通過ca...

neuSnail 2019-08-23 15:13 評論0 收藏0