canvas1

/*            
兔玩成就DIY js
2014.11.15
z  y
*/            
            $(function()
                {  
                  print();
                });  
                
            function twcanvas(tw_type,bg_img_src,img_src,tw_title,tw_content,tw_num) {
                var canvas = document.getElementById("tuwan");
                
                ctx = canvas.getContext("2d");
                
                ctx.globalCompositeOperation = "destination-over";  
                
                bgimg = new Image();
                img = new Image();
                
                
                
                
                bgimg.src = bg_img_src;
                bgimg.onload = function() {
                  ctx.drawImage(bgimg, 0, 0);
                }
                
                
                img.src = img_src;
                img.onload = function() {
                  ctx.drawImage(img, 5, 5);
                }
                
                
                //bgimg.src = "./images/general_bg.png";
                //img.src = "./images/tuwan.png";
                

                
                //成就标题        
                ctx.fillStyle = '#fff';
                ctx.font = 'bold 15px Microsoft Yahei';
                ctx.textAlign = 'center';
                ctx.fillText(tw_title,canvas.width/2,18);

                ctx.fillStyle = '#000';
                ctx.font = 'bold 15px Microsoft Yahei';
                ctx.textAlign = 'center';
                ctx.fillText(tw_title,canvas.width/2,20);
                
                //成就内容
                ctx.fillStyle = '#000';
                ctx.font = '13px Microsoft Yahei';
                ctx.textAlign = 'center';
                ctx.fillText(tw_content,canvas.width/2,40);
                
                //成就点数
                ctx.fillStyle = '#000';
                ctx.font = '13px Microsoft Yahei';
                ctx.textAlign = 'center';
                ctx.fillText(tw_content,canvas.width/2,40);
                
                if (tw_type == 'g'){
                ctx.fillStyle = '#fff';
                ctx.font = '20px Microsoft Yahei';
                ctx.fillText(tw_num,508,42);
                }

                //ctx.globalCompositeOperation = "destination-over";  
                
            }    
                
              
            function print()  {        

                    //兼容性检测
                    if (typeof FileReader === 'undefined') {  
                    alert('很遗憾，您的游览器不支持此项功能。请您使用IE10+,FireFox,Chrome来访问。谢谢支持！');
                    $('#tuwan').css('display','none');  
                    location.href = "http://www.tuwan.com"
                    return;  
                    }  

                    twcanvas('g',"./images/general_bg.png","./images/tuwan.png",'兔玩网DIY成就大师','使用兔玩网DIY成就系统','10');
                    
                    
                 $("input[type='file']").change(function(evt){
                
                    if (!!window.ActiveXObject || "ActiveXObject" in window)  {
                        $('#tuwan').css('display','block');  
                        $('#ie_img').css('display','none');
                    }
 
                    var files = evt.target.files;   
                        for (var i = 0, f; f = files[i]; i++) {
                            if (!f.type.match('image.*')) {
                            continue;
                            }
                        var reader = new FileReader();
                        reader.onload = (function(theFile) {
                    return function(e) {                                 
                        //$("#list img").attr("src",e.target.result);  //预览图片的位置                  
                        //$('#list').css("background-image","url("+ e.target.result +")");
                        
                        };
                    })
                    (f);
                    reader.readAsDataURL(f);
                    }
                });
            }  


            function printfinal(){
            
                var mydate = new Date();
                
                if (!!window.ActiveXObject || "ActiveXObject" in window)  {
                    $('#tuwan').css('display','block');  
                    $('#ie_img').css('display','none');
                }
                
                
                // $("#title")[0].innerHTML = $("#achievements_title").val();
                // $("#title2")[0].innerHTML = $("#achievements_title").val();
                // $("#content")[0].innerHTML = $("#achievements_content").val();            
                
                // var achievement_num = $("#achievements_num").val();
                
                // //根据数字自动调整成就点数的位置
                // if (Number(achievement_num) <= 9){
                    // $('#num').css("margin-right","34.5px");
                // }
                // else{
                    // $('#num').css("margin-right","29px");
                // }
                
                // if (!!window.ActiveXObject || "ActiveXObject" in window)  {
                    // $('#num').css("margin-top","-3px");
                // }
                // else{
                    // $('#num').css("margin-top","-5px");
                // }
                
                
                // $("#num")[0].innerHTML = achievement_num;
                
            
                
            
                // html2canvas( $('#tuwan') ,   
                // {  
                    // onrendered: function(canvas)   
                    // {     
                        // // $('#down_button').attr( 'href' , canvas.toDataURL() ) ;  
                        // // $('#down_button').attr( 'download' , 'tuwan.png' ) ;  
                        // // $('#down_button').css('display','inline-block');  
                        // if (!!window.ActiveXObject || "ActiveXObject" in window)  {
                            // $('#ie_img').css('display','block');
                            // $('#ie_img_down').attr( 'src' , canvas.toDataURL() );
                            // $('#tuwan').css('display','none');  
                        // }
                        // else{
                            // $('#down_button').attr( 'href' , canvas.toDataURL() ) ;  
                            // $('#down_button').attr( 'download' , 'tuwan' + mydate.getTime() + '.png' ) ;  
                            // $('#down_button').css('display','inline-block');  
                        // }
                    // }  
                // });  
            }

            function txtClear(){ //重置文本控件
                // $("#title")[0].innerHTML = '兔玩网DIY成就大师';
                // $("#title2")[0].innerHTML = '兔玩网DIY成就大师';
                // $("#content")[0].innerHTML = '使用兔玩网DIY成就系统';
                // $("#num")[0].innerHTML = "10";
                $("#achieve_form")[0].reset();
            }
            
            
            
            function legacy_mode(){  //光辉事迹    
            //$('#bg').css("background-image","url(../images/legacy_bg.png)");
            //$('#num').css('display','none');
            $('#achievements_num').attr( 'disabled' , 'disabled');
            //$('#achievements_num').removeAttr("class");
            //$('#list').css("background-image","url(../images/tuwan.png)");
            //$('#num').css("margin-right","29px");
            $('#down_button').css('display','none');
            $('#a_num').css('display','none');
            $('#tuwan').css('display','block');
            $('#ie_img').css('display','none');
            txtClear();
            }
            
            function general_mode(){ //普通事迹
            //$('#bg').css("background-image","url(../images/general_bg.png)");
            //$('#num').css('display','inline-block');
            $('#achievements_num').removeAttr("disabled");
            //$('#achievements_num').attr( 'class' , 'validate[required,custom[integer],min[1],max[99]');
            //$('#list').css("background-image","url(../images/tuwan.png)");
            //$('#num').css("margin-right","29px");
            $('#down_button').css('display','none');
            $('#a_num').css('display','block');
            $('#tuwan').css('display','block');
            $('#ie_img').css('display','none');
            txtClear();
            }

 

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="./css/jquery.validator.css">
        <link rel="stylesheet" href="./css/tuwancj.css">
        <script type="text/javascript" src="./js/html2canvas.js"></script>
        <script type="text/javascript" src="./js/jquery.js"></script>
        <script type="text/javascript" src="./js/jquery.validator.js"></script>
        <script type="text/javascript" src="./js/zh_CN.js"></script>
        <script type="text/javascript" src="./js/tw_cj.js"></script>
        <title>兔玩网成就DIY系统</title>
        <style>

        </style>
    </head>
    <body>

    <div class="div_center">
    <div class="div_banner"></div>
    <!-- 表单区域 -->
        <div class="div_content">

        <form id="achieve_form" class="achi" enctype="multipart/form-data" action="" method="post"  autocomplete="off" data-validator-option="{theme:'yellow_right_effect',stopOnError:true,timely:false}">
        <ul>
            <li class="cjlx">
            <a type="button" class="button blue" id="general" onclick="general_mode();" >
            <img src="./images/ptcj.png" alt="普通成就" title="普通成就" />
            普通成就 
            </a>
            <a type="button" class="button blue" id="legacy" onclick="legacy_mode();">
            <img src="./images/ghsj.png" alt="光辉事迹" title="光辉事迹" />
            光辉事迹
            </a>
            </li>
            <li class="tpsc">
            <input type="file" name="imageUpload" accept="image/gif, image/jpeg, image/jpg, image/png" data-rule="accept(jpeg|png|gif|jpg);" />
            </li>
            <li class="cjbt">
            <input type="text" id="achievements_title"  data-rule="成就标题: required; length[1~25];"  />
            </li>
            <li class="cjnr">
            <input type="text" id="achievements_content" data-rule="成就内容: required; length[1~28];"  />
            </li>
            <li id="a_num">
            <input type="text" id="achievements_num" data-rule="成就点数: required; integer; range[1~99];" />
            </li>
            <li>
            <!-- <button type="submit" onclick="alert($('#achieve_form').trigger('validate'));">生成</button> -->
            <a type="button" class="button blue" id="generpic"  onclick="$('#achieve_form').isValid() && printfinal();print();" >制作成就</a>
            <a type="button" class="button blue" id="down_button" style="display:none;" >下载</a> 
            </li>
        </ul>
        </form> 

        <!--预览生成 图片下载 -->
        预览图>>>
        <div id="ie_img" >
        <img id="ie_img_down" alt="IE游览器请右击另存为保存此图片" title="IE游览器请右击另存为保存此图片"/>
        IE游览器请右击【另存为】保存此图片
        </div>

        <canvas id="tuwan" width="549" height="85"></canvas>
        
        
        </div>
    <!-- 表单区域 -->

    </div>
    
    </body>
</html>