使用canvas绘制海报，包含文字、图片、base64图片

最新推荐文章于 2024-05-16 19:19:56 发布
最新推荐文章于 2024-05-16 19:19:56 发布
阅读量1.6k 收藏 17
点赞数 6
分类专栏： vue js/jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lhkuxia/article/details/112863190
版权
vue 同时被 2 个专栏收录
67 篇文章 11 订阅
订阅专栏
js/jQuery
30 篇文章 2 订阅
订阅专栏

这里写目录标题


这里介绍使用js（jQuery）或者vue使用画布绘制海报，小程序uniapp可参考我的另一篇博客 canvas画布，小程序端画base64、网络图片
在这里插入图片描述
这是一个常见的邀请效果图，可以看成这几部分：

1. 背景图
2. 中间的白色背景图
3. 中间的二维码
4. 文字
这次的步骤使用js制作，vue、jQuery同理，最后会放出源码

步骤

1. 创建画布

<canvas id="myCanvas" width="360" height="570" style="border: 1px solid #FF0000;"></canvas>
<!-- 这里的border为了看清楚canvas位置，可删除 -->
<!-- 宽高为数字，不支持%，想要铺满可以获取屏幕显示尺寸进行比例处理 -->

2. 画图片

让我们先把背景图画上去，我这现在用的是本地的图片；

先声明画布，不声明怎么画是不；

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var img1 = new Image();
img1.src = "bg.png"; //背景图
img1.onload = function() {
	ctx.drawImage(img1, 0, 0,360,570);
	//图片路径 , x轴位置 , y轴位置 , 宽度 , 高度
	var img2 = new Image();
	img2.src = "ffffff.png"//白色方块图
	img2.onload = function() {
		ctx.drawImage(img2, 70, 70, 240, 320)
	}
}

白色图片也是这种方法，只是注意顺序即可，就会覆盖到第一张图片上面，效果图：
在这里插入图片描述

3. 画文字

剩下的就是在画布上面写文字；

ctx.fillStyle = '#1296db';
ctx.textAlign = 'center';
ctx.font = 'normal 29px 楷体';
ctx.fillText('好友召集令', 190, 50);
ctx.fillStyle = '#000000';
ctx.font = 'normal 25px 宋体';
ctx.fillText('邀请码', 190, 130)
ctx.font = 'normal 15px 宋体';
ctx.fillText('长按也可保存分享哟~', 190, 410);

按照这样的写法，设置样式，内容等，按照顺序写进去即可；效果图：
在这里插入图片描述

4. 画base64图片

var base = "请求的base64资源"
var img3 = new Image();
img3.src = base;
img3.onload=function(){
	ctx.drawImage(img3, 90, 180, 200, 200);
}

效果图：
在这里插入图片描述
到这，绘制完成了，剩下的就是保存了。

保存

<button type="button" onclick="saveAsLocalImage()">保存</button>

function saveAsPNG(canvas) {
	return canvas.toDataURL("image/png");
}

function downLoad(url) {
	var oA = document.createElement("a");
	oA.download = ''; // 设置下载的文件名，默认是'下载'
	oA.href = url;
	document.body.appendChild(oA);
	oA.click();
	oA.remove(); // 下载之后把创建的元素删除
}

function saveAsLocalImage() {
	downLoad(saveAsPNG(myCanvas));
}

完整代码

js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<canvas id="myCanvas" width="360" height="570"></canvas>
		<button type="button" onclick="saveAsLocalImage()">an</button>
		<script type="text/javascript">
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			var img1 = new Image();
			img1.src = "bg.png"; //背景图
			img1.onload = function() {
				ctx.drawImage(img1, 0, 0, 360, 570)
				var img2 = new Image();
				img2.src = "ffffff.png"
				img2.onload = function() {
					ctx.drawImage(img2, 70, 70, 240, 320)
					ctx.fillStyle = '#1296db';
					ctx.textAlign = 'center';
					ctx.font = 'normal 29px 楷体';
					ctx.fillText('好友召集令', 190, 50);
					ctx.fillStyle = '#000000';
					ctx.font = 'normal 25px 宋体';
					ctx.fillText('邀请码', 190, 130)
					ctx.font = 'normal 15px 宋体';
					ctx.fillText('长按也可保存分享哟~', 190, 410);
					var base = "请求的base64资源"
					var img3 = new Image();
					img3.src = base;
					img3.onload = function() {
						ctx.drawImage(img3, 90, 180, 200, 200);
					}
				}
			}

			function saveAsPNG(canvas) {
				return canvas.toDataURL("image/png");
			}

			function downLoad(url) {
				var oA = document.createElement("a");
				oA.download = ''; // 设置下载的文件名，默认是'下载'
				oA.href = url;
				document.body.appendChild(oA);
				oA.click();
				oA.remove(); // 下载之后把创建的元素删除
			}

			function saveAsLocalImage() {
				downLoad(saveAsPNG(myCanvas));
			}
		</script>
	</body>
</html>

vue

图片路径建议使用网络路径

<template>
	<div>
		<canvas id="myCanvas" width="360" height="570"></canvas>
		<button type="button" @click="save">保存</button>
	</div>
</template>

<script>
	export default {
		mounted() {
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			var img1 = new Image();
			img1.src = "blog.csdnimg.cn/20200408175542410.png"; //背景图
			img1.onload = function() {
				ctx.drawImage(img1, 0, 0, 360, 570)
				var img2 = new Image();
				img2.src = "../assets/ffffff.png"
				img2.onload = function() {
					ctx.drawImage(img2, 70, 70, 240, 320)
					ctx.fillStyle = '#1296db';
					ctx.textAlign = 'center';
					ctx.font = 'normal 29px 楷体';
					ctx.fillText('好友召集令', 190, 50);
					ctx.fillStyle = '#000000';
					ctx.font = 'normal 25px 宋体';
					ctx.fillText('邀请码', 190, 130)
					ctx.font = 'normal 15px 宋体';
					ctx.fillText('长按也可保存分享哟~', 190, 410);
					var base = "请求的base64资源"
					var img3 = new Image();
					img3.src = base;
					img3.onload = function() {
						ctx.drawImage(img3, 90, 180, 200, 200);
					}
				}
			}
		},
		methods: {
			saveAsPNG(canvas) {
				return canvas.toDataURL("image/png");
			},
			downLoad(url) {
				var oA = document.createElement("a");
				oA.download = ''; // 设置下载的文件名，默认是'下载'
				oA.href = url;
				document.body.appendChild(oA);
				oA.click();
				oA.remove(); // 下载之后把创建的元素删除
			},
			save() {
				this.downLoad(this.saveAsPNG(myCanvas));
			}
		}
	}
</script>

<style>
</style>
苦夏木禾
关注
  • 6
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
教你在canvas上绘制Base64格式的图片
华为开发者联盟
05-13 6269
现象描述 当前canvas组件只支持绘制本地图片和网络图片，暂不支持绘制Base64字符串表示的图片格式，下面介绍如何采取规避措施实现。 问题分析 当前image组件支持Base64字符串表示的图片格式，如下所示： 因此可以考虑通过image组件来表示Base64字符串表示的图片，然后用canvas组件绘制image元素来间接实现绘制Base64字符串表示的图片格式。 解决方法 代码如下： 复制 1 2 3 4 5 6 7
canvas绘制微信海报分享，前端开发进大厂面试必备技能
2301_79055814的博客
04-02 383
背景图片」「logo」「二维码」「设备的图片像素比」「是否加载中」「canvs的宽」「canvas的高」data: {canvasW:0,canvasH:0},至此使用canvas绘制海报的流程已经结束了，总体看来还是比较简单的，难一点的地方就是具体坐标的计算，建议大家在草稿纸上画个草图，方便计算坐标。下面就开始实现用户下载的功能。
javascript canvas API内容整理
11-21
HTMLCanvasElement //canvas elem对象 属性 height//高 width//宽 方法 getContext()//获取<canvas>相关的可绘制的上下文 toBlob()//(ie 不支持)此方法可以将<canvas>画布转换为base64格式的图片数据，我们可以通过设定参数指定转换的图片类型，甚至图片的清晰度 toDataURL()//可以将<canvas>画布转换为Blob对象 CanvasRenderingContext2D//等于 canvas.getContext(‘2d’)对象; 绘制矩形 canvas.clearRect()
使用canvas绘制海报
xiyan_yu的博客
06-28 2762
canvas绘制海报
Web前端最全js学习之canvas的基础与应用(二)(1)，2024年最新初级web前端开发面试题目及答案
最新发布
2401_84446825的博客
05-16 331
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
使用 canvas 绘制海报
CuiXgの博客
02-20 842
简化海报绘制, 使用 canvas 对海报绘制进行了封装, 降低了海报绘制开发成本难.简化海报绘制, 使用 canvas 对海报绘制进行了封装, 降低了海报绘制开发成本难.目前可进行海报背景, 图片, 文字, 二维码 绘制, 具体操作参考下文.目前可进行海报背景, 图片, 文字, 二维码 绘制, 具体操作参考下文.抽离完成公用海报分享组件,集成 APP 与 微信分享功能.海报绘制可直接使用分享组件也可直接使用绘制海报.海报绘制可直接使用分享组件也可直接使用绘制海报.
将base64格式的图片画到canvas上（js和vue两种）
m0_64590669的博客
11-15 1716
将base64格式的图片画到canvas上（js和vue两种）
H5上传图片并使用canvas制作海报.rar
07-12
在H5应用中，利用HTML5的技术特性，我们可以实现丰富的用户交互体验，其中包括上传图片以及在图片上添加个性化元素，如文字标签，进而制作出独特的海报。本项目就是基于这样的需求，通过HTML5的File API、Canvas API...
在Vue中用canvas实现二维码和图片合成海报的方法
10-16
在Vue.js中，使用canvas元素实现二维码和图片的合成海报是一项常见的需求，特别是在移动应用或网页设计中。本文将详细讲解如何在Vue项目中通过canvas完成这一任务。 首先，我们需要导入必要的图片资源，如海报背景...
uniapph5 生成邀新海报（canvas绘制海报和二维码，两者拼接）
07-20
2. **图片加载**：在canvas绘制图片时，需要等待图片完全加载后再进行绘制，否则可能会导致图片绘制不完整或变形。 3. **性能优化**：大量的绘图操作可能会影响页面性能，因此需要合理规划绘图流程，避免不必要的重...
canvas实现二维码和图片合成的示例代码
12-13
在本文中，我们将探讨...关键步骤包括生成二维码Base64字符串、加载图片、在扩大两倍的canvas上绘制图像，以及最终将canvas内容转换为新的数据URL。注意，为了防止图片模糊，需要在较大的画布上操作，然后将结果缩小。
把base64格式图片画到canvas画布上（干货建议收藏）
热门推荐
酸狗的博客
06-18 1万+
项目场景： 使用时将里面的base数据替换即可，画布大小进行修改 如果在vue使用时必须在mounted里面、或者点击触发，因为在这个生命周期后才能获取dom元素 JavaScript： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <canvas id="myCanv
小程序 - canvas绘制海报
不想起床
04-20 3486
需求背景 小程序不能直接分享至朋友圈，所以采用海报(最关键的就是邀请码)邀请好友。 从展示层面来讲，就是几张图，通过定位放在一起即可，但是关键是要保存，这个时候，就需要canvas去进行图片合成。那么canvas绘制海报，就拆分两个部分 通过css ,给用户展现的组合图片,这跟简单 通过css 布局，将各个元素组合在一起。这个想必不用多说， 保存时，通过canvas绘图，将图片合成一个完整的图片 canvas 绘图，有两种模式 新版 2d 模式(有坑，慎用) 老版 canvas-id=“draw
jsjq来封装一个图片文字合成图案的方法
xin的博客
08-09 2108
记录一下：封装一个图片文字合成图案的方法 这里首先做个说明 项目里使用到用canvas生成海报，在toDataURL报了这个错误Tainted canvases may not be exported。 toDataURL本身是没什么问题的，这个不用担心，但是你项目不能直接用文件的形式打开。 要用：http://localhost:8080/index.html 这种形式打开，不然会报以上错误，...
canvas图片旋转，图片base64编码，保存图片
芝芝为荔枝
06-04 3595
canvas图片旋转，图片base64编码，保存图片
uniapp——实现base64格式二维码图片生成+保存二维码图片——基础积累
yehaocheng520的博客
09-19 1937
uniapp——实现base64格式二维码图片生成+保存二维码图片——基础积累
canvas绘制微信海报分享
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
08-12 1万+
前言 最近公司在做一个面向餐饮的微信小程序，公司希望在小程序中嵌入关注公众号的功能，一开始是采用官方提供的official-account，配置公众号关注组件，方便用户快捷关注公众号，但是这个组件的场景限制比较多，需要扫码打开小程序才开始显示。 在折腾了一番之后，最终决定提供二维码，供用户下载，扫码关注。这里我们有两种方案，第一种是让后台生成然后返回图片链接，只需要传后台所需要的参数就行了，第二种方法，用canvas生成分享海报。最后我们选择了使用canvas制作分享海报的方式。 「注意：因为小程序基础版本
canvas画布，小程序端画base64、网络图片
苦夏木禾
04-08 1947
常用于保存海报，二维码等； 除了画base64格式的图片，其他的在HTML、vue等一样； 就拿一个例子来说吧： 这是一个常见的邀请效果图，可以看成这几部分： 1. 背景图 2. 中间的白色背景图 3. 中间的二维码 4. 文字 步骤 1. 创建画布 <canvas style="width: 380px; height: 600px;" canvas-id="firstCanvas" @c...
小程序使用canvas制作beas64图片
weixin_59525879的博客
09-09 237
1设置一个canvas标签。2获取接口数据的图片数据。
canvas 绘制base64
06-09
要使用 Canvas 绘制 base64 图片，我们需要先将 base64 图片转换为 Image 对象，然后再将其绘制到 Canvas 上。以下是示例代码： ```javascript // 获取 Canvas 对象 let canvas = document.getElementById('myCanvas'); let ctx = canvas.getContext('2d'); // 创建 Image 对象 let img = new Image(); // 设置 Image 对象的 src 为 base64 数据 img.src = 'data:image/png;base64,iVBORw0KG...'; // 在 Image 对象加载完毕后，将其绘制到 Canvas 上 img.onload = function() { ctx.drawImage(img, 0, 0); }; ``` 在上面的代码中，我们首先获取了 Canvas 对象和其 2D 上下文对象。接着，我们创建了一个 Image 对象，并将其 src 属性设置为我们要绘制的 base64 数据。最后，在 Image 对象加载完毕后，我们使用 drawImage 方法将其绘制到 Canvas 上。 注意，如果 base64 数据的类型是图片，那么需要在数据前添加对应的 MIME 类型，如上述代码中的 `data:image/png;base64,`。如果是其他类型的数据，需要将 MIME 类型改为对应的值。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

苦夏木禾

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值