个性签名功能

前台页面

<extend name="Public/layout" />
<block  name="style">
<style>
       body
        {
            background-color: #ddd;
            -webkit-user-select: none;
            font-family: hychf, "黑体";
            margin: 0;
        }
        @font-face
        {
            font-family: hychf;
            src: url('fonts/hychf.ttf');
        }
        canvas
        {
            border: 1px solid #777;
            display: block;
            margin: auto;
        }
        #imgdownload
        {
            width: 100px;
            height: 30px;
            display: block;
            text-decoration: none;
            text-align: center;
            line-height: 30px;
            border: 1px solid #000;
            border-radius: 6px;
        }
        </style>
</block>
<block name="body">
    <img id="fontimg" width="1280" height="512"  src=""/>
  
    内容：<input type="text" id="mytxt1" value="A5源码" />
    字体大小：<input type="text" id="txtfontsize" value="150" />
    文字背景图：<select id="dbg">
        <option value="222.png">222.png</option>
        <option value="bg4.png">bg4.png</option>
        <option value="bg5.png">bg5.png</option>
    </select>
    字体颜色：<select id="fontcolor">
        <option value="#FF6600">红色</option>
        <option value="#000000">黑色</option>
    </select>
    <input type="button" id="send" value="生成签名档" />
    <a href="#" id="imgdownload">下载图片</a>
    <div style="text-align: center; margin: 50px 0; font: normal 14px/24px 'MicroSoft YaHei';">
    </div>
</block>
<block name="script">
<script type="text/javascript">
window.onload = function () {
  
    var dbg = document.getElementById("dbg");
    
    var imgdownload = document.getElementById("imgdownload");

    var fontsize = document.getElementById("txtfontsize");
    var fontcolor = document.getElementById("fontcolor");
    
    var mytxt1 = document.getElementById("mytxt1");
    
    function ShowImg() {
       jQuery.ajax({
              url:"{:U('Home/Index/imglistajax')}",
           data:{imgfontsize:fontsize.value,imgfontcontent:mytxt1.value,imgfontcolor:fontcolor.value},
           type:'post',
           success:function(date){
              $("#fontimg").attr('src','');
             // alert();
            $("#fontimg").attr('src',"__ROOT__/"+date.src+"?Random="+Math.floor(Math.random()*(1000+1)));
            }
       });
    }
    document.getElementById("send").onclick = ShowImg;
}
</script>
</block>

View Code