JS实现页面保存为图片

今天项目遇到一个需求为将一个页面中的某一部分DOM转为一张图片供保存和上传到服务器的需求

这里我们需要使用到一个JS插件：dom-to-image，Github链接：https://github.com/tsayen/dom-to-image

这个插件可以使我们方便的将页面中的某一部分DOM结构轻松的转换成一张图片供后续使用

下面说一下大概的使用方法：

首先随便准备一点内容

DOM部分：

JS部分：

domtoimage.toJpeg(document.getElementById('app'), { quality: 0.95,bgcolor:'#fff'})
                            .then(function (dataUrl) {
                                //1.因为在微信中无法直接使用 a标签进行下载所有
                                vm.show = true;
                                setTimeout(()=>{
                                    var a = document.getElementById('end')
                                    var img = document.createElement('img')
                                    img.src = dataUrl
                                    img.style.width='100%'
                                    img.style.height="100%"
                                    a.appendChild(img)
                                },100)
                                //2.a标签直接下载到本地
                                var link = document.createElement('a');
                                link.download = 'my-image-name.jpeg';
                                link.href = dataUrl;
                                link.click();
                            });

这是点击图片时触发的函数 domtoimage.toJpeg(dom, options),第一个选项是一个DOM节点，第二个是相关的属性设置这里只列举了两个一个是图片质量，一个是图片背景色。

当在微信中使用时需要注意，因为微信有限制不允许下载文件所以只能做一个弹出层之类的引导用户长按图片保存，如果是普通浏览器的话就可以直接使用a标签进行下载了

效果还是很高清的