通过canvas合成图片
图片 通过 Canvas 合成
2023-09-11 14:21:10 时间
通过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>
相关文章
- javaWeb学习总结(3)- 通过Servlet生成验证码图片(2)
- Android 通过Base64上传图片到服务器
- opencv官方文档:Python通过url获取图片的几种方法以及图像格式之间的转换,imencode()+imdecode()使用
- C# 将前端传来的图片文件分别以大图和缩略图保存
- vux-uploader 图片上传组件
- 【FPGA教程案例41】图像案例1——通过verilog读取图片
- 通过FPGA实现USB接口传输图片,通过MATLAB对图片进行显示
- C# Winform picturebox 通过button按钮 点击显示图片
- Excel在线预览(通过poi转html,含里面的图片)
- Axure 图片轮播(广告通栏图片自动播放效果)
- js通过全路径下载文件及跨域下载图片
- swift通过摄像头读取每一帧的图片,并且做识别做人脸识别
- Android GridView 一行显示数据(包括图片和文本),解决的办法是计算数据占该行的宽度是多少
- 网页图片水平垂直居中对齐的方法
- iOS 图片压缩方法的示例代码
- 微信小程序图片上传(土豆温床)
- 日常用品 背单词 读句子 看图片 读单词 读字母 翻译, 看动画 学英语
- 使用python 对图片进行水印,保护自己写的文章
- iOS开发 - 保存图片到相册和保存屏幕截图到相册
- iview carousel 图片不显示;iview 轮播图 图片无法显示(转载)
- OLED显示图片
- aspose java 读取word文档中的图片保存至文件服务器并通过 图片路径替换该图片