domtoimage -- html转化为图片

最新推荐文章于 2024-08-09 08:31:19 发布

weixin_34309543

最新推荐文章于 2024-08-09 08:31:19 发布

阅读量2.8k

点赞数 2

原文链接：https://juejin.im/post/5a661ed0f265da3e5234a356

版权

本文介绍了domtoimage插件，它比html2canvas更清晰、支持更多样式和标签，如滤镜、阴影和SVG。domtoimage提供多种转化方法，如toPng、toJpeg，还能自定义图片质量、背景色等。尽管存在一些样式兼容性问题，如mask-box-image和svg阴影，但整体性能优秀，适用于将DOM节点转换为高质量图片。

摘要由CSDN通过智能技术生成

html转化为图片

前言

这段时间的工作中，一直在做canvas类的H5，开发的过程中很关键的一部分是将dom节点转化为图片。起初是用html2canvas来做的，做完之后感觉图片清晰度的效果不是很好，然后就再GitHub上找到 domtoimage这个js插件换了之前html2canvas。更换后不仅清晰度有所提高，能够支持的图片格式和dom节点样式也比html2canvas要多。

简洁的domtoimage

domtoimage 主要代码才700多行，方法和属性都比较少，下载之后看一下就知道怎么用，有些什么功能。虽然html2canvas 代码3000多行，调用其实也是不难，但相对来说代码确实比domtoimage多了很多。

domtoimage 主要的方法有：

domtoimage.toPng(...);将节点转化为png格式的图片


var node = document.getElementById('my-node');

domtoimage.toPng(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });