如何使用JavaScript缩放并裁剪图片至300×300像素？

你的现有代码存在核心问题：图片加载是异步操作，直接调用drawImage时图片大概率还未加载完成，会导致绘制失败。下面是修正后的完整实现方案，同时兼顾缩放与裁剪逻辑：

核心逻辑 #

1. 等待图片加载完成后再执行绘制
2. 先计算缩放比例，让原图缩放到能覆盖300×300画布的尺寸
3. 按需求裁剪（默认居中，支持指定区域），最终输出300×300的图片

修正后的代码 #

function cropAndResizeImage(imagePath, cropX = 0, cropY = 0) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        // 跨域图片需添加此配置，同时服务器要开启CORS
        img.crossOrigin = 'anonymous';
        img.src = `data:image/png;base64,${imagePath}`;

        img.onload = function() {
            const targetSize = 300;
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = targetSize;
            canvas.height = targetSize;

            // 计算缩放比例：确保缩放后图片能完全覆盖目标画布
            const scale = Math.max(targetSize / img.width, targetSize / img.height);
            const scaledWidth = img.width * scale;
            const scaledHeight = img.height * scale;

            // 计算裁剪偏移（默认居中裁剪，如需指定区域可调整此处）
            const offsetX = (scaledWidth - targetSize) / 2 - cropX;
            const offsetY = (scaledHeight - targetSize) / 2 - cropY;

            // 执行缩放+裁剪绘制
            ctx.drawImage(
                img,
                offsetX, offsetY, targetSize, targetSize, // 源图裁剪区域
                0, 0, targetSize, targetSize // 目标画布绘制区域
            );

            const resultDataUrl = canvas.toDataURL();
            variables.imageCrop = resultDataUrl;
            resolve(resultDataUrl);
        };

        img.onerror = function() {
            reject(new Error('图片加载失败'));
        };
    });
}

// 使用示例
// cropAndResizeImage('你的base64图片字符串', 10, 10)
//   .then(dataUrl => console.log('处理完成:', dataUrl))
//   .catch(err => console.error(err));

关键说明 #

• 异步加载处理：通过onload事件确保图片加载完成后再绘制，避免尺寸获取错误或绘制空白
• 缩放适配：取宽高中较大的缩放比例，保证缩放后的图片能覆盖目标画布，不会出现黑边
• 裁剪控制：默认实现居中裁剪，若需要指定裁剪区域，可直接调整offsetX/offsetY的计算逻辑，或使用传入的cropX/cropY作为偏移量
• 跨域兼容：如果图片来自外部域名，需设置img.crossOrigin = 'anonymous'，同时服务器需配置CORS允许跨域访问

原代码问题修正 #

• 原代码未等待图片加载完成就执行drawImage，导致图片尺寸读取错误、绘制失败
• 原drawImage参数使用固定偏移75，缺乏自适应缩放逻辑，修正后加入了动态缩放比例计算，适配不同尺寸的原图

内容的提问来源于stack exchange，提问作者Adam Harmand