html2canvas 页面截图

最新推荐文章于 2024-07-18 15:24:52 发布

Aesopcmc

最新推荐文章于 2024-07-18 15:24:52 发布

阅读量201

点赞数

分类专栏：前端框架

本文链接：https://blog.csdn.net/u014438244/article/details/107201863

版权

前端框架专栏收录该内容

6 篇文章 0 订阅

订阅专栏

指定div的内容进行截图

引入插件：

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

<a href="javascript:void(0)" class="gen-posters">生成海報</a>
<div class="box canvasbox" style="display:none;">
	<p style="color:red">123123123</p>
</div>

<script type="text/javascript">
//这是另一种写法
$(function () {

	$(".gen-posters").click(function(){
		var canvasbox = document.getElementById("white_content_"+shop_id).getElementsByClassName("canvasbox")[0];
        canvasbox.style.display="block";
		createImg(canvasbox, function (base64Url) {
            //console.log(base64Url)
            //写入图片，并显示
            var cavas = document.getElementById("white_content_"+shop_id).getElementsByClassName("cavas")[0];
            cavas.innerHTML = "";
            var img=document.createElement("img");
            img.src = base64Url;
            cavas.appendChild(img);

            //隐藏原html
            canvasbox.style.display="none";
        });
	});
	function createImg(_dom, callback) {
            //截图目标div
            const dom = _dom;
            // 创建一个新的canvas
            const canvas = document.createElement('canvas');
            const width = dom.offsetWidth;  // 可见屏幕的宽
            const height = dom.offsetHeight;  // 可见屏幕的高
            const scale = window.devicePixelRatio;  // 设备的devicePixelRatio

            // 将Canvas画布放大scale倍，然后放在小的屏幕里，解决模糊问题
            canvas.width = width * scale;
            canvas.height = height * scale;
            var ctx = canvas.getContext("2d");
            ctx.scale(scale, scale);
            //解决放大图片后,上半部分出现空白

            //计算位置
            const left = dom.getBoundingClientRect().x;
            const top = dom.getBoundingClientRect().y;
            //console.log(left)
            //console.log(top)
            //const reHeight = dom.offset().top;//往上偏移當前圖片距離頂部的距離
            //const left = dom.get(0).getBoundingClientRect().x;
            //const top = dom.get(0).getBoundingClientRect().y;
            ctx.translate(-left, -top);


            html2canvas(dom, {
                canvas: canvas,
                scale: scale,
                useCORS: true,
                logging: false,
                width: width,
                hegiht: height,
            }).then((canvas) => {
                const context = canvas.getContext('2d');
                // 关闭抗锯齿形
                context.mozImageSmoothingEnabled = false;
                context.webkitImageSmoothingEnabled = false;
                context.msImageSmoothingEnabled = false;
                context.imageSmoothingEnabled = false;
                //生成base64图片数据
                var dataUrl = canvas.toDataURL();
                //let userImg = dataUrl.split(",")[1];
                callback(dataUrl);
            });
        }
});

    
</script>