如何直接保存浏览器渲染生成的缩放图片？

没问题，我来给你几个实用的方法，帮你保存Chrome里按width属性缩放后的图片：

方法一：开发者工具捕获节点截图（最推荐） #

这是最精准且省心的方式，直接捕获浏览器渲染后的图片节点：

• 右键页面上的缩放图片，选择「检查」打开开发者工具
• 在Elements面板中，确保选中了对应的<img>标签（开发者工具会自动定位到该节点）
• 右键选中的<img>标签，在弹出菜单里选择「Capture node screenshot」
• 浏览器会自动下载这张渲染后的300px宽度图片，完全和页面显示一致

方法二：使用Chrome区域截图功能 #

如果只需要截取图片区域，也可以用内置的截图工具：

• 按下Ctrl+Shift+I（Windows/Linux）或Cmd+Opt+I（Mac）打开开发者工具
• 按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）调出命令面板
• 在面板中输入「Capture area screenshot」并选中，然后用鼠标框选页面上的缩放图片区域，完成后即可保存

方法三：通过Canvas导出缩放后的图片 #

如果需要自定义导出设置，可以用控制台代码生成并下载：

1. 打开开发者工具的Console面板
2. 粘贴并执行以下代码：

// 定位目标图片
const targetImg = document.querySelector('img[src="big_image.jpg"]');
// 创建匹配尺寸的画布
const canvas = document.createElement('canvas');
canvas.width = targetImg.offsetWidth;
canvas.height = targetImg.offsetHeight;
// 将图片绘制到画布
const ctx = canvas.getContext('2d');
ctx.drawImage(targetImg, 0, 0, canvas.width, canvas.height);
// 生成下载链接并触发下载
const downloadLink = document.createElement('a');
downloadLink.download = 'scaled_big_image.jpg'; // 自定义下载文件名
downloadLink.href = canvas.toDataURL('image/jpeg', 0.9); // 0.9是图片质量，范围0-1
downloadLink.click();

执行后浏览器会自动下载缩放后的图片，你可以修改代码里的download值来更改文件名。

注意：如果图片是跨域资源，Canvas方法可能会因为浏览器的同源策略限制而无法使用，这时候优先用前两种方法。

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