Skip to content

Instantly share code, notes, and snippets.

@justin3737

justin3737/jsbin.fabuqake.css

Created July 24, 2014 01:07
Show Gist options
  • Save justin3737/17b5d18f497beee9e6e7 to your computer and use it in GitHub Desktop.
Save justin3737/17b5d18f497beee9e6e7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.fabuqake.css
.wrap {
border : 1px solid #ccc;
//transform : scale(3,3);
//-webkit-transform : scale(3,3);
transform-origin : 0,0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
position:relative;
};
Raw
jsbin.fabuqake.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>keysPDF</title>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//neocotic.com/qr.js/lib/qr.min.js"></script>
<script src="//parall.ax/parallax/js/jspdf.js"></script>
</head>
<body>
<div class="qrcodes">
<div class="wrap"></div>
</div>
<button onclick="keyspdf.download();">下載</button>
</body>
</html>
Raw
jsbin.fabuqake.js
//-------------- keyspdf.js --------------
(function(){
/****************
* add() 物件的 sample :
* item {
* url : 'xxx', name : 'xxx', serial: 'xxx', code: 'xxx'
* }
****************/
var TYPE = {
KEYSCODE : 'K'
};
var LAYOUT = {
KEYSCODE : {
COL2X2 : {
QR_W : 60, //QRcode 寬
QR_H : 60, //QRcode 寬
QR_L : 17.5, //QRcode 左
QR_T : 39.25, //QRcode 上
COL : 2,
ROW : 2
},
COL2X3 : {
QR_W : 60,
QR_H : 60,
QR_L : 17.5,
QR_T : 16,
COL : 2,
ROW : 3
},
COL2X4 : {
QR_W : 40,
QR_H : 40,
QR_L : 27.5,
QR_T : 14.625,
COL : 2,
ROW : 4
},
COL3X3 : {
QR_W : 40,
QR_H : 40,
QR_L : 11.5,
QR_T : 26,
COL : 3,
ROW : 3
},
COL3X4 : {
QR_W : 40,
QR_H : 40,
QR_L : 11.5,
QR_T : 14.625,
COL : 3,
ROW : 4
},
COL3X5 : {
QR_W : 35,
QR_H : 35,
QR_L : 14,
QR_T : 10.2,
COL : 3,
ROW : 5
},
COL4X5 : {
QR_W : 30,
QR_H : 30,
QR_L : 8.75,
QR_T : 12.7,
COL : 4,
ROW : 5
},
COL4X6 : {
QR_W : 25,
QR_H : 25,
QR_L : 11.25,
QR_T : 10.5,
COL : 4,
ROW : 6
}
}
};
// 設定畫布大小
var CANVAS = {
PDF : {
W : 210,
H : 297,
BORDER_T : 10, //上邊界
BORDER_L : 10, //左邊界
CUT_LINE : 0.1 //裁切線寬
},
HTML : {
W : 210,
H : 297,
BORDER_T : 10, //上邊界
BORDER_L : 10, //左邊界
CUT_LINE : 0.1 //裁切線寬
}
};
var OPTION = {
KEYSCODE : {
SHOW_LABEL : 'SHOW_LABEL'
}
};
var current = {
type : null,
$preview : null,
layout : null,
options : {}
};
var funcs = {};
var itemArr = [];
var doc = null;
var curr_canvas = null; //當前畫布
// 建立 $preview 預覽的目標元件(container)
function init( option )
{
// function 指向位置
switch (option.type) {
case 'KEYSCODE' :
funcs = {
init : init,
add : k_add,
remove : k_remove,
render : k_render,
download : k_download
};
current.type = option.type;
break;
default :
funcs = {
init : init,
add : k_add,
remove : k_remove,
render : k_render,
download : k_download
};
current.type = option.type;
break;
}
window.keyspdf = funcs;
if (option.layout) {
current.layout = option.layout;
}
if (option.$preview) {
current.$preview = option.$preview;
}
if (option.options) {
current.options = option.options;
}
} // end init();
// 產生qr圖片物件 預設為最高畫質
function addQrImg(url)
{
var img = qr.toDataURL({ mime: 'image/jpeg', value: url , level:'L' ,size : '10'});
return img;
} // end addQrImg();
// 增加裡面的qrcode物件, 可以傳入單一物件 or array
function add( item )
{
} // end add();
function k_add( item )
{
if (!qr) {
alert('沒有引入qr lib!');
return;
}
if (Array.isArray(item)){
for (var i=0 ; i < item.length ; i++ ) {
itemArr.push(item[i]);
}
} else if (typeof item === 'object'){
itemArr.push(item);
}
k_render();
} // end k_add();
// 移除qrcode 物件
function remove( index )
{
} // end remove();
function k_remove( idx )
{
itemArr.splice(idx,1);
k_render();
} // end k_remove();
// 以高超的HTML5技巧預覽
function render()
{
} // end render();
function k_render()
{
var canvas = CANVAS.HTML;
var layout = LAYOUT[current.type][current.layout];
curr_canvas = current.$preview.empty();
curr_canvas.parent().empty().append(curr_canvas);
curr_canvas.css({
'width' : canvas.W,
'height' : canvas.H
});
// 建立元素 img, label ....
for (var i=0; i< itemArr.length; i++) {
var imgURI = addQrImg(itemArr[i].url);
var label = itemArr[i].name;
var $parent = $('<div></div>');
var $imgWrap = $('<div></div>');
var $img = $('<img>').attr('src',imgURI);
$parent.addClass('qr_parent');
$imgWrap.addClass('qr_img_wrap');
$img.addClass('qr_img');
$imgWrap.append($img);
$parent.append($imgWrap);
assignHTMLStyle($parent, layout, i);
}
} // end k_render();
// 下載
function download()
{
if(itemArr.length === 0) {
alert('沒有物件無法下載');
return;
}
} // end download();
function k_download()
{
if(itemArr.length === 0) {
alert('沒有物件無法下載');
return;
}
var layout = LAYOUT[current.type][current.layout];
doc = new jsPDF();
// 建立PDF元素 img label...
for (var i=0; i< itemArr.length; i++) {
var imgData = addQrImg(itemArr[i].url);
assignPDFStyle( imgData ,layout ,i);
}
doc.save('Test.pdf');
} // end k_download();
// HTML加入樣式parent
function assignHTMLStyle( elm ,style ,idx)
{
var canvas = CANVAS.HTML;
var posX = canvas.BORDER_L; //畫布原點 x,y
var posY = canvas.BORDER_T;
var w = style.QR_W;
var h = style.QR_H;
var qr_t = style.QR_T;
var qr_l = style.QR_L;
var col = style.COL;
var row = style.ROW;
var qr_ctW = (canvas.W - canvas.BORDER_L*2)/col; // qrcode 父層容器寬
var qr_ctH = (canvas.H - canvas.BORDER_T*2)/row; // qrcode 父層容器高
var pageAmt = style.COL * style.ROW;
var offset; // 座標偏移
var $img = elm.find('.qr_img');
var $imgWrap = elm.find('.qr_img').parent();
// 增加ㄧ頁
if ((idx)%pageAmt === 0 && idx !== 0) {
var new_canvas = curr_canvas.clone();
new_canvas.empty();
curr_canvas.parent().append(new_canvas);
}
// 如果超過頁數指定到下一個 canvas (多頁情況下)
if (idx+1 > pageAmt) {
var canvas_id = parseInt((idx+1)/pageAmt,10);
curr_canvas = $('.'+current.$preview.attr('class')).eq(canvas_id ); // 重新指定要append 的對象
idx = idx - pageAmt * canvas_id ;
}
// 加入 qrcode 條碼
offset = getOffset(idx,col);
posX += offset.x * qr_ctW;
posY += offset.y * qr_ctH;
$imgWrap.css({
top : qr_t,
left : qr_l,
width : w,
height : h,
position : 'relative'
});
$img.css({
width : '100%',
height : 'auto'
});
elm.css({
top : posY,
left : posX,
width : qr_ctW,
height : qr_ctH,
position : 'absolute'
});
curr_canvas.append(elm);
// 劃裁切線
if ((idx +1 )%col !== 0) {
elm.css({
'border-right':'1px solid #ccc'
});
}
if (offset.y +1 != row) {
elm.css({
'border-bottom':'1px solid #ccc'
});
}
}
// PDF加入樣式與裁切線
function assignPDFStyle( elm ,style ,idx)
{
var canvas = CANVAS.PDF;
var posX = canvas.BORDER_L; //畫布原點 x,y
var posY = canvas.BORDER_T;
var w = style.QR_W;
var h = style.QR_H;
var qr_t = style.QR_T;
var qr_l = style.QR_L;
var col = style.COL;
var row = style.ROW;
var qr_ctW = (canvas.W - canvas.BORDER_L*2)/col; // qrcode 父層容器寬
var qr_ctH = (canvas.H - canvas.BORDER_T*2)/row; // qrcode 父層容器高
var pageAmt = style.COL * style.ROW;
var offset; // 座標偏移
// 換ㄧ頁
if ((idx)%pageAmt === 0 && idx !== 0) {
doc.addPage();
}
if (idx+1 > pageAmt) {
var canvas_id = parseInt((idx+1)/pageAmt,10);
idx = idx - pageAmt * canvas_id;
}
// 加入 qrcode 條碼
offset = getOffset(idx,col);
posX += offset.x * qr_ctW + qr_l;
posY += offset.y * qr_ctH + qr_t;
doc.addImage(elm, 'JPEG', posX , posY, w, h);
// 劃裁切線
// 劃左邊
if ((idx +1 )%col !== 0) {
var l_line_A_PosX = canvas.BORDER_L + (offset.x + 1) * qr_ctW;
var l_line_A_PosY = canvas.BORDER_T + offset.y * qr_ctH;
var l_line_B_PosX = canvas.BORDER_L + (offset.x + 1) * qr_ctW;
var l_line_B_PosY = canvas.BORDER_T + (offset.y + 1) * qr_ctH;
doc.setLineWidth(canvas.CUT_LINE);
doc.line(l_line_A_PosX, l_line_A_PosY, l_line_B_PosX, l_line_B_PosY);
}
// 劃下面
if (offset.y +1 != row) {
var t_line_A_PosX = canvas.BORDER_L + offset.x * qr_ctW;
var t_line_A_PosY = canvas.BORDER_T + (offset.y + 1) * qr_ctH;
var t_line_B_PosX = canvas.BORDER_L + (offset.x + 1) * qr_ctW;
var t_line_B_PosY = canvas.BORDER_T + (offset.y + 1) * qr_ctH;
doc.setLineWidth(canvas.CUT_LINE);
doc.line(t_line_A_PosX, t_line_A_PosY, t_line_B_PosX, t_line_B_PosY);
}
}
// 取得座標偏移參數
function getOffset(idx ,col )
{
var offset = {};
offset.x = idx%col;
offset.y = Math.floor(idx/col);
return offset;
}
window.keyspdf = {
init : init
};
})();
//-------------- keyspdf.js 結束 --------------
//----------------- init() 開始使用 ----------------------
var option = {
type : 'KEYSCODE',
$preview : $('.wrap'),
layout : 'COL2X2',
options : {}
};
var items = [
{
url : 'http://ob.keys.tw/k/4', name : '1028 閃耀透漾腮紅(01粉紅芭比)+美白CC霜(01明亮膚)', serial: '000ABC123', code: '000ABC123'
},
{
url : 'http://ob.keys.tw/k/4', name : '1030 美白CC霜(01明亮膚)', serial: '000ABC123', code: '000ABC123'
},
{
url : 'http://ob.keys.tw/k/4', name : '1032 閃耀透漾腮紅(01粉紅芭比)', serial: '000ABC123', code: '000ABC123'
},
{
url : 'http://ob.keys.tw/k/4', name : '1032 閃耀透漾腮紅(01粉紅芭比)', serial: '000ABC123', code: '000ABC123'
},
{
url : 'http://ob.keys.tw/k/4', name : '1032 閃耀透漾腮紅(01粉紅芭比)', serial: '000ABC123', code: '000ABC123'
}
];
var add_new_one = {
url : 'http://ob.keys.tw/k/4', name : '1032 閃耀透漾腮紅(01粉紅芭比)', serial: '000ABC123', code: '000ABC123'
};
keyspdf.init(option); // 初始化
keyspdf.add(items); // 加入物件陣列, 用 add();
keyspdf.add(add_new_one); // 再加入一個物件, 一樣用 add();
//keyspdf.download(); // 下載
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment