canvas日常使用实例

完整代码：github.com/MXHOO/canva…

压缩图片

1. 获取文件
2. 使用cxt.drawImage 在canvas上画
3. 利用canvas.toDataURL进行压缩
4. 具体实现

function compress(file) {
  return new Promise((reslove, reject) => {
    let afterResult = ''
    const img = new Image()
    getBase64(file).then(data => {
      img.src = data
    }).catch(error => console.log(error))
    img.onload = function() {
      const canvas = document.createElement('canvas')
      const context = canvas.getContext('2d')
      canvas.width = this.width
      canvas.height = this.height
      /*
    drawImage(img, sx, sy, swidth, sheight, x, y, width, height):在画布上绘制图像或视频, img为必填参数, 其他都为非必填
    参数：img: 要绘制的图片或视频
          sx: 开始裁剪的x坐标
          sy: 开始裁剪的y坐标
          swidth: 被裁剪图像的宽度
          sheight: 被裁减图像的高度
          x: 在画布上放置的x坐标
          y: 在画布上放置的y坐标
          width：要使用的图像的宽度（扩展/缩小）
          height：要使用的图像的宽度 （扩展/缩小）
    */
     context.drawImage(before, 0, 0)
      /* toDataURL(type, quailty): 返回一个包含图片展示的url
         参数: type: 图片格式，默认为image/png
               quailty: 当type为图片时，可以从 0 到 1 的区间内选择图片的质量
     */
      afterResult = canvas.toDataURL(file.type, 0.5)
      reslove(afterResult)
    }
    img.onerror = function(err) {
      reject(err)
    }
  }) 
}

添加水印

1. 根据需求画出水印图案
2. 将水印设置为背景
3. 具体实现

// 创建水印
function createImage(text){
  const canvas = document.createElement('canvas')
  const ctx= canvas.getContext('2d')
  canvas.height = 50
  canvas.width = 100
  ctx.font = '20px'
  ctx.fillStyle = "rgba(100,100,100,0.1)"
  ctx.fillText(text, 20, 20)
  ctx.rotate(30*Math.PI/180)
  return canvas.toDataURL('image/png')
}
// 添加水印
function watermark() {
  const url = createImage('测试数据')
  const watermark = document.getElementById('watermark')
  watermark.style.background = 'url(' + url + ') repeat top left'
}