前端JS 图片裁剪，Canvas，原生方法

CanvasRenderingContext2D.drawImage() - Web API 接口参考 | MDN

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const image = new Image(60, 45); // 使用可选的图像大小
image.onload = drawImageActualSize; // 加载图像时绘制

// 加载内部大小为300x227的CSS像素图像
image.src = 'rhino.jpg';

function drawImageActualSize() {
  // 对canvas元素设置 图像的原始大小
  canvas.width = this.naturalWidth;
  canvas.height = this.naturalHeight;

  // Will draw the image as 300x227, ignoring the custom size of 60x45
  // given in the constructor
  ctx.drawImage(this, 0, 0);

  // 要使用自定义尺寸，我们必须指定比例参数
  // 使用元素的width和height属性-绘制一个
  ctx.drawImage(this, 0, 0, this.width, this.height);
}