先上图
上面的这两张图是前段时间给大东家做的一个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，所以还是用微信原生的去做的，有知道的，望不吝相告！这里面有很多很多细节功能，需要大家去用心做了，有问题留言哈，分享即是快乐！