div中的文字转图片

<!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>

html2canvas.js在官网下载就可以了

展开阅读全文
©️2020 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值