手机h5像素_h5-自定义生成海报（头条初吻，轻虐）

先上图

图1

图2

上面的这两张图是前段时间给大东家做的一个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标签替换掉canvas就好了，长按保存，

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