1、需求：长按页面中的一部分（里面有动态获取的用户昵称、头像及动态生成的二维码），弹出下载框，点击后将这部分保存为图片下载到手机里（如图）

2、分析：由于有动态获取数据，需等DOM元素生成之后，再将这一部分的DOM转化为canvas，再将canvas转为image，然后再实现长按image下载到本地 - - 一路走来，踩了不少坑，希望有此相似需求的能有所收获吧。

3、过程

第一步：数据渲染后，将 html 转化为 canvas

html2canvas.js可将一个元素渲染为canvas，只需要简单的调用html2canvas(element[, options])方法即可，html2canvas方法会返回一个包含有canvas元素的promise。

// 参数：element为要保存元素的DOM对象，option为可配置项
html2canvas(element, option).then(function(canvas) {

});

重点1：清晰度问题（最终图片的清晰度取决于html转换成的canvas的清晰度）
<1> 将原来的DOM元素的宽高设置为最终图片的2倍，然后canvas的宽高也要设置最终图片的2倍。（最好为设备的DPR倍）
<2> 设置原来的DOM元素的宽高时必须以px为单位，避免样式二次计算导致的模糊，切记~
例如：我的最终图片样式

// 生成的最终图片
#inviteImg {
   width: 5.6rem;   // rem适配：5.6rem * 50px/rem = 280px 
   height: 6.3rem;  // rem适配：6.3rem * 50px/rem = 315px 
}

则： 我的原来的DOM元素的样式

// 原来DOM盒子
#inviteBox {
   width: 560px;   // 最终图片宽度280px的2倍，以px为单位
   height: 630px;  // 最终图片高度315px的2倍，以px为单位
   position: absolute;
   z-index: -1;  // 离开屏幕
   background: transparent url("../assets/img/no.png");
   background-size: 560px 630px;
}

则：canvas的宽高

let self = this
let inviteBox = document.getElementById("inviteBox")
let canvas = document.createElement("canvas")
canvas.width = 560    // 最终图片宽度280px的2倍，以px为单位
canvas.height = 630   // 最终图片高度315px的2倍，以px为单位
let opts = {
   canvas: canvas,                       // 将自定义canvas作为配置项
   useCORS: true,                        // 允许图片跨域
   height: self.$refs.main.offsetHeight  // 修复截图不完整问题
}
html2canvas(inviteBox, opts).then((canvas) => {
/* 此处的base64ImgSrc就是得到的img的base64字符串，直接在页面上显示即可 */
let base64ImgSrc = canvas.toDataURL("image/png")

})

重点2：截图不全问题（当截图区域高度超出可视区域会截图不完整）
由于官网上提供的dom抓取不支持高度，都是从绝对定位的起点开始截取，会造成只可以截到浏览器可见的，如果截图区域高度超出可视区域会截图不完整

• 可通过修改源码，可以支持完整截图（可以动态设置截图高度）

  未修改源码如下：（可通过查找进行修改~）

return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {        
    if (typeof(options.onrendered) === "function") {            
        log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas")           
        options.onrendered(canvas)    
        return canvas
    }
})

修改后源码如下：

/* 添加自定设置高度宽度 */   
var width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth    
var height = options.height != null ? options.height : node.ownerDocument.defaultView.innerHeight    
return renderDocument(node.ownerDocument, options, width, height, index).then(function (canvas) {       
    if (typeof(options.onrendered) === "function") {            
        log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas")
        options.onrendered(canvas);        
    }        
})

修改源代码后重新引入修改后的html2canvas.js（需放到本地了），此时可将你要截取的高度通过配置项传入即可。

/* 将要截取的高度设置为最大盒子的高度并通过配置项传入 */
let self = this
let opts = {
   canvas: canvas,                    
   useCORS: true,                     
   height: self.$refs.main.offsetHeight  // 修复截图不完整问题
}

第二步：将canvas转化为png格式的image

上一步生成的canvas即为包含目标元素的元素对象。实现保存图片的目标只需要将canvas转image即可。

html2canvas(inviteBox, opts).then((canvas) => {
    let base64ImgSrc = canvas.toDataURL("image/png")
    /* 如果只是显示,可用以下代码 */
    let img = document.createElement("img")
    img.src = base64ImgSrc 
    document.body.appendChild(img)
})

重点：base64格式图片在前端可以显示，但是无法下载到本地，所以要将base64格式的图片转化为网络路径的png格式图片
我项目的解决方法为：将base64编码上传到七牛云然后获取到网络路径的png格式的图片，具体实现方法可参考：

如何上传base64编码图片到七牛云
上传base64图片到七牛云存储

第三步：长按image保存到本地

长按事件见：H5–（封装）移动端原生长按事件
下载保存图片：如果在pc端，且不考虑兼容性的话，可以使用htm15的a标签增加了download属性,可利用此属性实现图片下载，具体我就不细说，因为在手机端的webview中不好使。
我项目的解决方法为：与原生客户端交互，调取客户端的下载方法，传入图片的网络途径，客户端协助进行下载并存入相册。（ps：下载图片在webview中用h5真的实现不了，所以求助一下客户端小伙伴了~）

4、参考文档：

1、基于html2canvas实现网页保存为图片及图片清晰度优化 - - 小小云朵
2、html2canvas.js网页截图功能(解决截图不全问题) - - JugglerTao

今天项目遇到一个需求为将一个页面中的某一部分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标签进行下载了

效果还是很高清的

1. 写在前面

今天又发现个好工具，有时候在网上看到点好东西，想保存下次也可以看一般我是有这几种途径。
1.可以添加网页到文件夹，但是这样子看的时候必须要联网。
2.或者保存在云笔记中。
3.但是还是不够全，我想将整个网页变成一张图片，想怎么看就怎么看。

2. 工具

为了实现，我找了找，发现360浏览器有自带的，直接可以将网页保存为图片，但是作为一个开发者，难道要改用360？而且我认为连360都能做出来的功能，难道谷歌老大做不出来，然后去谷歌网上应用店找到一款这样的工具。只需添加一个拓展工具即可。见图，需要科学上网。


工具有很多，我选了款评分最多的，而且很高的。捕捉网页截图-FireShot的，名字有点怪，无所谓，然后直接傻瓜式的添加为拓展程序即可。添加完以后，使用直接点击全是中文，见图。

这个拓展程序文件已经被我打包出来了，但是不知道为什么我把这.crx文件上传到csdn资源上传总是成功了，但是去查看又没有，上次也是一样，不知道什么情况，如果不能科学上网的留下邮箱，我看到可以发你们。