小編給大家分享一下圖片上傳及canvas壓縮的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比大石橋網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式大石橋網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋大石橋地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴(lài)。

我們通常在做圖片上傳的時(shí)候都會(huì)遇上這樣的情況，一是后端接口限制上傳圖片的大小，或者是即使后端沒(méi)有限制大小，因?yàn)閳D片太大在前端渲染時(shí)太慢，造成頁(yè)面加載體驗(yàn)較差。因此我們很有必要對(duì)上傳的圖片進(jìn)行壓縮。

本文主要包括以下流程：

• 用戶通過(guò)input框選擇圖片

• 使用FileReader進(jìn)行圖片預(yù)覽

• 將圖片繪制到canvas畫(huà)布上

• 使用canvas畫(huà)布的能力進(jìn)行圖片壓縮

• 將壓縮后的Base64(DataURL)格式的數(shù)據(jù)轉(zhuǎn)換成Blob對(duì)象進(jìn)行上傳

Input 標(biāo)簽來(lái)獲取圖片

通過(guò)設(shè)置input標(biāo)簽的type屬性為file，來(lái)讓用戶可以選擇文件，設(shè)置accept限制選擇的文件類(lèi)型，綁定onchange事件，來(lái)獲取確認(rèn)選擇后的文件

<input type="file" accept="image/*" onchange="loadFile(event)"

FileReader

FileReader是什么，我們先來(lái)看看官方文檔的介紹

FileReader 對(duì)象允許 Web 應(yīng)用程序異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對(duì)象指定要讀取的文件或數(shù)據(jù)。

FileReader常用的兩個(gè)方法如下：

• FileReader.onload:處理load事件。即該鉤子在讀取操作完成時(shí)觸發(fā)，通過(guò)該鉤子函數(shù)可以完成例如讀取完圖片后進(jìn)行預(yù)覽的操作，或讀取完圖片后對(duì)圖片內(nèi)容進(jìn)行二次處理等操作。

• FileReader.readAsDataURL：讀取方法，并且讀取完成后，result屬性將返回Data URL格式（Base64 編碼）的字符串，代表圖片內(nèi)容。

在圖片上傳中，我們可以通過(guò)readAsDataURL()方法進(jìn)行了文件的讀取，并且通過(guò)result屬性拿到了圖片的Base64(DataURL)格式的數(shù)據(jù)，然后通過(guò)該數(shù)據(jù)實(shí)現(xiàn)了圖片預(yù)覽的功能

<div class="container">
  <input type="file" accept="image/*" onchange="loadFile(event)" />
</div>
<script>
  const loadFile = function (event) {
    let file =  event.target.files[0]
    const reader = new FileReader()
    reader.onload = function () {
      console.log(reader.result)
      ...
    }
    reader.readAsDataURL(file)
  }
</script>

canvas 壓縮圖片

這是圖片上傳壓縮的核心所在，我們先使用CanvasRenderingContext2D.drawImage()方法將上傳的圖片文件在畫(huà)布上繪制出來(lái)，再使用Canvas.toDataURL()將畫(huà)布上的圖片信息轉(zhuǎn)換成base64(DataURL)格式的數(shù)據(jù)。

drawImage()

drawImage()方法在畫(huà)布上繪制圖像、畫(huà)布或視頻。drawImage()方法也能夠繪制圖像的某些部分，以及/或者增加或減少圖像的尺寸。參數(shù)如下

• img 規(guī)定要使用的圖像、畫(huà)布或視頻。

• sx 可選。開(kāi)始剪切的 x 坐標(biāo)位置。

• sy 可選。開(kāi)始剪切的 y 坐標(biāo)位置。

• swidth 可選。被剪切圖像的寬度。

• sheight 可選。被剪切圖像的高度。

• x 在畫(huà)布上放置圖像的 x 坐標(biāo)位置。

• y 在畫(huà)布上放置圖像的 y 坐標(biāo)位置。

• width 可選。要使用的圖像的寬度。（伸展或縮小圖像）

• height 可選。要使用的圖像的高度。（伸展或縮小圖像）

var cas = document.querySelector('canvas')
var ctx = cas.getContext('2d')
// 先創(chuàng)建圖片對(duì)象
var img = new Image()
img.src = './images/1.jpg'

// 圖片加載完之后
img.onload = function () {
  ctx.drawImage(img, 206, 111, 32, 38, 100, 100, 32, 38)
}

Canvas.toDataURl()

Canvas.toDataURl()方法可以將canvas畫(huà)布上的信息轉(zhuǎn)換為base64(DataURL)格式的圖像信息，純字符的圖片表示形式。該方法接收 2 個(gè)參數(shù)：

• mimeType(可選): 表示需要轉(zhuǎn)換的圖像的mimeType類(lèi)型。默認(rèn)值是image/png，還可以是image/jpeg，image/webp等。

• quailty(可選)：quality 表示轉(zhuǎn)換的圖片質(zhì)量。范圍是 0 到 1。圖片的mimeType需要是image/jpeg或者image/webp，其他mimeType值無(wú)效。默認(rèn)壓縮質(zhì)量是 0.92。

var canvas = document.createElement('canvas')
canvas.toDataURL("image/jpeg" 0.8)

到這里，我們先來(lái)上 canvas 壓縮圖片的代碼

function compress(base64, quality, mimeType) {
  let canvas = document.createElement('canvas')
  let img = document.createElement('img')
  img.crossOrigin = 'anonymous'
  return new Promise((resolve, reject) => {
    img.src = base64
    img.onload = () => {
      let targetWidth, targetHeight
      if (img.width > MAX_WIDTH) {
        targetWidth = MAX_WIDTH
        targetHeight = (img.height * MAX_WIDTH) / img.width
      } else {
        targetWidth = img.width
        targetHeight = img.height
      }
      canvas.width = targetWidth
      canvas.height = targetHeight
      let ctx = canvas.getContext('2d')
      ctx.clearRect(0, 0, targetWidth, targetHeight) // 清除畫(huà)布
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
      let imageData = canvas.toDataURL(mimeType, quality / 100)
      resolve(imageData)
    }
  })
}

將 base64 轉(zhuǎn)化為文件

• 通過(guò)window.atob將base-64字符串解碼為binaryString（二進(jìn)制文本）；

• 將binaryString構(gòu)造為multipart/form-data格式；

• 用Uint8Array將multipart格式的二進(jìn)制文本轉(zhuǎn)換為ArrayBuffer。

function dataUrlToBlob(base64, mimeType) {
  let bytes = window.atob(base64.split(',')[1])
  let ab = new ArrayBuffer(bytes.length)
  let ia = new Uint8Array(ab)
  for (let i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i)
  }
  return new Blob([ab], { type: mimeType })
}

將圖片上傳到服務(wù)端

創(chuàng)建一個(gè)FormData，把blobappend 到FormData里面請(qǐng)求服務(wù)端接口，提交圖片

function uploadFile(url, blob) {
  let formData = new FormData()
  let request = new XMLHttpRequest()
  formData.append('image', blob)
  request.open('POST', url, true)
  request.send(formData)
}

ps：在實(shí)際開(kāi)發(fā)中，我們要不要把圖片轉(zhuǎn)化為FormData形式上傳到服務(wù)端，這就看具體的業(yè)務(wù)需要了。我們可以上圖片上傳到騰訊云，直接返回一個(gè)'https.xxx.jgp'的圖片 url 用于上傳。

以上是“圖片上傳及canvas壓縮的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前名稱(chēng)：圖片上傳及canvas壓縮的示例分析-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://www.chinadenli.net/article18/peidp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、面包屑導(dǎo)航、微信小程序、全網(wǎng)營(yíng)銷(xiāo)推廣、企業(yè)建站、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)