记录一次html2canvas使用经历

1，html2canvas【DOM元素生成图片】

官网地址：http://html2canvas.hertzen.com/
目前使用1.0版本没啥bug

业务需求，根据产品详情页面，生成分享海报。

需要达到的目标

<!--我的HTML结构如下-->

<div class="detailSharePage" id="detailSharePage">
       <!-- 动态渲染dom元素,用于生成图片的DOM元素结构 -->
</div>
<div class="imgbox" id="imgbox">
        <!-- 生成的图片存放地方 -->
</div>

// 使用方法：
// 1,引入插件
<script type="text/javascript" src="../js/html2canvas.min.js"></script>

// 2，调用插件
// 在动态获取数据，把DOM元素渲染完成之后调用此方法
function generatePoster() {
    var shareDOM = document.getElementById('detailSharePage'),  //需要传入的dom元素
            width = shareDOM.offsetWidth,    //获取dom元素的宽度
            height = shareDOM.offsetHeight,  // 获取dom元素的高度
            canvas = document.createElement("canvas"),  // 创建一个canvas元素
            scale = 2;  // 定义放大倍数
            canvas.width = width * scale;  // 定义canvas的宽度，比dom元素放大2倍
            canvas.height = height * scale;
            canvas.getContext("2d").scale(scale, scale); // 获取context，设置scale
    var opts = {  // 插件配置参数
            scale: scale,  //
            canvas: canvas, //用我们自己创建的canvas
            width: width,
            height: height,
            backgroundColor: 'transparent',
            useCORS: true  
            //允许跨域，如果传入的dom元素中有img标签，需要把img标签添加 crossorigin="anonymous"
            // <img src="../products/img/hb_bg@2x.png" alt=""   crossorigin="anonymous">
    }
 // 调用插件，传入dom元素，配置参数
html2canvas(shareDOM, opts).then(function (canvas) {
        var image = convertCanvasToImage(canvas);
        $("#imgbox").html(image)
    });
 };
 
//从 canvas 提取图片 image
function convertCanvasToImage(canvas) {
    //新Image对象，可以理解为DOM
    var image = new Image();
    // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
    // 指定格式 PNG
    image.src = canvas.toDataURL("image/png");
    return image;
}


// 3,上面两步都完成之后，剩下的就是调整页面样式了，为什么呢？因为有一个最大的问题是，canvas生成的图片和网页还是有差距，会有闪动效果。最佳处理方案就是，通过定位把生成图片之后的DOM元素 设置

.imgbox {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    
    opacity: 0;
}
.imgbox img {
    width: 100%;
    height: 100%;
}


//，这样我们看到的就是页面的dom元素，而并非实际图片。并且还可以长按保存到相册中（当然，我是在微信公众号中做的）