html2Canvas to Images

<script>

    $(function () {
        var content = document.getElementById("shareImages");
        content.style.display = 'block';
        function convert2canvas() {
            var cntElem = document.getElementById("shareImages");
            var shareContent = cntElem;
            var width = shareContent.offsetWidth;
            var height = shareContent.offsetHeight;
            var canvas = document.createElement("canvas");
            var scale = 1;
            canvas.width = width * scale;
            canvas.height = height * scale;
            canvas.getContext("2d").scale(scale, scale);
            var opts = {
                scale: scale,
                canvas: canvas,
                width: width,
                height: height,
                useCORS: true
            };

            html2canvas(shareContent, opts).then(function (canvas) {

                var context = canvas.getContext('2d');
                context.mozImageSmoothingEnabled = false;
                context.webkitImageSmoothingEnabled = false;
                context.msImageSmoothingEnabled = false;
                context.imageSmoothingEnabled = false;

                var img = new Image();
                img.src = canvas.toDataURL("image/jpg");
                //  document.body.appendChild(canvas);
                document.body.appendChild(img);

                console.log(width);
                img.style.width = width + 'px';
                img.style.height = height + 'px';
                document.body.appendChild(img);
            });
        };

        convert2canvas();
        content.style.display = 'none';
    })
</script>

　　

转载于:https://www.cnblogs.com/holy-amy/p/9930265.html