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

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

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

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

前面就不詳細(xì)說(shuō)了，開(kāi)始?jí)嚎s咯 ( ′ ▽ ` )?

噢，有個(gè)注意點(diǎn):

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

開(kāi)始?jí)嚎s

創(chuàng)建一個(gè)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
  }
},

這里說(shuō)說(shuō)

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

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

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

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
}

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

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

再見(jiàn)

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/91697.html

相關(guān)文章

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

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

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

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

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

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

ChristmasBoy 2019-08-29 17:22 評(píng)論0 收藏0
Vue使用mixins手寫(xiě)壓縮圖片代碼

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

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

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

neuSnail 2019-08-23 15:13 評(píng)論0 收藏0