js切割图片放在canvas上

你可以使用JavaScript的Canvas API来实现切割图片并放在Canvas上显示。下面是一个简单的示例代码：

// 获取图片元素
var img = document.getElementById('source-image');

// 创建Canvas元素
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

// 设置Canvas的尺寸与图片尺寸一致
canvas.width = img.width;
canvas.height = img.height;

// 将图片绘制到Canvas上
ctx.drawImage(img, 0, 0);

// 切割图片的起始坐标和宽高
var startX = 100;
var startY = 100;
var width = 200;
var height = 200;

// 创建新的Canvas元素用于显示切割后的图片
var croppedCanvas = document.createElement('canvas');
var croppedCtx = croppedCanvas.getContext('2d');

// 设置新Canvas的尺寸与切割尺寸一致
croppedCanvas.width = width;
croppedCanvas.height = height;

// 将切割后的图片绘制到新Canvas上
croppedCtx.drawImage(canvas, startX, startY, width, height, 0, 0, width, height);

// 将新Canvas添加到页面中显示
document.body.appendChild(croppedCanvas);

在这个示例中，我们首先获取要切割的图片元素，然后创建一个与图片尺寸相同的Canvas元素，并将图片绘制到Canvas上。接下来，我们定义了切割图片的起始坐标和宽高。然后，我们创建一个新的Canvas元素用于显示切割后的图片，并将切割后的图片绘制到新的Canvas上。最后，我们将新的Canvas添加到页面中以显示切割后的图片。

你可以根据具体需求修改切割的起始坐标和宽高，以及将切割后的图片显示在页面中的位置或使用其他方式处理切割后的图片数据。