通过canvas合成图片

效果图

页面布局部分

两个图片以及一个canvas画布

<img src="https://qnlite.gtimg.com/qqnewslite/20190924/avatar/head1.png" alt="" id="bg-img">

<img src="http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLFPJR06vhs1iccMd3hFzJ3GXAFm4VljTErIq6ejH3ZicIvfz9DqKxecXkKlUsZtDYYXOo9h0icQWZDw/0" alt="" id="avatar">

<canvas id="my-canvas" width="" height=""></canvas>

JavaScript代码部分

<script src="https://code.jquery.com/jquery-3.4.1.min.js" ></script>

<script type="text/javascript">

    // 获取图片及画板对象

    var border_img = document.getElementById("border-img");

    var avatar = document.getElementById("avatar");

    var ca = document.getElementById("my-canvas");

	// 创建二维画布，并设置宽高

    var ctx = ca.getContext('2d');

    ca.width = 200;

    ca.height = 200;

	// 在画布 (0, 0) 位置作为起点绘制两张图片实现合成

    ctx.drawImage(avatar, 0, 0, 200, 200);

    ctx.drawImage(border_img, 0, 0, 200, 200);

	// 得到图片的Base64编码

    dataurl = ca.toDataURL();

</script>

代码合总

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>通过canvas合成图片</title>

	</head>

	<body>

		<img crossorigin="Anonymous" src="https://qnlite.gtimg.com/qqnewslite/20190924/avatar/head1.png" alt="" id="border-img">

		<img crossorigin="Anonymous" src="http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLFPJR06vhs1iccMd3hFzJ3GXAFm4VljTErIq6ejH3ZicIvfz9DqKxecXkKlUsZtDYYXOo9h0icQWZDw/0" alt="" id="avatar">

		<hr>

		<canvas id="my-canvas" width="" height=""></canvas>

		<img src="" id="base64-img">

		<script src="https://code.jquery.com/jquery-3.4.1.min.js" ></script>

		<script type="text/javascript">

			var border_img = document.getElementById("border-img");

			var avatar = document.getElementById("avatar");

			var ca = document.getElementById("my-canvas");

			var ctx = ca.getContext('2d');

			ca.width = 200;

			ca.height = 200;

			ctx.drawImage(avatar, 0, 0, 200, 200);

			ctx.drawImage(border_img, 0, 0, 200, 200);

			dataurl = ca.toDataURL();

			$('#base64-img').attr('src', dataurl);

		</script>

	</body>

</html>

巴特西

通过canvas合成图片

通过canvas合成图片

效果图

页面布局部分

JavaScript代码部分

代码合总

最新文章

热门文章