js将html转换成图片用于浏览器，微信，QQ等访问H5页面连接时可直接长按屏幕下载图片

js将html节点转换成标签,此版本可解决生成的图片模糊

1.引入需要js，csdn文章不能上传压缩包，所以要去我另外一个资源链接下载

https://download.csdn.net/download/qq_36993916/15118821

<script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/html2canvas-0.5.0-beta4.js"></script>

<!--  内容  -->
<div class="content" id="picShare">
    <div id="picShare1">
        <img id="ground" alt="" src="../images/activity/type_<?= $type; ?>.png"/>
        <div class="poetry">
            <p><?= $data['poetry']; ?></p>
        </div>
        <div class="qrcodeRow">
            <div class="qeRowL">
                <img class="qeRowLBackdrop" src="../images/activity/title_code.png" alt="">
            </div>
            <div class="qeRowR">
                <img class="qeRowRBackdrop" src="../images/activity/fox_<?= $type; ?>.png" alt="">
            </div>
            <img class="segmentRow" src="../images/activity/bottom_road.png" alt="">
        </div>
        <div class="poetry-msg">
            <p><?= $data['toplish']; ?></p>
        </div>
    </div>
</div>

//生成图片js
let scale = window.devicePixelRatio;// 获取设备像素比
html2canvas(document.querySelector('#picShare1'),{
    foreignObjectRendering: true, // 是否在浏览器支持的情况下使用ForeignObject渲染
    useCORS: true, // 是否尝试使用CORS从服务器加载图像width: htmlDom.clientWidth, //dom 原始宽度
    async: false, // 是否异步解析和呈现元素

    //必传
    //background: '#ffffff', // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的
    scale: scale,
    dpi: 350, //解决模糊
    onrendered: function (image) {
        let url= image.toDataURL("image/png");

        //页面进来时直接生成图片并替换
        var html_img = '<img id="saveImg" alt="" src= "'+url+'" crossOrigin="anonymous">';
        $('.content').html(html_img);
        //淡入优化替换闪屏，ios用
        //$(".content").fadeIn();
        //$(".content").fadeIn("slow");
        //$(".content").fadeIn(9000);

    }
});

注意：此示例代码安卓手机访问h5页面可以正常生成图片，但是ios生成图片会慢0.4秒，若ios直接跳转页面生成图片最好加上延迟setTimeout(),或在页面加载预加载特效进行优化