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

HouZhong 发布于 2015/03/05 21:14
阅读 2K+
收藏 2

最近看到使用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
加载中
1
不是simaguo
不是simaguo
图片重新发起了请求,后台操作的
0
Nixus
Nixus
iPhone浏览器乱码
0
caryhgq
caryhgq
canves上绘制图片和文字
0
双_双
双_双
你给的演示网站采用的方法是在服务器端生成图片。
双_双
双_双
现在在上班,晚上给你来个js版的,比较简单。服务器端处理图片就相对比较麻烦一点,你可以搜索一下。
HouZhong
HouZhong
http://1.phpgd.sinaapp.com/zbd.jpg?t1=11&t2=hello%20world 这是接口,不知道怎么实现的,有没有办法或者源码??
0
绝对是路过

对头 这是服务器生成的,这是生成接口。。。

http://1.phpgd.sinaapp.com/zbd.jpg?t1=11&t2=hello%20world

绝对是路过
回复 @HouZhong : 下面我写了个简单的html5模式生成方式,简单些
绝对是路过
回复 @HouZhong : java代码比较简单吧,验证码怎么生成的,应该会吧,同样的原理
HouZhong
HouZhong
这个当然知道是接口了,怎么实现的,能否告知呢?
0
梦想岛
梦想岛

php 文字水印

so easy.

o easy.

easy.

asy

sy.

y.

.


如果用前端完成,我帮你写好了一个demo,你要建一个 images 的目录 存放一个"moban.jpg"的图片,然后代码如下。


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <title>臣妾做不到啊</title>
    <script type="text/javascript" src="images/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        var util = {
            'name':'my_canvas',
            'imgPath':'images/',
            'img':{
                'background':'moban.jpg'
            },
            //文字在画布上的设定(坐标,颜色,字体,填充等)
            'size':{
                //皇上说
                'val_a':{
                    'left':5,
                    'top':265,
                    'sizeTop':20,
                    'fontSize':'22px',
                    'fontColor':'#fff',
                    'fontFamily':'Microsoft YaHei',
                    'width':421,
                    'height':25,
                    'fillStyle':'#000'
                },
                //臣妾说
                'val_b':{
                    'left':5,
                    'top':530,
                    'sizeTop':20,
                    'fontSize':'22px',
                    'fontColor':'#fff',
                    'fontFamily':'Microsoft YaHei',
                    'width':421,
                    'height':25,
                    'fillStyle':'#000'
                }
            },
            'imgFile':{

            },
            'canvas':{
                'element':'',
                'cxt':''
            },
            'loadImg': function(src,fn){
                var file = new Image();
                file.onload = function(e){
                    if(typeof fn=='function') fn(file,e);
                }
                file.src = src;
            },
            'playInit':function(){
                //加载背景图
                this.loadImg(this.imgPath+this.img['background'],function(file,e){
                    util.imgFile['background'] = {
                        'file':file,
                        'e':e
                    }

                    util.loadCanvas();
                });
            },
            'loadCanvas':function(){
                this.canvas.element = document.getElementById("canvas");
                this.canvas.cxt = this.canvas.element.getContext("2d");
                this.playCanvas();
            },
            'playCanvas':function(){
                var cxt = this.canvas.cxt;
                /*画背景*/
                util.playBackground(cxt);
            },
            'playBackground':function(cxt,fn){
                var backgroundFile = this.imgFile['background'].file;
                cxt.beginPath();
                cxt.drawImage(backgroundFile,0,0,backgroundFile.width,backgroundFile.height);
                cxt.closePath();

                if(typeof fn=="function") fn();
            },
            'playSize':function(cxt,args,fn){

                cxt.fillStyle= args.fillStyle||"#FFF";/*设置填充颜色*/
                args.clearLeft = args.clearLeft || args.left;
                cxt.fillRect(args.clearLeft, args.top-args.sizeTop, args.width,args.height);

                cxt.fillStyle = args.fontColor;
                cxt.font = args.fontSize+" "+args.fontFamily;
                cxt.fillText(args.text,args.left,args.top);

                if(typeof fn=="function") fn();
            }
        };

        function val_a(text){
            var  args;
            args = util.size.val_a;
            args.text = text;
            util.playSize(util.canvas.cxt,args);
        }
        function val_b(text){
            var  args;
            args = util.size.val_b;
            args.text = text;
            util.playSize(util.canvas.cxt,args);
        }

        //监听事件 val_a的文字输入的右键粘贴
        $('.my_canvas .val_a').bind('input propertychange', function() {
            val_a($(this).val())
        });
        //监听事件 val_b的文字输入的右键粘贴
        $('.my_canvas .val_b').bind('input propertychange', function() {
            val_b($(this).val())
        });

    </script>
    <style>
        body{
            text-align: center;
            margin: 0;
        }
        .input{

        }
        .container{
            width: 1024px;
            margin: 0 auto;
        }
        .image_view,.operation{
            float: left;
        }
        .diy_margin{
            margin-top: 250px;
            text-indent: 20px;
        }
    </style>
</head>

<body>
<h1>臣妾做不到啊</h1>
<div class="container my_canvas">
    <div class="image_view">
        <canvas id="canvas" width="421" height="543"></canvas>
    </div>
    <div class="operation">
        <div class="diy_margin">
            <label>
                皇上说:<input type="text" value="不许分享这个东西!" class="input val_a">
            </label>
        </div>
        <div class="diy_margin">
            <label>
                臣妾说:<input type="text" value="臣妾做不到啊!!" class="input val_b">
            </label>
        </div>
    </div>
</div>
<script>
    function supports_canvas() {
        return !!document.createElement('canvas').getContext;
    }

    //页面加载完成之后
    $(function(){

        if (!supports_canvas()){
            $('body').html('您的浏览器不支持html5,请升级到ie10及以上版本,或者使用chrome,firefox,safari!');
            console.log(111)
        }
        else{
            //初始化
            util.playInit();
        }
        
    });
</script>
</body>
</html>



图片:


0
绝对是路过
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

<canvas style="width=470;height=500" id="myCanvas">your browser does not support the canvas tag </canvas>
<input id="first" type="text" value="贱人跪下" >
<input id="second" type="text" value="滚犊子" >
<input type="button" onclick="gen()" value="生成" >

<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
//大小
canvas.height=550;
canvas.width=350;
var ctx=canvas.getContext('2d');
//图片
var img = new Image();
//1.jpg 在当前目录下
img.src = "1.jpg"
function gen(){
	//绘制图片
	ctx.drawImage(img, 0, 0);
	//设置字体颜色
	ctx.font = "20pt Calibri";
	ctx.fillStyle = "#FFFFFF";
	//设置第一处内容
	ctx.fillText(document.getElementById("first").value,20,265);
	//设置第二处内容
	ctx.fillText(document.getElementById("second").value,20,530);
}
//第一处展示
img.onload= function(){
	gen();
}
</script>
</body>
</html>



HouZhong
HouZhong
http://1.phpgd.sinaapp.com/flappybird.jpg?s=69&b=69 那这种图片是怎么回事? 好比把69变为89,那么图片上就变成89了。 http://1.phpgd.sinaapp.com/zbd.jpg?t1=不要分享&t2=做不到&t3=33 好像是直接变参数,然后图片的内容就换了?? 真是奇怪了。
返回顶部
顶部