这里写目录标题

步骤
- - 1. 创建画布
  - 2. 画图片
  - 3. 画文字
  - 4. 画base64图片
- 保存
完整代码
- js
- vue

这里介绍使用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>

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

canvas绘制海报中文字自动换行
canvas:canvas绘制海报中文字自动换行问题描述 canvas绘制的海报在某一行文字过多时不会自动换行(设置文本宽度无用) 源代码 context.fillText(this.data.go ...
canvas绘制海报分享，海报中设置圆角二维码
canvas绘制海报分享,海报中设置圆角二维码,背景图,动态的文字,绘制完成以后保存为图片,可长按分享海报图片. 下面看看效果图:(假设教师的图片是二维码) 这其中,背景图元素,还有教师的图片(假设是 ...
canvas绘制海报及点击保存海报
1.canvas绘制海报 createcanvas() {let that = this,windowW = that.data.windowWconst query = wx.createSelec ...
uniapp使用canvas绘制海报
Uniapp中使用canvas绘制海报可以按照以下步骤进行: 1. 引入需要绘制的图片资源这些图片可以是本地的,也可以是远程的.可以将图片资源放在项目的`static`目录下,例如:`static/ ...
小程序php生成海报,小程序用canvas绘制海报的做法
2020年第一篇文章,年初忙着复习刷题一直没空去写东西,书看的越多感觉越技不如人,始终徘徊在小菜鸡的行列中,最近项目里正好有一个canvas的业务,突然又燃起了我一个UI前端的火种,记下了踩坑和思考. ...
微信小程序使用canvas绘制海报并保存本地相册
在做微信小程序的时候,很多都会用到生成海报分享功能,刚好最近项目有这个需求,今天就发出来记录下首先是使用canvas绘制一张海报,微信小程序的canvas有老版本和新版本我是用的是新版本代码如下 ...
使用canvas绘制海报
想要绘制这样的海报 1.结构  <view class="my-canvas-box" @touchmove.stop.p ...
小程序中使用canvas绘制海报
最近项目需求使用canvas绘制朋友圈可分享的海报,中间遇到很多问题,于是上网搜索,完美解决后,在此总结一下. 先来看一下效果图,点击按钮生成带二维码的图片. 1.关于canvas画布的宽度和高度 w ...
uniapp Canvas绘制海报
在绘制的过程中可能会需要文字换行文字换行在我上篇文章,链接:文字换行. 之前写过一个分享海报,但是觉得代码逻辑不清晰所以重新写一个我们的需求是这样子的 <view class="w ...

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