关于前端dom节点转图片的方式(html2canvasy以及dom-to-image)

  let node = document.getElementById('hwLabelform');
            let that = this
            domtoimage.toPng(node, { quality: 1})
                .then(function (dataUrl) {
                    const a = document.createElement('a') // 生成一个a元素
                    const event = new MouseEvent('click') // 创建一个单击事件
                    a.download = $("label[name='ChemicalChineseName']")[0].innerText // 设置图片名称没有设置则为默认
                    a.href = dataUrl // 将生成的URL设置为a.href属性
                    a.dispatchEvent(event) // 触发a的单击事件
                })
                .catch(function (error) {
                    console.error('生成失败', error);
                });

DOM-to-image 是可以将任何 DOM 元素转换为 PNG 或 JPEG 格式的图像的 JavaScript 库。在使用 DOM-to-image 进行转换时，您可以通过设置不同的参数来控制转换的方式和输出。 以下是一些常用的 DOM-to-image 参数： - quality（可选）：设置输出图像的质量。质量值应为 0-1 之间的数字，默认为 0.95。 - backgroundColor（可选）：设置输出图像的背景颜色。可以使用任何 CSS 颜色值，包括颜色名称、十六进制值、RGB 值等。默认为透明背景。 - width（默认为元素宽度）：设置输出图像的宽度。可以是数字、字符串值，或者特定格式的字符串，如 "10cm"、"80%" 等。 - height（默认为元素高度）：设置输出图像的高度。可以是数字、字符串值，或者特定格式的字符串，如 "10cm"、"80%" 等。 - style（可选）：设置要为转换的元素应用的 CSS 样式。可以是对象、字符串或者函数类型。 - filter（可选）：转换图像时可以使用的自定义 CSS 滤镜。可以是字符串或对象类型。 - cacheBust（可选）：如果为 true，则每个请求都使用不同的 URL，以防止缓存。默认为 false。 这些参数可以根据您的需求进行设置和调整，以控制输出图像的质量、大小、样式和内容。通过调整这些参数，您可以根据您的需求和要求进行自定义的转换。

html2canvas(document.getElementById("hwLabelform"), {
                useCORS: true,// 开启跨域配置
                height: document.getElementById("hwLabelform").scrollHeight,//canvas高
                width: document.getElementById("hwLabelform").scrollWidth, //canvas宽
                scale: 4, //按比例增加分辨率 (2=双倍).
                dpi: window.devicePixelRatio * 4,//设备像素比
            }).then(canvas => {
                var imgData = canvas.toDataURL("image/jpeg");
                var a = document.createElement("a");
                document.body.appendChild(a);
                a.href = imgData;
                a.download = "";
                a.click();

            

html2canvas 是一种用于将 HTML 元素转换为图像的 JavaScript 库，它可以将任何 DOM 元素转换为 PNG 或 JPEG 格式的图像。使用 html2canvas，您可以在客户端将 HTML 元素转换为图像，并在不需要将其发送到服务器的情况下将其保存为文件或显示在用户的浏览器中。 html2canvas 能够处理大多数 HTML 元素以及 CSS 样式，但不支持所有 HTML5 和 CSS3 功能。例如，它不支持动画、视频、WebGL 或某些 CSS 属性。因此，在使用 html2canvas 进行转换时，您应该确保您的 HTML 元素和 CSS 样式都兼容目标浏览器和平台，并进行测试和调整。