国产高清在线免费观看-国产高清在线免费无码-国产高清在线男人的天堂-国产高清在线视频-国产高清在线视频精品视频-国产高清在线视频伊甸园

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

圖片壓縮函數：

/* 
 * 圖片壓縮
 * 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

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

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

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

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

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

壓縮圖片結果對比：
大小對比：

分辨率對比：

壓縮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) => { // 文件讀取完成時觸發
    let result = e.target.result // base64格式圖片地址
    var image = new Image()
    image.src = result // 設置image的地址為base64的地址
    image.onload = () => { // 圖片加載完成后才能進行壓縮處理，從而轉換為base64 進行賦值
    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>