使用canvas實現(xiàn)圖片壓縮

only_do 發(fā)布于2019-08-22 11:03 / 3249人閱讀

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

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

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

噢，有個注意點:

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

開始壓縮

創(chuàng)建一個compressImage函數(shù)，將之圖片的地址url作參數(shù)傳入：

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() 方法接受兩個參數(shù)，type和encoderOptions

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

toDataURL()返回的是base64字符串，如果要轉(zhuǎn)成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
}

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

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

再見

云服務(wù)器 GPU云服務(wù)器使用canvas畫圖 js實現(xiàn)視頻壓縮 php實現(xiàn)頁面壓縮圖片壓縮

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91697.html

相關(guān)文章

vue下實現(xiàn)input實現(xiàn)圖片上傳，壓縮，拼接以及旋轉(zhuǎn)

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

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

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

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

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

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

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

CoXie 2019-08-22 15:23 評論0 收藏0
基于canvas的圖片壓縮函數(shù)實現(xiàn)

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

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