Canvas的实际应用场景1-生成一张主题分享图片

项目场景

在app中分享某个活动主题的时候，希望分享出一张图片到第三方，或者有时候最好能带上二维码，结合一些第三方社交应用的长按图片识别图中二维码等等一些场景。HTML5 Cancas 就特别适合，HTML5 canvas 标签 可以定义图形，作为图形容器，使用js脚本来绘制图形。这些操作都是为了招新跟跃活（就是吸引新用户跟活跃已有用户，让他们觉得咱们app还是有点料的之类的巴拉巴拉产品诉求），接下来我们就从技术层面上来说下实现一个主题分享图片的基本步骤与应用过程。

需求分析

需要生成的图片形如下图，非常可爱的一张图哈。技术点上主要是要在canvas上生成文字，生成图片，并对文字与图片进行设置（展示与定位），图中的二维码是使用站外生成好的图片，并不是直接用代码去生成二维码的。关于js代码动态生成二维码，在今后会有专门的介绍哈。

Canvas生成图片

Canvas初始化

js: var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); 如果生成的图片要在页面展示可以先定义一个canvas在dom中，因为我们项目是不需要展示在页面中的，所以是在js中动态创建一个canvas标签，然后追加并且不显示。 var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); // 图片宽高为iphone6的2倍率 canvas.width = 750; canvas.height = 1203; 备注：图片的宽高是以2倍率来设置，跟设计稿的设计是一样的，也不用做单位换算，所以接下来的单位都是跟设计稿2倍率一模一样的，生成图片之后可以再进行大小设置，这是为了保持图片的清晰度。

canvas 设置图片

1. 设置背景图，我们的背景图是平铺的， ctx.fillStyle = ctx.createPattern(imgs[0], "repeat"); ctx.fillRect(0, 0, 750, 1334); 说明：ctx.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat"); createPattern() 方法在指定的方向内重复指定的元素。元素可以是图片、视频，或者其他canvas元素。被重复的元素可用于绘制/填充矩形、圆形或线条等等。
2. 普通图片 ctx.drawImage(imgs[3], 238.5, 26); 说明：ctx.drawImage(imageObj, x, y, width, height); x/y 绘制的起始坐标，width/height 图片的宽高设置，不设置宽高会以原文件宽高展示。

canvas 设置文字

1. 普通文字 var text1 = $(".name").text(); ctx.font = "bold 24px PingFang"; //设置文本大小 + 字体 ctx.fillStyle = "#28280B"; //设置文本颜色 var tagW5 = ctx.measureText(tag5).width; //获取文本的宽度，主要是为了让文本水平居中 ctx.fillText(tag5, 750 - 68 - tagW5, 855); //绘制文本 + 文本 x 和 y 的坐标位置
2. 描边文字 ctx.font = '500 60px dateFont'; ctx.lineWidth = 4; ctx.strokeStyle = '#28280B'; // 字体描边 ctx.letterSpace = 3; var width = ctx.measureText(text1).width; ctx.strokeText(text1, (750 - width)/2, 160); ctx.fillStyle = '#fff'; // 字体填充 ctx.fillText(text1, (750 - width)/2, 160); 说明: 需要结合strokeText与fillText达到效果

canvas画布转为图片格式

获取图像数据 URL var dataURL = ctx.toDataURL("image/jpeg"); 得到的一个base64位的图片数据格式，"image/jpeg" 是png的图片格式，也支持image/jpeg 或 image/webp；第二个参数可选encoderOptions 为图片质量

其他注意点

• 在绘制图片的时候，要保证图片先加载完成，加载完成再绘制
• base 64位的图片不符合分享的图片要求，分享协议要求是有域名的，需要上传到CDN，这个需要借助接口
• 关于图片大小与清晰图：图片大小按照2倍率生成，在分享的时候可以适当的压缩，同时图片的质量参数也会影响到最终生成的图片清晰图，根据项目需求调整。

遇到的问题

• 接口图片并发情况下返回相同的图片，CDN图片命名问题，以秒级是不够的
• 清晰度不够，特别是白色的字体清晰度缺失特别明显，需要调图片质量参数
• 文字是项目自加载字体，不是系统默认的字体，偶尔会出现文字未正确识别的问题，偶发，但是还未有解决方案来监听字体是否正确解析，希望有知道的小伙伴可以告知，不胜感激！

进一步学习地址

http://canvas.migong.org/html5-canvas

转载于:https://juejin.im/post/5b026d29f265da0b873acc64