通过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. Vue 全家桶，深入Vue 的世界

    内容简介: Vue 实例上的属性 Vue 生命周期 Vue 数据绑定 computed 计算属性 watch 监听器 Vue 组件 Vue 组件 extend Vue 组件高级属性 Vue 的rend ...

  2. [HNOI2013][BZOJ3143] 游走 - 高斯消元

    题目描述 一个无向连通图,顶点从1编号到N,边从1编号到M. 小Z在该图上进行随机游走,初始时小Z在1号顶点,每一步小Z以相等的概率随机选 择当前顶点的某条边,沿着这条边走到下一个顶点,获得等于这条边 ...

  3. java-i++的原理探究

    先看例子: package com.test; publick class Auto{ public static void main(String[] args){ Auto inc=new Aut ...

  4. 为什么阿里巴巴Java开发手册中强制要求整型包装类对象值用 equals 方法比较？

    在阅读<阿里巴巴Java开发手册>时,发现有一条关于整型包装类对象之间值比较的规约,具体内容如下: 这条建议非常值得大家关注, 而且该问题在 Java 面试中十分常见. 还需要思考以下几个 ...

  5. Textbox输入状态提示

    前: <DockPanel Margin="> <TextBox SelectionChanged="TextBox_SelectionChanged" ...

  6. python学习-while True语句

    while True是不会跳出循环的. 在while中括号里为一个条件值,只有当条件为真的时候,会执行这条语句,直到条件为false的时候,则会跳出该循环语句.而在这里括号里的值为true,也就意味着 ...

  7. SQL注入学习（一）

    SQL注入(SQL Injection)是一种常见的Web安全漏洞,攻击者利用这个漏洞,可以访问或修改数据,或者利用潜在的数据库漏洞进行攻击. SQL注入基础 漏洞原理 针对SQL注入的攻击行为可描述 ...

  8. 关于kaggle注册无法显示人机验证码问题

    最近准备做项目,需要在kaggle上下载数据集,但注册时遇到了无法显示验证图片信息的问题,我也是通过百度最终找到解决方法,所以就准备记录下来啦:下面是解决步骤: step1:下载Google访问助手 ...

  9. Vue中错误图片的处理

    在一个Vue的PC项目中,要求给错误图片不要让它显示丑陋的图片,就要给图片写一个失败后的默认图片, 在这里写了两种方法, 第一种方法,也就是百度到的最多的代码,就是给一张图片一个默认值. 第二种问题, ...

  10. NOIP模拟 15

    因为OJ停机,正好写(tui)个总结(boke) 题解不想写了. 前两题题意没看懂,其实比较简单. 最后一题神仙,想放弃. (迪神貌似又在疯狂骂自己) (我这么辣鸡我...) (下面开始跑题) 这两天 ...