js生成缩略图后上传并利用canvas重绘

JS生成缩略图并上传，可以分成以下几步进行：

1. 选择图片：通过input[type=file]标签或者拖拽上传等方式进行选择图片。
2. 根据图片宽高比例计算生成缩略图的宽高：设定缩略图的最大宽高和图片的原始宽高，通过比例计算出缩略图应该生成的宽高，以确保缩略图不会变形。
3. 利用canvas生成缩略图：将原始图片绘制在canvas中，设置canvas的宽高为缩略图宽高，使用context.drawImage函数将图片绘制在canvas上，然后将生成的图片保存为Blob对象。
4. 将Blob对象上传到服务器：使用XMLHttpRequest或者Fetch API进行上传，将Blob对象作为文件上传到服务器。
5. 展示缩略图：将生成的缩略图展示在页面上。

下面是两个示例：

示例1: 利用canvas生成缩略图的代码

// 根据宽高比例计算生成缩略图的宽高
function getThumbnailSize(imgWidth, imgHeight, thumbMaxWidth, thumbMaxHeight) {
  var widthRatio = thumbMaxWidth / imgWidth
  var heightRatio = thumbMaxHeight / imgHeight
  var ratio = Math.min(widthRatio, heightRatio)
  return {
    width: imgWidth * ratio,
    height: imgHeight * ratio
  }
}

// 生成缩略图并上传
function generateThumbnailAndUpload(file) {
  var img = new Image()
  var canvas = document.createElement('canvas')
  var ctx = canvas.getContext('2d')
  var thumbMaxWidth = 300
  var thumbMaxHeight = 300
  img.onload = function() {
    var size = getThumbnailSize(img.width, img.height, thumbMaxWidth, thumbMaxHeight)
    canvas.width = size.width
    canvas.height = size.height
    ctx.drawImage(img, 0, 0, size.width, size.height)
    canvas.toBlob(function(blob) {
      // 将Blob对象上传到服务器
      var xhr = new XMLHttpRequest()
      xhr.open('POST', '/upload')
      xhr.send(blob)
    }, file.type) // 指定生成的图片类型和压缩质量等参数
  }
  img.src = URL.createObjectURL(file)
}

示例2: 获取生成的缩略图数据并展示

// 获取生成的缩略图数据
function getThumbnailData(file) {
  return new Promise(function(resolve, reject) {
    var img = new Image()
    var canvas = document.createElement('canvas')
    var ctx = canvas.getContext('2d')
    var thumbMaxWidth = 300
    var thumbMaxHeight = 300
    img.onload = function() {
      var size = getThumbnailSize(img.width, img.height, thumbMaxWidth, thumbMaxHeight)
      canvas.width = size.width
      canvas.height = size.height
      ctx.drawImage(img, 0, 0, size.width, size.height)
      resolve(canvas.toDataURL(file.type)) // 返回生成的缩略图数据URL
    }
    img.src = URL.createObjectURL(file)
  })
}

// 获取选择的文件并展示
var fileInput = document.querySelector('input[type=file]')
var thumbnailImg = document.querySelector('.thumbnail-img')
fileInput.addEventListener('change', function(event) {
  var file = event.target.files[0]
  getThumbnailData(file).then(function(dataUrl) {
    thumbnailImg.src = dataUrl
    thumbnailImg.style.display = 'block'
  })
})

以上代码中，示例1中的getThumbnailSize函数用来计算生成的缩略图宽高，generateThumbnailAndUpload函数用来生成缩略图并上传，示例2中的getThumbnailData函数用来获取生成的缩略图数据，并展示在页面上。