截取dom节点的图片

要截取DOM节点中的图片，可以使用HTML5中的Canvas API来实现。具体步骤如下：

1. 获取需要截取的DOM节点，可以使用document.querySelector()或document.getElementById()等方法获取。
2. 创建一个Canvas元素，并设置宽高与DOM节点一致。
3. 调用Canvas API中的drawImage()方法，将DOM节点绘制到Canvas上。
4. 使用Canvas API中的toDataURL()方法，将Canvas转换为Base64编码的图片数据。
5. 可以根据需要，将Base64编码的图片数据转换为Blob对象或直接插入到img标签中显示。

以下是示例代码：

const node = document.querySelector('.my-node'); // 获取需要截取的DOM节点
const canvas = document.createElement('canvas'); // 创建Canvas元素
const ctx = canvas.getContext('2d');
const rect = node.getBoundingClientRect(); // 获取节点位置信息
canvas.width = rect.width;
canvas.height = rect.height;
ctx.drawImage(node, 0, 0, rect.width, rect.height, 0, 0, rect.width, rect.height); // 绘制DOM节点到Canvas上
const dataURL = canvas.toDataURL('image/png'); // 转换为Base64编码的图片数据
const img = document.createElement('img');
img.src = dataURL; // 插入到img标签中显示
document.body.appendChild(img);

需要注意的是，如果截取的DOM节点中包含跨域图片，则Canvas无法正确绘制，需要对跨域图片进行特殊处理。