1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
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();
});
});