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自身有转化的方法，具体请参考别的文章