html转换为jpg格式,domtoimage -- html转化为图片

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);

});

复制代码

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