canvas前端壓縮圖片和視頻首屏縮略圖並上傳到服務器

圖片：

        var img = document.createElement('img')
        img.src = window.URL.createObjectURL(fileObj.file)
        // 加載圖片成功
        img.onload = function() {
          var canvas = document.createElement('canvas')
          var context = canvas.getContext('2d')
          // 清除畫布
          canvas.width = size
          canvas.height = size
          context.clearRect(0, 0, size, size)
          // 圖片壓縮
          context.drawImage(img, 0, 0, size, size)
          // canvas轉爲blob並上傳
          canvas.toBlob(function(blob) {
            // 建立forme
            var xhr = new XMLHttpRequest()
            xhr.open('PUT', uploadSrc)// 注意跨域問題
            xhr.send(blob)
            xhr.onerror = function() {
              return
            }
          }, 'image/png')
        }

　　size爲自定義的大小，決定縮略圖的大小。

createObjectURL方法後面傳入的是文件對象，這裏爲圖片的文件

video縮略圖：

        var video = document.createElement('video')
        video.src = window.URL.createObjectURL(fileObj.file)
        // 加載圖片成功
        setTimeout(function () {
          var canvas = document.createElement('canvas')
          var context = canvas.getContext('2d')
          // 清除畫布
          canvas.width = size
          canvas.height = size
          context.drawImage(video, 0, 0, size, size)
          // canvas轉爲blob並上傳
          canvas.toBlob(function(blob) {
            // 建立forme
            var xhr = new XMLHttpRequest()
            xhr.open('PUT', uploadSrc)// 注意跨域問題
            xhr.send(blob)
            xhr.onerror = function() {
              return
            }
          }, 'image/png')
        }, 500)

　　此處要注意的是，多一個setTimeout方法，由於絕大部分視頻的首屏都是黑屏，爲了不尷尬，讓視頻走500毫秒

 

總體要注意的是須要測試瀏覽器是否符合canvas和Blob對象的兼容性。若是後端須要傳的是base64,則把canvas對象轉成base64就行，canvas自身有轉化的方法，具體請參考別的文章