div中的文字转图片

最新推荐文章于 2024-03-26 15:52:58 发布

晴天LiYuan

最新推荐文章于 2024-03-26 15:52:58 发布

阅读量246

点赞数

文章标签： canvas html5 js

本文链接：https://blog.csdn.net/qq_39308745/article/details/107045812

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>div转img图片显示</title>
	<script type="text/javascript" src="html2canvas.js"></script>
	<style>
		#isCanvas {
			background-image: linear-gradient(-225deg, #4076ff 0%, #DE4Aff 100%, #61D2ff 100%);
			width: 200px;
			padding: 10px;
			border-radius: 10px;
		}
		
		.red {
			color: #FF0000;
		}
		
		.yellow {
			color: #FFFF00;
		}
		
		.blue {
			color: #0000FF;
		}
		
		.white {
			color: #FFFFFF;
		}
		
		.fb {
			font-weight: bold;
		}
		
		.mr-10 {
			margin-right: 10px;
		}
	</style>
</head>
<body>
	<div id="newDiv">
		<div id="isCanvas">
			<p class="white">第一行文字</p>
			<p class="red">第二行文字</p>
			<div class="blue">
				<span class="yellow fb mr-10">这是加粗的</span>第三行文字</div>
			<p>第四行文字</p>
		</div>
	</div>
</body>

</html>
<script>
	function takeScreenshot() {
        //转换为canvas
        html2canvas(document.getElementById("isCanvas")).then(canvas => {
            var img=convertCanvasToImage(canvas);
            document.getElementById("newDiv").appendChild(img)
            document.getElementById("isCanvas").remove();
        });
    }
    function convertCanvasToImage(canvas) {
        //新Image对象
        var image = new Image();
        // canvas.toDataURL 返回的是一串Base64编码的URL 指定格式 PNG
        image.src = canvas.toDataURL("image/png");
        return image;
    }
    takeScreenshot()
</script>