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