html2canvas实现微信长按图片保存整个网页功能

项目中要做一个性格测试，第一个页面输入姓名，第二个页面显示测试结果。

第二个页面要求长按图片可以保存，微信自带的功能是长按一个图片可以保存但是他是局部的图片，而不是整张网页的内容。

网上找到了一个html2canvas的js插件。 遇到了几个问题

1. 不支持跨域，微信头像显示不出来。
2. 截的图不清晰
3. 截出的元素是canvas

解决方法

1. 图片跨域的问题是通过下载远程图片到本地解决的。
2. 截图不清晰是通过放大2倍实现的。
3. 创建img元素

页面需要先引入jquery和html2canvas.js

js实现的代码如下:

$(document).ready(function(){
    var w = document.body.scrollWidth;
    var h = document.body.scrollHeight;
    //要将 canvas 的宽高设置成容器宽高的 2 倍
    var canvas = document.createElement("canvas");
    canvas.width = w * 2;
    canvas.height = h * 2;
    canvas.style.width = w + "px";
    canvas.style.height = h + "px";
    var context = canvas.getContext("2d");
    //然后将画布缩放，将图像放大两倍画到画布上
    context.scale(2,2);

    html2canvas(document.body, {
        canvas:canvas,
        onrendered: function(canvas) {
            document.body.innerHTML='';
            var dataUrl = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
            var newImg = document.createElement("img");
            newImg.src = dataUrl;
            newImg.width = w;
            document.body.appendChild(newImg);
        }
    });
});