index.js 2.81 KB


var ctx, sprite, img, _w, _h, play;
function initPreviewPage(imgIndex, callback){  
  img = new Image(); 
  img.onload = function(){
    // play=$("#play");
    // play.attr("width",img.width);
    // play.attr("height",img.height);
    play = document.createElement('canvas');
    $(play).attr("width",img.width);
    $(play).attr("height",img.height);
    ctx=play.getContext("2d");  
    ctx.clearRect(0, 0, img.width, img.height); 
    ctx.drawImage(img,0,0);  

    renderText(imgIndex);

    callback&&callback(); 
  }
  img.src = "../lib/images/jiangzhuang_Img"+imgIndex+"@3x.png"; 
}

function renderText(imgIndex){
  var praise = $("#praise").val();
  var date = $("#date").val();
  var sign = $("#sign").val();
  ctx.font="18px Arial";
  ctx.textAlign='center';
  if(imgIndex==1){
    ctx.fillText(praise,230,170); 
    ctx.fillText(date,325,240);
    ctx.fillText(sign,150,240);
  } else if (imgIndex==2){
    ctx.font="30px Arial";
    ctx.fillText("You are very good!",410,330); 
    ctx.fillText("2019-12-24",275,495);
    ctx.fillText("Tom",605,495);
  } else if (imgIndex==3){
    ctx.fillText(praise,230,155); 
    ctx.fillText(date,255,205);
    ctx.fillText(sign,255,255);
  } else if (imgIndex==4){
    ctx.fillText(praise,250,120); 
    ctx.fillText(date,210,240);
    ctx.fillText(sign,335,240);
  } else if (imgIndex==5){
    ctx.fillText(praise,250,165); 
    ctx.fillText(date,250,250); 
  } else if (imgIndex==6){
    ctx.fillText(praise,270,185); 
    ctx.fillText(date,305,267);
    ctx.fillText(sign,305,225);
  }
  
}

$(function(){ 

  _w = $(window).width();
  _h = $(window).height(); 

  $(".img-area").bind('click',function(){ 
    $(".check-item").attr("checked",false).hide();
    $(this).find(".check-item").attr("checked",true).show();
    $(".alert").html("").hide();
  });

  $(".close-view").bind('click',function(){
    $(this).hide();
    $("#playView").hide();
    $(".edit-form").show(); 
  });

  $(".preview").bind('click', function(){
    let cardIndex = $('input:checkbox[class="check-item"]:checked').eq(0).val();  
    if(cardIndex==undefined){
      $(".alert").html("请选择奖状!").show(300);
      return;
    }
    $(".edit-form").hide(); 
    initPreviewPage(cardIndex,function(){ 
      let imgUrl = play.toDataURL('image/jpeg', 1.0);
      $('#playView').attr('src', imgUrl);
      $('#playView').css({height: _w});
      $('#playView')[0].onload = function(){
        var play_w = $('#playView').width();
        var right = Math.floor(play_w/2)+35;  
        var top = _w-Math.floor(play_w/2)-35;
        var margin_top = Math.floor((_h-play_w)/2);
        $('#playView').css({
          "position": "absolute",
          "transform":"rotate(90deg)",
          "right": (right-_w)+"px",
          "top": (top+margin_top)+"px"
        }).show();
      };  
    }); 
    $(".close-view").show();  
  });

});