通过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. PMBOK(第六版) PMP笔记——《十》第十章（项目沟通管理）

    PMBOK(第六版) PMP笔记——<十>第十章(项目沟通管理) 第十章 项目沟通管理: PM 大多数时间都用在与干系人的沟通上. 第十章有三个过程: 规划沟通管理:根据干系人的需求,制定 ...

  2. snkrs web端分析，canvas中的fingerpint

    snkrs web端分析,canvas中的fingerpint 代码如下 (()=>{ const canvas = document.createElement("canvas&qu ...

  3. [Luogu4550] 收集邮票

    题目描述 有n种不同的邮票,皮皮想收集所有种类的邮票.唯一的收集方法是到同学凡凡那里购买,每次只能买一张,并且买到的邮票究竟是n种邮票中的哪一种是等概率的,概率均为1/n.但是由于凡凡也很喜欢邮票,所 ...

  4. css的简单使用

    css语法 id选择器: id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义. ...

  5. Spring自定义日志注解

    JDK1.5中引入注解,spring框架把java注解发扬光大 一  创建自定义注解 import java.lang.annotation.Retention; import java.lang.a ...

  6. <编译原理 - 函数绘图语言解释器（1）词法分析器 - python>

    <编译原理 - 函数绘图语言解释器(1)词法分析器 - python> 背景 编译原理上机实现一个对函数绘图语言的解释器 - 用除C外的不同种语言实现 解释器分为三个实现块: 词法分析器: ...

  7. C语言中的isalpha，isdigit，islower，isupper等一系列函数

    TITLE:c语言中的isalpha,isdigit,islower,isupper等一系列函数 已经全部验证检查,无任何错误 isalnum(测试字符是否为英文或数字) 相关函数 isalpha,i ...

  8. JAVA基础知识注意事项

    JAVA核心技术卷一 (第十版) 下面是需要注意的: 只有方法名和参数类型叫做方法的签名, 不同的返回类型值不能作为方法的签名.(4.6.1) 这是域与局部变量的主要不同点. 必须明确地初始化方法中的 ...

  9. SpringBoot整合Redis(一)

    docker启动redis docker run -p 6379:6379 --name myredis redis 查看容器 [root@topcheer ~]# docker ps -l CONT ...

  10. BOOL，int，float，指针变量 与“零值”比较的if语句

    分别给出BOOL,int,float,指针变量 与“零值”比较的 if 语句(假设变量名为var) 解答: BOOL型变量:if(!var) int型变量: if(var==0) float型变量: ...