怎么使用Javascript实现图片写字？

Question

最近看到使用Javascript，实现图片上写字生成搞笑图片，这是怎么实现的呢？

代码如下：

<table class="content">
<tbody><tr>
<td>
 <div id="set" class="device"><br>
 <input placeholder="皇上说：" value="不许分享这个东西！" id="text1"><br>
 <input placeholder="皇后说：" value="臣妾做不到啊！" id="text2"><br>
 <select id="font">
 <option value="0" selected="">微软雅黑加粗</option>
 <option value="1">华康少女字体</option>
 <option value="2">方正少儿简体</option>
 <option value="3">仿宋简体</option>
 <option value="4">启功字体</option>
 <option value="5">徐静蕾字体</option>
 <option value="6">司马彦字体</option>
 </select>
 <input type="submit" value="生成臣妾做不到啊图片" id="out" onclick="javascript:gen();"><br>
 </div>
</td>
<td>
 <div class="device">
 <img width="356" height="460" src="http://1.phpgd.sinaapp.com/zbd.jpg?t1=&amp;t2=&amp;t3=" id="show" data-bd-imgshare-binded="1">
 </div>
</td>
</tr>
</tbody></table>
<script>
function gen() {
document.title = '"' + document.getElementById("text1").value + '"，"' + document.getElementById("text2").value + '"。 [aTool在线微博热图制作]';
document.getElementById('show').src = "http://1.phpgd.sinaapp.com/zbd.jpg?t1=" + document.getElementById('text1').value + "&t2=" + document.getElementById('text2').value + "&font=" + document.getElementById('font').value;
var i = 0;
var notice = setInterval(function() {
if (i % 2 === 0) {
document.getElementById("show").className = "notice";
} else {
document.getElementById("show").className = "";
}
if (i++ > 4) {
clearInterval(notice);
}
}, 200);
}
</script>

演示地址： http://www.99cankao.com/zhenhuan.html

Answer 1

这个当然知道是接口了，怎么实现的，能否告知呢？

Answer 2

回复
java代码比较简单吧，验证码怎么生成的，应该会吧，同样的原理

Answer 3

回复
下面我写了个简单的html5模式生成方式，简单些

Answer 4

现在在上班，晚上给你来个js版的，比较简单。服务器端处理图片就相对比较麻烦一点，你可以搜索一下。

Answer 5

你给的演示网站采用的方法是在服务器端生成图片。

Answer 6

canves上绘制图片和文字

Answer 7

iPhone浏览器乱码

Answer 8

图片重新发起了请求，后台操作的