JavaScript 图片操作：动态加载、缩放、裁剪和分割

图片动态加载：在 JavaScript 中，可以使用 Image 对象来动态加载图片。通过创建一个 Image 对象，然后将图片的 URL 赋值给 Image 对象的 src 属性，即可实现图片的动态加载。

var img = new Image();
img.src = 'image.jpg';
img.onload = function() {
  // 图片加载完成后的逻辑
}

图片缩放：可以通过设置图片的宽度和高度属性来实现图片的缩放。

img.width = 100; // 设置宽度为 100px
img.height = 100; // 设置高度为 100px

图片裁剪：可以使用 canvas 来裁剪图片。先创建一个 canvas 元素，然后使用 drawImage 方法将图片绘制到 canvas 上，再使用 canvas 的裁剪方法进行裁剪。

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 100; // 设置 canvas 宽度为 100px
canvas.height = 100; // 设置 canvas 高度为 100px
ctx.drawImage(img, 10, 10, 100, 100, 0, 0, 100, 100); // 裁剪图片，从 (10, 10) 开始，裁剪宽度为 100，高度为 100，绘制到 canvas 的 (0, 0) 位置，宽度为 100，高度为 100
var croppedImage = canvas.toDataURL(); // 获取裁剪后的图片数据 URL

图片分割：可以使用 canvas 的 drawImage 方法和 clip 方法来实现图片的分割。先创建一个 canvas 元素，然后使用 drawImage 方法将图片绘制到 canvas 上，再使用 clip 方法进行分割，最后使用 drawImage 方法将分割后的图片绘制到 canvas 上。

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 200; // 设置 canvas 宽度为 200px
canvas.height = 200; // 设置 canvas 高度为 200px
ctx.drawImage(img, 0, 0, 200, 200); // 绘制原始图片到 canvas 上
ctx.clip(); // 进行裁剪，裁剪区域为 canvas 的大小
ctx.drawImage(img, 0, 0, 100, 100, 0, 0, 100, 100); // 绘制裁剪后的图片到 canvas 上，绘制位置为 (0, 0)，宽度为 100，高度为 100
ctx.drawImage(img, 100, 0, 100, 100, 100, 0, 100, 100); // 绘制裁剪后的图片到 canvas 上，绘制位置为 (100, 0)，宽度为 100，高度为 100

以上是一些常见的图片动态加载、缩放、裁剪和分割的方法，具体使用时可以根据实际需求进行调整。