h5-自定义生成海报(头条初吻，轻虐)

先上图

上面的这两张图是前段时间给大东家做的一个h5活动页的截图，链接我就不给了，哈哈，不要抄袭我们大设计师的设计风格哦，emmmm

图1是html页，点击上面的6（长安保存并分享）就会自动生成一张图2在你的手机中。

解析：首先确定整体技术，然后再局部。目的是把html转化成图片，当然用canvas了，canvas有个api: c.toDataURL('image/jpeg'); 会得到一个base64的src路径，赋值给一个img标签就可以得到这张图，所以，要保留在图片上的所有东西都必须用canvas画出来（图2），其他的你可以用html标签就好了（比如再来一张，长安保存并分享），所以呢，重点就是用canvas写文字啊，写图片啊，哈哈，别觉得我会写啊，这有什么难的，哥们，canvas的适配了解以下，canvas对文字的样式设置，文字对齐（左对齐，居中对齐，上下对齐等）换行设置了解一些，然后emmmmmm。canvas并没有完美的解决这些问题的api，所以，都得自己去写方法。

插一下：想用第三方插件么，看着XXX插件完美解决这些canvas问题，直接写html，用插件转canvas转图片，是不是很诱人，如果你时间充裕的话可以试试，到时候你可能还要帮着插件修改插件bug，别问我是怎么知道的，我是修了一个又一个，不说了全是泪，果断放弃，还是自己写好，杀鸡焉用牛刀，况且还是放了五百年的牛刀。

敲黑板划重点啦！以下都是要考的，圈起来！

图一中1标题是写死的，背景图和定位3是一一对应的json数据，且是随机生成的，2标语也是随机的，4人名是报名页你自己输入的用storage存取一下就好，7广告直接用canvas画出来就好了。

A:canvas在各尺寸手机上适配（我的canvas是满屏），文字在canvas上尺寸适配并且清晰不模糊：

A：原理，canvas没有对文字适配的，我们要整体对画布scale。

var canvasWidth= document.body.clientWidth;
var canvasHeight= document.body.clientHeight;
scaleBy = DPR();
c.width=canvasWidth*scaleBy;
c.height=canvasHeight*scaleBy;
c.style.width = canvasWidth+'px';
c.style.height = canvasHeight+'px';
ctx.scale(scaleBy, scaleBy);

使用了方法：

/**
* 根据window.devicePixelRatio获取像素比
 **/
function DPR() {
 if (window.devicePixelRatio && window.devicePixelRatio > 1) {
	 return window.devicePixelRatio;
 }
 return 1;
}

B：下面就可以直接写文字了。

用new Image()先加载一层背景图，自定义，在这个onload 里面写字体

ctx.drawImage(this,0,0,canvasWidth,canvasHeight); 
ctx.fillStyle = '#fff'; 
ctx.font="500 9px 微软雅黑"; 
ctx.fillText('2018 Lanzhou Marathon',25,40); 
ctx.font="500 15px 微软雅黑"; 
ctx.fillText('2018兰州马拉松',23,60); 
ctx.font="500 23px 微软雅黑"; 
ctx.textAlign='center'; //居中对齐，基准线在fillText中的位置，而fillText又可以用wrapText（自定义）来替代
ctx.wrapText('“'+customText[customTextI]+'”', canvasWidth/2,200, 310, 34)

canvas只能写单行，但是标语有可能是多行，所以用wrapText来折行

// 绘制自动换行的字符串maxWidth是最大宽度，lineHeight是行高，这两个可以省略
CanvasRenderingContext2D.prototype.wrapText = function (text, x, y, maxWidth, lineHeight) {
 if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
		 return;
 }
 var context = this;
 var canvas = context.canvas;
 if (typeof maxWidth == 'undefined') {
	 maxWidth = (canvas && canvas.width) || 300;
 }
 if (typeof lineHeight == 'undefined') {
 lineHeight = (canvas && parseInt(window.getComputedStyle(canvas).lineHeight)) || parseInt(window.getComputedStyle(document.body).lineHeight);
}
// 字符分隔为数组
 var arrText = text.split('');
 var line = '';
		 
 for (var n = 0; n < arrText.length; n++) {
 var testLine = line + arrText[n];
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
 context.fillText(line, x, y);
 line = arrText[n];
 y += lineHeight;
 } else {
 line = testLine;
 }
}
 context.fillText(line, x, y);
};

C：注意到定位中有个小icon，继续画这个icon，而地点名是随着icon为基准向后对齐的，在地点下面就是人名，上下左对齐，在图片load中

ctx.drawImage(this,canvasWidth/2+10,265,15,18); 
ctx.font="400 15px 微软雅黑"; 
ctx.textAlign='left';//设置地点名字随着定位icon向后扩展，方法以定位icon以基准线左对齐就好
ctx.fillText(placeName[placeNameI].title,canvasWidth/2+30,280); 
ctx.font="500 18px PingFangSC-Regular, sans-serif "; 
ctx.textAlign='left';
ctx.fillText(customName,canvasWidth/2+30,306); 

D：画广告图，并生成base64的链接

ctx.drawImage(this,0,canvasHeight-80,canvasWidth,80); 
var dataURL = c.toDataURL('image/jpeg'); 
$('.getImg').html('<img class="getImg" src="'+dataURL+'">')//用img标签替换掉canvas就好了，长按保存，

有些使用点击按钮去保存，或者点击按钮去分享，我查了很多，没有找到这方面的安全完美的api，所以还是用微信原生的去做的，有知道的，望不吝相告！这里面有很多很多细节功能，需要大家去用心做了，有问题留言哈，分享即是快乐！