### 实现图像裁剪后再调整大小的代码示例 以下是基于 Python 和 JavaScript 的两种实现方式，分别展示如何先裁剪图像再调整其大小。 --- #### 使用 Python (Pillow 库) Python 中可以利用 Pillow 库完成图像的裁剪和缩放操作。以下是一个完整的代码示例： ```python from PIL import Image def crop_and_resize_image(input_path, output_path, box, size): """ 裁剪并调整图像大小。 参数: input_path: 输入图像路径 output_path: 输出图像路径 box: 裁剪区域 (左, 上, 右, 下) size: 新的图像尺寸 (宽度, 高度) """ with Image.open(input_path) as img: cropped_img = img.crop(box) # 裁剪图像 resized_img = cropped_img.resize(size, Image.ANTIALIAS) # 调整大小 resized_img.save(output_path) # 保存结果 # 示例调用 input_image_path = 'example.jpg' output_image_path = 'result.jpg' crop_box = (100, 100, 400, 400) # 左上角坐标(100, 100)，右下角坐标(400, 400) new_size = (200, 200) # 新的图像尺寸 crop_and_resize_image(input_image_path, output_image_path, crop_box, new_size) ``` 上述代码通过 `Image.crop` 方法定义裁剪区域，并使用 `Image.resize` 方法调整图像大小[^1]。 --- #### 使用 JavaScript (Canvas API) 在浏览器端可以通过 Canvas API 完成类似的图像处理任务。以下是一个简单的 HTML 和 JavaScript 示例： ```html <canvas id="imageCanvas"></canvas> <img id="sourceImage" style="display:none;" src="example.jpg"> <script> const canvas = document.getElementById('imageCanvas'); const ctx = canvas.getContext('2d'); const img = document.getElementById('sourceImage'); img.onload = function () { const sourceBox = { sx: 100, sy: 100, sWidth: 300, sHeight: 300 }; // 原始裁剪框 const targetSize = { dx: 0, dy: 0, dWidth: 200, dHeight: 200 }; // 目标尺寸 canvas.width = targetSize.dWidth; canvas.height = targetSize.dHeight; ctx.drawImage( img, sourceBox.sx, sourceBox.sy, sourceBox.sWidth, sourceBox.sHeight, // 源裁剪区域 targetSize.dx, targetSize.dy, targetSize.dWidth, targetSize.dHeight // 目标绘制区域 ); // 将结果导出为图片 const resultImage = canvas.toDataURL(); console.log(resultImage); }; </script> ``` 此代码片段展示了如何使用 `ctx.drawImage` 方法指定源裁剪区域和目标绘制区域，从而实现裁剪和缩放功能[^3]。 --- ### 总结 无论是使用 Python 还是 JavaScript，都可以轻松实现图像的裁剪与缩放。Python 更适合服务器端批量处理，而 JavaScript 则适用于网页上的实时交互场景。 ---