上傳圖片時候，遇到要上傳很大的圖片，上傳的時候就會很慢。所以，需要對圖片進(jìn)行壓縮處理來優(yōu)化上傳功能。

圖片壓縮函數(shù)：

/* 
 * 圖片壓縮
 * img    原始圖片
 * width   壓縮后的寬度
 * height  壓縮后的高度
 * ratio   壓縮比率 
 */
 function compress(img, width, height, ratio) {        
   var canvas, ctx, img64;
        
   canvas = document.createElement('canvas');        
   canvas.width = width;
   canvas.height = height;
        
   ctx = canvas.getContext("2d");        
   ctx.drawImage(img, 0, 0, width, height);
        
   img64 = canvas.toDataURL("image/jpeg", ratio);
        
   return img64;
 }123456789101112131415161718192021

圖片壓縮函數(shù)，返回 base64 格式的圖片數(shù)據(jù)。 其中壓縮比率ratio取值（0 - 1 之間），ratio越大圖片質(zhì)量越高。

這里將圖片轉(zhuǎn)為 jpeg格式，因為轉(zhuǎn)為 png 格式的話，圖片的 base64 比轉(zhuǎn)為 jpeg 的要長不少。

<input type="file" accept="image/*" name="imageFile" @change="upload">1

上傳圖片后 @change綁定的upload 函數(shù)將被觸發(fā)，在這個函數(shù)中獲取到圖片的資源，將它壓縮并利用canvas繪制出來。

  upload () {
   let file = document.queryselector('input[type=file]').files[0] // 獲取選擇的文件，這里是圖片類型
   let reader = new FileReader()
   reader.readAsDataURL(file) //讀取文件并將文件以URL的形式保存在resulr屬性中 base64格式
   reader.onload = (e) => { // 文件讀取完成時觸發(fā)
    let result = e.target.result // base64格式圖片地址
    var image = new Image()
    image.src = result // 設(shè)置image的地址為base64的地址
    image.onload = () => { // 圖片加載完成后才能進(jìn)行壓縮處理，從而轉(zhuǎn)換為base64 進(jìn)行賦值
    let width = image.width // 圖片寬度
    let height = image.height    let dataUrl = this.compress(image, width, height, 0.7)
    document.getElementById("test").src = dataUrl   }
   }
  }12345678910111213141516

壓縮圖片結(jié)果對比：
大小對比：

分辨率對比：

壓縮2M的圖片：

大小對比：

分辨率對比：

demo完整版代碼：

<template>
  <div>
  <input type="file" accept="image/*" name="imageFile" @change="upload">
    <img id="test" crossorigin alt="">
 </div></template><script>export default {
 name: '',
 data () {
  return {
  }
 },
 components: {
 },
 created () {
 },
 methods: {
  upload () {
   let file = document.queryselector('input[type=file]').files[0] // 獲取選擇的文件，這里是圖片類型
   let reader = new FileReader()
   reader.readAsDataURL(file) //讀取文件并將文件以URL的形式保存在resulr屬性中 base64格式
   reader.onload = (e) => { // 文件讀取完成時觸發(fā)
    let result = e.target.result // base64格式圖片地址
    var image = new Image()
    image.src = result // 設(shè)置image的地址為base64的地址
    image.onload = () => { // 圖片加載完成后才能進(jìn)行壓縮處理，從而轉(zhuǎn)換為base64 進(jìn)行賦值
    let width = image.width // 圖片寬度
    let height = image.height    let dataUrl = this.compress(image, width, height, 0.7)
    document.getElementById("test").src = dataUrl   }
   }
  },
  /*
   * 圖片壓縮
   * img   原始圖片
   * width  壓縮后的寬度
   * height  壓縮后的高度
   * ratio  壓縮比率
  */
  compress (img, width, height, ratio) {
   let canvas, ctx, img64;
   canvas = document.createElement('canvas')
   canvas.width = width;
   canvas.height = height;
   ctx = canvas.getContext("2d");
   ctx.drawImage(img, 0, 0, width, height);
   img64 = canvas.toDataURL("image/jpeg", ratio);
   return img64;
  }
 }}</script><style lang="less" scoped></style>