首先，需要建议一个canvas
<canvas id="canvas"></canvas>
其次，获取这个canvas 设置其宽高（不设置用css也行，但用js后续维护好修改），然后调用getContext方法获取绘画环境ctx，在创建image标签（先创建好在获取也可以），在其加载完只后，使用ctx.drawImage 将 image 添加进canvas
var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 400;
var ctx = canvas.getContext("2d");
debugger
var image = new Image();
image.src = require("./20230201132548.jpg");
image.onload = function() {
ctx.drawImage(this, 0, 0, 360, 360, 100, 100, 200, 200);
canvas.toDataURL('image/png');
}
导出图片的话，需使用canvas.toDataURL(‘image/png’)，即可导出文件流
drawImage方法，及其参数：
drawImage 方法有三种形态：
drawImage(image, dx, dy) 在画布指定位置绘制原图
drawImage(image, dx, dy, dw, dh) 在画布指定位置上按原图大小绘制指定大小的图
drawImage(image, sx, sy, sw, sh, dx, dy,
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 剪切图像，并在画布上定位被剪切的部分
