canvas进阶之图像处理小例子

前言

在阅读完 canvas进阶之图像处理基础知识 后，想必大家对 canvas 图像处理有了一定的认知，那么接下来，咱们就玩点有意思的东西....

缩放图像

demo地址

给图片加上水印

• 导出水印base64图片：canvas.toDataURL()

demo地址

图片压缩

const imageResizer = (image64Data, maxWidth, callback) => {
  const img = new Image();
  img.src = data;
  img.onload = function () {
    const w = img.width;
    const h = img.height;
    let _w;
    let _h;

    if (w > h) {
      _w = maxWidth;
      _h = (h * _w) / w;
    } else {
      _h = maxWidth;
      _w = (_h * w) / h;
    }

    canvas.width = _w;
    canvas.height = _h;
    ctx.drawImage(img, 0, 0, _w, _h);
    callback(canvas.toDataURL());
  };
};

滤镜效果

demo地址