html2canvas网页生成图片

html 手机长按生成分享二维码图片html2canvas网页生成图片

做分享的时候需要生成用户的专属分享图片，其中包含了专属的二维码

引入

页面引入html2canvas.js

该区域就是你想生成的图片区域
<div id="close" class="in-pop" >
            <div class="in-self-info" >
                <img width="100%" src="" id="saveImg" alt="">
                <img class="qrcode_img" id="qrcode_img"  width="50%"  src="" alt="">
            </div>
        </div>

实现代码

 var el = document.getElementById("close");
        var saveImg = document.getElementById("saveImg");
        var canvas = document.createElement("canvas");
        var scale = window.devicePixelRatio;
        var ctx=canvas.getContext("2d")
        var rect = el.getBoundingClientRect();  //获取元素相对于视察的偏移量
        var w = el.offsetWidth;
        var h = el.offsetHeight;
        canvas.width = w * scale;
        canvas.height = h * scale;
        canvas.style.width = w ;
        canvas.style.height = h ;
        ctx.scale(scale, scale);
        ctx.translate(-rect.left,-rect.top);    //设置context位置，值为相对于视窗的偏移量负值，让图片复位
        html2canvas(el, {
            scale: scale,
            canvas: canvas,
            width: w,
            height: h,
            logging: false,
            background: "#f2f2f2",
            useCORS: true
        }).then(function (canvas) {
            var dataUrl = canvas.toDataURL("jpeg");
            saveImg.src=dataUrl;
            $("#qrcode_img").hide();
        });

原理很简答就是用html来先写出你想生成图片的样式，然后哦生成图片覆盖这个区域，这样在手机上长按就能保存图片了。