javascript - 朋友圈里姓氏图这样的功能是怎么实现的？

问题描述

问 题

根据文字、图片在线生成一个新的图片
比如现在比较朋友圈有个姓氏图，这样的功能

延伸：
怎么实现把html显示的前台样式生成对应样式图片？

解决方案

谷歌是个好东西。。

答案如下：

var tCtx = document.getElementById('textCanvas').getContext('2d'),
    imageElem = document.getElementById('image');

document.getElementById('text').addEventListener('keyup', function (){
    tCtx.canvas.width = tCtx.measureText(this.value).width;
    tCtx.fillText(this.value, 0, 10);
    imageElem.src = tCtx.canvas.toDataURL();
    console.log(imageElem.src);
}, false);

例子：http://jsfiddle.net/amaan/Wxm...
输入文字即会生成图片，还有 base64 代码，这就是它的实现方式。

这篇关于javascript - 朋友圈里姓氏图这样的功能是怎么实现的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！