UnknownObject/jquery-qrcode
1
0
Fork 0
mirror of https://github.com/lrsjng/jquery-qrcode.git synced 2026-08-12 20:01:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

Adds position options. Now accepts img elements as fill and background.

Browse Source
This commit is contained in:
Lars Jung
2013-08-01 02:01:49 +02:00
parent 718dc342ad
commit cf982e4df5
3 changed files with 57 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/demo/index.html
+11 -8
View File
@@ -35,10 +35,10 @@
<hr/> <hr/>
<label for="size">SIZE:</label> <label for="size">SIZE:</label>
<input id="size" type="range" value="400" min="100" max="1000" step="50" /> <input id="size" type="range" value="400" min="100" max="1000" step="50" />
<label for="color">COLOR</label> <label for="fill">FILL</label>
<input id="color" type="color" value="#333333" /> <input id="fill" type="color" value="#333333" />
<label for="bg-color">BACKGROUND COLOR</label> <label for="background">BACKGROUND</label>
<input id="bg-color" type="color" value="#ffffff" /> <input id="background" type="color" value="#ffffff" />
<label for="text">CONTENT</label> <label for="text">CONTENT</label>
<textarea id="text">http://larsjung.de/qrcode/</textarea> <textarea id="text">http://larsjung.de/qrcode/</textarea>
<hr/> <hr/>
@@ -69,10 +69,15 @@
<option value="4">4 - Image-Box</option> <option value="4">4 - Image-Box</option>
</select> </select>
<hr/> <hr/>
<label for="msize">SIZE:</label>
<input id="msize" type="range" value="11" min="0" max="40" step="1" />
<label for="mposx">POS X:</label>
<input id="mposx" type="range" value="50" min="0" max="100" step="1" />
<label for="mposy">POS Y:</label>
<input id="mposy" type="range" value="50" min="0" max="100" step="1" />
<hr/>
<label for="label">LABEL</label> <label for="label">LABEL</label>
<input id="label" type="text" value="jQuery.qrcode" /> <input id="label" type="text" value="jQuery.qrcode" />
<label for="fontsize">LABEL SIZE:</label>
<input id="fontsize" type="range" value="11" min="1" max="20" step="1" />
<label for="font">FONT NAME</label> <label for="font">FONT NAME</label>
<input id="font" type="text" value="Ubuntu" /> <input id="font" type="text" value="Ubuntu" />
<label for="fontcolor">FONT COLOR:</label> <label for="fontcolor">FONT COLOR:</label>
@@ -80,8 +85,6 @@
<hr/> <hr/>
<label for="image">IMAGE</label> <label for="image">IMAGE</label>
<input id="image" type="file" /> <input id="image" type="file" />
<label for="imagesize">IMAGE SIZE:</label>
<input id="imagesize" type="range" value="13" min="1" max="30" step="1" />
</div> </div>
<img id="img-buffer" src="dummy.png" /> <img id="img-buffer" src="dummy.png" />
src/demo/scripts.js
+12 -7
View File
@@ -6,8 +6,9 @@ var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]',
["minversion", ""], ["minversion", ""],
["quiet", "modules"], ["quiet", "modules"],
["radius", "%"], ["radius", "%"],
["fontsize", "%"], ["msize", "%"],
["imagesize", "%"] ["mposx", "%"],
["mposy", "%"]
], ],
updateGui = function () { updateGui = function () {
@@ -27,8 +28,10 @@ var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]',
render: $("#render").val(), render: $("#render").val(),
ecLevel: $("#eclevel").val(), ecLevel: $("#eclevel").val(),
minVersion: parseInt($("#minversion").val(), 10), minVersion: parseInt($("#minversion").val(), 10),
color: $("#color").val(),
bgColor: $("#bg-color").val(), fill: $("#fill").val(),
background: $("#background").val(),
text: $("#text").val(), text: $("#text").val(),
size: parseInt($("#size").val(), 10), size: parseInt($("#size").val(), 10),
radius: parseInt($("#radius").val(), 10) * 0.01, radius: parseInt($("#radius").val(), 10) * 0.01,
@@ -36,13 +39,15 @@ var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]',
mode: parseInt($("#mode").val(), 10), mode: parseInt($("#mode").val(), 10),
mSize: parseInt($("#msize").val(), 10) * 0.01,
mPosX: parseInt($("#mposx").val(), 10) * 0.01,
mPosY: parseInt($("#mposy").val(), 10) * 0.01,
label: $("#label").val(), label: $("#label").val(),
labelsize: parseInt($("#fontsize").val(), 10) * 0.01,
fontname: $("#font").val(), fontname: $("#font").val(),
fontcolor: $("#fontcolor").val(), fontcolor: $("#fontcolor").val(),
image: $("#img-buffer")[0], image: $("#img-buffer")[0]
imagesize: parseInt($("#imagesize").val(), 10) * 0.01
}; };
$("#container").empty().qrcode(options); $("#container").empty().qrcode(options);
src/jquery.qrcode.js
+32 -22
View File
@@ -79,16 +79,17 @@
drawBackgroundLabel = function (qr, context, settings) { drawBackgroundLabel = function (qr, context, settings) {
var font = "bold " + (settings.labelsize * settings.size) + "px " + settings.fontname, var size = settings.size,
font = "bold " + (settings.mSize * size) + "px " + settings.fontname,
ctx = $('<canvas/>')[0].getContext("2d"); ctx = $('<canvas/>')[0].getContext("2d");
ctx.font = font; ctx.font = font;
var w = ctx.measureText(settings.label).width, var w = ctx.measureText(settings.label).width,
sh = settings.labelsize, sh = settings.mSize,
sw = w / settings.size, sw = w / size,
sl = (1 - sw)/2, sl = (1 - sw) * settings.mPosX,
st = (1 - sh)/2, st = (1 - sh) * settings.mPosY,
sr = sl + sw, sr = sl + sw,
sb = st + sh, sb = st + sh,
pad = 0.01; pad = 0.01;
@@ -102,9 +103,8 @@
} }
context.fillStyle = settings.fontcolor; context.fillStyle = settings.fontcolor;
context.textAlign = "center";
context.font = font; context.font = font;
context.fillText($("#label").val(), 0.5 * settings.size, 0.5 * settings.size + 0.3 * settings.labelsize * settings.size); context.fillText($("#label").val(), sl*size, st*size + 0.75 * settings.mSize * size);
}, },
drawBackgroundImage = function (qr, context, settings) { drawBackgroundImage = function (qr, context, settings) {
@@ -112,10 +112,10 @@
var size = settings.size, var size = settings.size,
w = settings.image.naturalWidth || 1, w = settings.image.naturalWidth || 1,
h = settings.image.naturalHeight || 1, h = settings.image.naturalHeight || 1,
sh = settings.imagesize, sh = settings.mSize,
sw = sh * w / h, sw = sh * w / h,
sl = (1 - sw)/2, sl = (1 - sw) * settings.mPosX,
st = (1 - sh)/2, st = (1 - sh) * settings.mPosY,
sr = sl + sw, sr = sl + sw,
sb = st + sh, sb = st + sh,
pad = 0.01; pad = 0.01;
@@ -133,8 +133,10 @@
drawBackground = function (qr, context, settings) { drawBackground = function (qr, context, settings) {
if (settings.bgColor) { if ($(settings.background).is('img')) {
context.fillStyle = settings.bgColor; context.drawImage(settings.background, 0, 0, settings.size, settings.size);
} else if (settings.background) {
context.fillStyle = settings.background;
context.fillRect(settings.left, settings.top, settings.size, settings.size); context.fillRect(settings.left, settings.top, settings.size, settings.size);
} }
@@ -270,8 +272,14 @@
fn(qr, context, settings, l, t, w, row, col); fn(qr, context, settings, l, t, w, row, col);
} }
} }
context.fillStyle = settings.color; if ($(settings.fill).is('img')) {
context.clip();
context.drawImage(settings.fill, 0, 0, settings.size, settings.size);
context.restore();
} else {
context.fillStyle = settings.fill;
context.fill(); context.fill();
}
}, },
// Draws QR code to the given `canvas` and returns it. // Draws QR code to the given `canvas` and returns it.
@@ -314,7 +322,7 @@
// some shortcuts to improve compression // some shortcuts to improve compression
var settings_size = settings.size, var settings_size = settings.size,
settings_bgColor = settings.bgColor, settings_bgColor = settings.background,
math_floor = Math.floor, math_floor = Math.floor,
moduleCount = qr.moduleCount, moduleCount = qr.moduleCount,
@@ -338,7 +346,7 @@
margin: 0, margin: 0,
width: moduleSize, width: moduleSize,
height: moduleSize, height: moduleSize,
'background-color': settings.color 'background-color': settings.fill
}, },
$div = $('<div/>').data('qrcode', qr).css(containerCSS); $div = $('<div/>').data('qrcode', qr).css(containerCSS);
@@ -399,11 +407,11 @@
// size in pixel // size in pixel
size: 200, size: 200,
// code color // code color or image element
color: '#000', fill: '#000',
// background color, `null` for transparent background // background color or image element, `null` for transparent background
bgColor: null, background: null,
// content // content
text: 'no text', text: 'no text',
@@ -422,13 +430,15 @@
// 4: image box // 4: image box
mode: 0, mode: 0,
mSize: 0.1,
mPosX: 0.5,
mPosY: 0.5,
label: 'no label', label: 'no label',
labelsize: 0.1,
fontname: 'sans', fontname: 'sans',
fontcolor: '#000', fontcolor: '#000',
image: null, image: null
imagesize: 0.1
}; };
// Register the plugin // Register the plugin