js 复制html元素通过canvas绘制出来转成图片

要通过canvas绘制出来并转换成图片，可以使用以下步骤：

1. 获取要复制的HTML元素的引用。
2. 创建一个canvas元素，并设置其宽度和高度与要复制的元素相同。
3. 获取canvas的上下文。
4. 使用context.drawWindow()方法将要复制的元素绘制到canvas上。
5. 使用toDataURL()方法将canvas转换为图片的base64编码。
6. 创建一个新的Image元素，并将base64编码设置为其src属性。
7. 将Image元素添加到页面上，或者使用它进行其他操作。

下面是一个示例代码：

// 获取要复制的HTML元素的引用
var elementToCopy = document.getElementById('elementId');

// 创建canvas元素
var canvas = document.createElement('canvas');
canvas.width = elementToCopy.offsetWidth;
canvas.height = elementToCopy.offsetHeight;

// 获取canvas的上下文
var context = canvas.getContext('2d');

// 将要复制的元素绘制到canvas上
context.drawWindow(window, elementToCopy.offsetLeft, elementToCopy.offsetTop, elementToCopy.offsetWidth, elementToCopy.offsetHeight, 'rgb(255,255,255)');

// 将canvas转换为图片的base64编码
var dataURL = canvas.toDataURL();

// 创建一个新的Image元素
var image = new Image();
image.src = dataURL;

// 将Image元素添加到页面上
document.body.appendChild(image);

在上面的代码中，将elementId替换为要复制的HTML元素的ID。然后，将canvas转换的图片添加到页面上，你也可以根据需要进行其他操作，比如将图片保存到本地等。