摘要：發布視頻時候，經常需要上傳同時上傳視頻的縮略圖，近日，應產品經理的的要求，需要做一個發布視頻動態的功能，我第一反應就想到了的標簽和，在這里記錄下我完成該功能的過程首先，整體思路是創建一個，然后創建一個和一個畫筆，調用畫筆的方法，將作為參數，

發布視頻時候，經常需要上傳同時上傳視頻的縮略圖，近日，應產品經理的的要求，需要做一個發布視頻動態的功能，我第一反應就想到了H5的標簽vidio和canvas，在這里記錄下我完成該功能的過程：
首先，整體思路是創建一個vidio，然后創建一個canvas和一個畫筆，調用畫筆的drawImage方法，將vidio作為參數，就會畫出該視頻的縮略圖。

二話不說擼代碼：

function creatImg() {
  const video = document.getElementById("videoPreview");
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  const imgHeight = video.videoHeight;
  const imgWidth = video.videoWidth;
  ctx.drawImage(video, 0, 0, imgWidth, imgHeight);

  const imgSrc = canvas.toDataURL("image/png");

  console.log(imgSrc);
}

該方法是在上傳視頻發送ajax成功的回調函數中調用的，

  // 上傳視頻
  $("#video").on("change", (e) => {
    const video = e.currentTarget.files[0];
    const formData = new FormData();
    formData.append("file", video);
    
    $.ajax({
      url: videourl,
      crossDomain: true,
      data: formData,
      dataType: "json",
      method: "POST",
      contentType: false,
      processData: false,
      timeout: 0,
    }).done((jsonData) => {
      //設置video標簽的src操作
      setTimeout(() => {
        creatImg();
      }, 500);
    }).fail(() => {
      layer.alert("上傳失敗", { shift: 5 });
    })
  });

這樣就完成這個功能了......開玩笑，怎么能讓你好過？運行后報了如下bug：

這個bug的意思是：臟的canvas不會被引入，出現這個問題的原因是canvas中引用的視頻對象跨域了，從而污染了canvas，解決問題的方法是在canvas中引入本地的視頻對象，其實做法很簡單，改變一下creatImage引用的位置，在類型為file的input標簽數組中取到video對象，這里的video對象是本地的，從而不會出現跨域的現象，如下面代碼所示：

  $("#video").on("change", (e) => {
    const video = e.currentTarget.files[0];
    creatImg(video);

    // const videoName = video.name;
    const formData = new FormData();
    formData.append("file", video);

    const index = layer.load(2);

    $.ajax({
      url: `${upload_url}/toServer`,
      crossDomain: true,
      data: formData,
      dataType: "json",
      method: "POST",
      contentType: false,
      processData: false,
      timeout: 0,
    }).done((jsonData) => {
      //這是video的src屬性值的相關操作
    }).fail(() => {
      layer.alert("上傳失敗", { shift: 5 });
    })
  });

const video = e.currentTarget.files[0];這里的video是本地的video對象，接下來，我們優化一下creatImg函數，如下代碼所示：

function creatImg(stream) {
  const video = document.createElement("video");

  video.addEventListener("loadedmetadata", function loadedmetadata() {
    setTimeout(() => {
      const canvas = document.createElement("canvas");
      canvas.width = this.videoWidth;
      canvas.height = this.videoHeight;
      const ctx = canvas.getContext("2d");
      ctx.drawImage(this, 0, 0);

      const image = new Image();
      image.src = canvas.toDataURL("image/png");
      image.onload(() => {
        const formData = new FormData();
        formData.append("file", dataURItoBlob(canvas.toDataURL("image/png")), `${+new Date()}.png`);

        $.ajax({
          url: upload_url,
          crossDomain: true,
          data: formData,
          dataType: "json",
          method: "POST",
          contentType: false,
          processData: false,
        }).done((jsonData) => {
          //.....
          //將值存儲在id為thumbnail的input標簽當中的value屬性當中
          const body = jsonData.body;
          $("#thumbnail").val(body);
        }).fail(() => {
          layer.alert("上傳失敗");
        });
      });
    }, 300);
  }, false);

  video.src = URL.createObjectURL(stream);
  video.play();
}

創建canvas，創建畫筆，將video對象傳入畫出圖片，這一系列操作都是在video加載之后完成的，所以，所有操作都在video監聽的loademetadata的回調函數當中完成的，在圖片畫好以后需要將該圖片上傳到服務器，通過FormData對象來生成用于ajax向服務器發送的name：value的鍵值對，在給FormData添加鍵值對是調用append方法，append方法的第一個參數字段名，第二個參數是字段值，這里的字段值是一個Blob對象，第三個參數是文件名稱，這里創建Blob的方法是 dataURItoBlob方法，如下面代碼所示，因為canvas.toDataURL的方法返回的是圖片的Base64的編碼，所以這個函數的作用就是將Base64的編碼轉換成Blob對象，具體過程如代碼所示：

function dataURItoBlob(dataURI) {
  const binary = atob(dataURI.split(",")[1]);
  const array = [];
  for (let i = 0; i < binary.length; i += 1) {
    array.push(binary.charCodeAt(i));
  }
  return new Blob([new Uint8Array(array)], { type: "image/png" });
}

這里首先調用window的atob的方法，將被編譯成的Base64的數據解碼成二進制的數據，接下來調用binary對象的charCodeAt方法來將制定位置上的二進制數據進行unicode編碼，并把所有的編碼后的數據存儲在數組當中，最后根據這個數組創建一個Unit8Array的對象，該對象是無符號8位整數，因為初始化Blob時的第一個參數必須是數組，所以要把這個8位無符號整數存放在數組當中。

總結：在完成這個功能的過程中涉及道幾個重要的知識點，羅列在下面，我將在后面的相關文章當中逐一具體介紹：
1、canvas的video必須是同域的，如果video跨域了，那么將會污染canvas
2、在向服務器發送圖片的時候，需要用到幾個重要的對象和方法

FormData對象：可以讓XMLHttpRequest發送鍵值對組成的對象

window.atob方法：將Base64的數據解碼成二進制的數據

binary.charCodeAt方法：將二進制的數據進行unicode編碼

Uint8Array對象：通過傳入的數組創建一個無符號的八位整數

Blob對象：不可變的，原始數據的類似文件對象