在网页开发中，有时我们需要将页面中的 DIV 内容保存为带有扩展名的图像，HTML5 画布（Canvas）为我们提供了实现这一功能的有效途径。

我们要明确基本的思路。通过 HTML5 画布，可以将 DIV 的内容绘制到画布上，然后利用画布的相关方法将绘制的内容导出为图像文件。

要开始实现，我们需要获取 DIV 元素以及画布元素。可以使用 JavaScript 的 document.getElementById() 方法轻松获取到它们。例如：

const divElement = document.getElementById('yourDivId');
const canvas = document.getElementById('yourCanvasId');
const ctx = canvas.getContext('2d');

接下来，设置画布的尺寸，使其与 DIV 的尺寸相同，这样才能完整地绘制 DIV 的内容。

canvas.width = divElement.offsetWidth;
canvas.height = divElement.offsetHeight;

之后，使用 drawWindow 方法将 DIV 的内容绘制到画布上。不过，这一方法在不同浏览器中的支持情况有所差异，可能需要一些额外的处理。在某些情况下，我们可以通过创建一个新的 Image 对象，将 DIV 的截图作为图像源，然后绘制到画布上。

const img = new Image();
img.src = new XMLSerializer().serializeToString(divElement);
img.onload = function () {
    ctx.drawImage(img, 0, 0);
};

绘制完成后，就可以将画布上的内容导出为图像了。画布提供了 toBlob() 方法，它可以将画布内容转换为二进制大对象（Blob），然后我们可以利用 URL.createObjectURL() 创建一个对象 URL，从而实现下载功能。

canvas.toBlob((blob) => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'yourImageName.png';
    a.click();
    URL.revokeObjectURL(url);
}, 'image/png');

通过上述步骤，我们就能够将 DIV 的内容保存为带有扩展名的图像。需要注意的是，不同浏览器对于这些方法的支持可能存在细微差别，在实际应用中要进行充分的测试和兼容性处理。掌握这种方法，能为网页开发者在处理页面内容保存等功能时提供极大的便利，丰富网页的交互性和功能性。