在微信中实现HTML页面保存成图片 - 叶少翔

在微信中实现HTML页面保存成图片

实现HTML页面保存成图片需要基于html2canvas

<div id="content">
    <strong>在微信中实现HTML页面保存成图片</strong>
    <img src="20171103160034.png">
</div>

jQuery(document).ready(function(){
    if(isWeiXin()){
        var img = new Image();
        //此处图像默认放置占位，必须真实有效存在
        img.src=\'20171103160034.png\';
        img.onload = function(){
            var elem = jQuery(\'#content\');
            html2canvas([elem.get(0)], {
                onrendered: function (canvas) {
                    var image = canvas.toDataURL("image/jpg");
                    var pHtml = "<img src=\'"+image+"\' style=\'width:100%;height:100%\'>";
                    jQuery("#content").html(pHtml);
                    jQuery("#content").attr("style","padding-top:40px");
                }
            });
        }
    }
});

//判断是否为微信  
function isWeiXin(){
    var ua = window.navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == \'micromessenger\'){
        return true;
    }else{
        return false;
    }
}