Skip to content

feat: add change scale qrcode #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Gradesor wants to merge 2 commits into
base: master
Choose a base branch
from
Open

feat: add change scale qrcode #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
90f9c35
feat: add change scale qrcode
Gradesor Apr 20, 2022
b4ea565
fix: change version
Gradesor Apr 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions dist/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export interface IProps {
qrStyle?: 'squares' | 'dots';
style?: object;
id?: string;
scale?: number;
}
export declare class QRCode extends React.Component<IProps, {}> {
private canvas;
Expand Down
96 changes: 54 additions & 42 deletions dist/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,21 +26,21 @@ var QRCode = /** @class */ (function (_super) {
return _this;
}
QRCode.utf16to8 = function (str) {
var out = '', i, c;
var out = "", i, c;
var len = str.length;
for (i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
if (c >= 0x0001 && c <= 0x007f) {
out += str.charAt(i);
}
else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
else if (c > 0x07ff) {
out += String.fromCharCode(0xe0 | ((c >> 12) & 0x0f));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3f));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3f));
}
else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
out += String.fromCharCode(0xc0 | ((c >> 6) & 0x1f));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3f));
}
}
return out;
Expand All @@ -60,7 +60,7 @@ var QRCode = /** @class */ (function (_super) {
// Radius should not be greater than half the size or less than zero
radii = radii.map(function (r) {
r = Math.min(r, size / 2);
return (r < 0) ? 0 : r;
return r < 0 ? 0 : r;
});
var rTopLeft = radii[0] || 0;
var rTopRight = radii[1] || 0;
Expand Down Expand Up @@ -94,16 +94,16 @@ var QRCode = /** @class */ (function (_super) {
var lineWidth = Math.ceil(cellSize);
var radiiOuter;
var radiiInner;
if (typeof radii !== 'number' && !Array.isArray(radii)) {
if (typeof radii !== "number" && !Array.isArray(radii)) {
radiiOuter = radii.outer || 0;
radiiInner = radii.inner || 0;
}
else {
radiiOuter = radii;
radiiInner = radiiOuter;
}
var y = (row * cellSize) + offset;
var x = (col * cellSize) + offset;
var y = row * cellSize + offset;
var x = col * cellSize + offset;
var size = cellSize * 7;
// Outer box
this.drawRoundedSquare(lineWidth, x, y, size, radiiOuter, false, ctx);
Expand All @@ -113,13 +113,16 @@ var QRCode = /** @class */ (function (_super) {
x += cellSize * 2;
this.drawRoundedSquare(lineWidth, x, y, size, radiiInner, true, ctx);
};
;
/**
* Is this dot inside a positional pattern zone.
*/
QRCode.prototype.isInPositioninZone = function (col, row, zones) {
return zones.some(function (zone) { return (row >= zone.row && row <= zone.row + 7 &&
col >= zone.col && col <= zone.col + 7); });
return zones.some(function (zone) {
return row >= zone.row &&
row <= zone.row + 7 &&
col >= zone.col &&
col <= zone.col + 7;
});
};
QRCode.prototype.transformPixelLengthIntoNumberOfCells = function (pixelLength, cellSize) {
return pixelLength / cellSize;
Expand All @@ -131,8 +134,10 @@ var QRCode = /** @class */ (function (_super) {
var firstColumnOfLogo = this.transformPixelLengthIntoNumberOfCells(dyLogo, cellSize);
var logoWidthInCells = this.transformPixelLengthIntoNumberOfCells(dWidthLogo, cellSize) - 1;
var logoHeightInCells = this.transformPixelLengthIntoNumberOfCells(dHeightLogo, cellSize) - 1;
return row >= firstRowOfLogo - numberOfCellsMargin && row <= firstRowOfLogo + logoWidthInCells + numberOfCellsMargin // check rows
&& col >= firstColumnOfLogo - numberOfCellsMargin && col <= firstColumnOfLogo + logoHeightInCells + numberOfCellsMargin; // check cols
return (row >= firstRowOfLogo - numberOfCellsMargin &&
row <= firstRowOfLogo + logoWidthInCells + numberOfCellsMargin && // check rows
col >= firstColumnOfLogo - numberOfCellsMargin &&
col <= firstColumnOfLogo + logoHeightInCells + numberOfCellsMargin); // check cols
}
else {
return false;
Expand All @@ -148,37 +153,40 @@ var QRCode = /** @class */ (function (_super) {
this.update();
};
QRCode.prototype.update = function () {
var _a = this.props, value = _a.value, ecLevel = _a.ecLevel, enableCORS = _a.enableCORS, size = _a.size, quietZone = _a.quietZone, bgColor = _a.bgColor, fgColor = _a.fgColor, logoImage = _a.logoImage, logoWidth = _a.logoWidth, logoHeight = _a.logoHeight, logoOpacity = _a.logoOpacity, removeQrCodeBehindLogo = _a.removeQrCodeBehindLogo, qrStyle = _a.qrStyle, eyeRadius = _a.eyeRadius;
var _a = this.props, value = _a.value, ecLevel = _a.ecLevel, enableCORS = _a.enableCORS, size = _a.size, quietZone = _a.quietZone, bgColor = _a.bgColor, fgColor = _a.fgColor, logoImage = _a.logoImage, logoWidth = _a.logoWidth, logoHeight = _a.logoHeight, logoOpacity = _a.logoOpacity, removeQrCodeBehindLogo = _a.removeQrCodeBehindLogo, qrStyle = _a.qrStyle, eyeRadius = _a.eyeRadius, scale = _a.scale;
var qrCode = qrGenerator(0, ecLevel);
qrCode.addData(QRCode.utf16to8(value));
qrCode.make();
var canvas = ReactDOM.findDOMNode(this.canvas.current);
var ctx = canvas.getContext('2d');
var canvasSize = +size + (2 * +quietZone);
var ctx = canvas.getContext("2d");
var canvasSize = +size + 2 * +quietZone;
var length = qrCode.getModuleCount();
var cellSize = size / length;
var scale = (window.devicePixelRatio || 1);
canvas.height = canvas.width = canvasSize * scale;
ctx.scale(scale, scale);
var canvasScale = scale || window.devicePixelRatio || 1;
canvas.height = canvas.width = canvasSize * canvasScale;
ctx.scale(canvasScale, canvasScale);
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, canvasSize, canvasSize);
var offset = +quietZone;
var dWidthLogo = logoWidth || size * 0.2;
var dHeightLogo = logoHeight || dWidthLogo;
var dxLogo = ((size - dWidthLogo) / 2);
var dyLogo = ((size - dHeightLogo) / 2);
var dxLogo = (size - dWidthLogo) / 2;
var dyLogo = (size - dHeightLogo) / 2;
var positioningZones = [
{ row: 0, col: 0 },
{ row: 0, col: length - 7 },
{ row: length - 7, col: 0 },
];
ctx.strokeStyle = fgColor;
if (qrStyle === 'dots') {
if (qrStyle === "dots") {
ctx.fillStyle = fgColor;
var radius = cellSize / 2;
for (var row = 0; row < length; row++) {
for (var col = 0; col < length; col++) {
if (qrCode.isDark(row, col) && !this.isInPositioninZone(row, col, positioningZones) && !(removeQrCodeBehindLogo && this.isCoordinateInImage(row, col, dWidthLogo, dHeightLogo, dxLogo, dyLogo, cellSize, logoImage))) {
if (qrCode.isDark(row, col) &&
!this.isInPositioninZone(row, col, positioningZones) &&
!(removeQrCodeBehindLogo &&
this.isCoordinateInImage(row, col, dWidthLogo, dHeightLogo, dxLogo, dyLogo, cellSize, logoImage))) {
ctx.beginPath();
ctx.arc(Math.round(col * cellSize) + radius + offset, Math.round(row * cellSize) + radius + offset, (radius / 100) * 75, 0, 2 * Math.PI, false);
ctx.closePath();
Expand All @@ -190,10 +198,13 @@ var QRCode = /** @class */ (function (_super) {
else {
for (var row = 0; row < length; row++) {
for (var col = 0; col < length; col++) {
if (qrCode.isDark(row, col) && !this.isInPositioninZone(row, col, positioningZones) && !(removeQrCodeBehindLogo && this.isCoordinateInImage(row, col, dWidthLogo, dHeightLogo, dxLogo, dyLogo, cellSize, logoImage))) {
if (qrCode.isDark(row, col) &&
!this.isInPositioninZone(row, col, positioningZones) &&
!(removeQrCodeBehindLogo &&
this.isCoordinateInImage(row, col, dWidthLogo, dHeightLogo, dxLogo, dyLogo, cellSize, logoImage))) {
ctx.fillStyle = fgColor;
var w = (Math.ceil((col + 1) * cellSize) - Math.floor(col * cellSize));
var h = (Math.ceil((row + 1) * cellSize) - Math.floor(row * cellSize));
var w = Math.ceil((col + 1) * cellSize) - Math.floor(col * cellSize);
var h = Math.ceil((row + 1) * cellSize) - Math.floor(row * cellSize);
ctx.fillRect(Math.round(col * cellSize) + offset, Math.round(row * cellSize) + offset, w, h);
}
}
Expand All @@ -206,15 +217,15 @@ var QRCode = /** @class */ (function (_super) {
if (Array.isArray(radii)) {
radii = radii[i];
}
if (typeof radii == 'number') {
if (typeof radii == "number") {
radii = [radii, radii, radii, radii];
}
this.drawPositioningPattern(ctx, cellSize, offset, row, col, radii);
}
if (logoImage) {
var image_1 = new Image();
if (enableCORS) {
image_1.crossOrigin = 'Anonymous';
image_1.crossOrigin = "Anonymous";
}
image_1.onload = function () {
ctx.save();
Expand All @@ -227,27 +238,28 @@ var QRCode = /** @class */ (function (_super) {
};
QRCode.prototype.render = function () {
var _a;
var size = +this.props.size + (2 * +this.props.quietZone);
return React.createElement('canvas', {
id: (_a = this.props.id) !== null && _a !== void 0 ? _a : 'react-qrcode-logo',
var size = +this.props.size + 2 * +this.props.quietZone;
return React.createElement("canvas", {
id: (_a = this.props.id) !== null && _a !== void 0 ? _a : "react-qrcode-logo",
height: size,
width: size,
style: { height: size + 'px', width: size + 'px' },
ref: this.canvas
style: { height: size + "px", width: size + "px" },
ref: this.canvas,
});
};
QRCode.defaultProps = {
value: 'https://reactjs.org/',
ecLevel: 'M',
value: "https://reactjs.org/",
ecLevel: "M",
enableCORS: false,
size: 150,
quietZone: 10,
bgColor: '#FFFFFF',
fgColor: '#000000',
bgColor: "#FFFFFF",
fgColor: "#000000",
logoOpacity: 1,
removeQrCodeBehindLogo: false,
qrStyle: 'squares',
qrStyle: "squares",
eyeRadius: [],
scale: null,
};
return QRCode;
}(React.Component));
Expand Down
Loading