通过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合成图片的更多相关文章

  1. [JavaScript] canvas 合成图片和文字

    Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...

  2. canvas合成图片 圣诞节新技能戴帽

    <!doctype html><html><head><meta charset="utf-8"><title>Html ...

  3. 用canvas合成图片

    朋友圈有些分享功能是通过长按图片另存来实现的,就像淘宝内部要分享朋友圈的时候一样,这些图片可以用canvas来合成. 获取了img的dom对象以后,进行base64的转. //加载对象$page.ge ...

  4. Canvas 实现图片合成并下载合成图片

    现在经常会遇到那种带二维码的推广图片,如下图所示: 1是整张推广图的背景,2是二维码.这种图片的背景是保持不变的,里面的二维码是变化的.所以我们需要把二维码单独生成然后与背景合并. 我们可以通过can ...

  5. Html5 Canvas 实现图片合成

    多个图片合成一张 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  6. vue 把后端返回的图片和url链接生成的二维码用canvas 合成一张图片

    H5 页面在做某个活动的时候,有两种分享方式,一种是链接分享,一种是图片分享. 链接分享的话,如果是在微信里,就可引导用户利用微信浏览器自带的分享,根据sdk设置分享标题简介链接缩略图即可. 图片分享 ...

  7. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

  8. <canvas合成海报>所遇问题及解决方案总结

    最近做了一个用canvas合成海报图片的移动端项目,由于一点canvas基础都没有,所以去网上搜了一位前辈的demo,但是开发过程中遇到了很多问题,现将所遇问题及解决方法总结如下: 1.移动端canv ...

  9. 离线合成联想到的--canvas合成水印

    前段时间做了功能模块:用户设置自定义勋章: 实现方式:前端把用户设置的昵称传到后台,后台根据不同用户等级,使用离线合成技术合成不同的勋章返回到前端: 方案算是实现了,但是有点坑就是,后台的离线合成没有 ...

随机推荐

  1. 深入了解一下HTTP缓存机制

    HTTP 缓存机制作为 web 性能优化的重要手段,是Web 开发知识体系库中的一个基础环节,但是对于很多学习者来说,仅仅只是知道浏览器会对请求的静态文件进行缓存,但是为什么被缓存,缓存是怎样生效的, ...

  2. Bootstrap Studio Mac网页设计神器

    Bootstrap Studio Mac网页设计神器 美丽的组件 Bootstrap Studio附带了大量漂亮的组件,用于构建响应式页面.我们有页眉,页脚,画廊,幻灯片甚至基本元素,如跨度和div. ...

  3. myeclipse 在web-inf/lib中导入包

    今天用myeclipse的时候发现无法在web-inf/lib导入包,如果直接在工程上导入,则进入了一个referenced libraries的文件夹里,而web-inf/lib里面是没有jar包的 ...

  4. Fiddler抓包和工作原理

    一.概述 Fiddler是一款免费且功能强大的数据包抓取软件.它通过代理的方式获取程序http通讯的数据, 可以用其检测网页和服务器的交互情况,能够记录所有客户端和服务器间的http请求, 支持监视. ...

  5. Spring Boot - Logback配置日志要考虑哪些因素

    Spring Boot - Logback配置日志 出于性能等原因,Logback 目前是springboot应用日志的标配: 当然有时候在生产环境中也会考虑和三方中间件采用统一处理方式.@pdai ...

  6. $nextTick 页面局部刷新 延迟加载

    Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick 本人写 ...

  7. os模块/sys模块/json/pickle模块/logging模块(day16整理)

    目录 今日内容 os模块 对文件操作 对文件夹此操作 辅助性的 了解 sys模块 json和pickle模块 json模块 pickle模块 logging模块 日志级别 添加设置 自定义配置 今日内 ...

  8. 爬虫链接mongodb 以及多线程多进程的操作

    一.连接mongodb 1.            设置数据库 client=pymongo.MongoClient(‘localhost’) 2.            db=client[‘lag ...

  9. transform-origin盒子旋转位置

    transform-Origin属性允许您更改转换元素的位置. 2D转换元素可以改变元素的X和Y轴. 3D转换元素,还可以更改元素的Z轴. 为了更好地理解Transform-Origin属性,请查看这 ...

  10. SpringBoot与MybatisPlus3.X整合示例(十六)

    包含 分页.逻辑删除.自定义全局操作 等绝大部分常用功能的使用示例,相当于大整合的完整示例 pom.xml <dependencies> <dependency> <gr ...