@ -95,13 +95,13 @@ namespace app {
drawCanvas ( qr , scale , border , canvas ) ;
drawCanvas ( qr , scale , border , canvas ) ;
canvas . style . removeProperty ( "display" ) ;
canvas . style . removeProperty ( "display" ) ;
} else {
} else {
const code : string = qr. toSvgString( border ) ;
const code : string = toSvgString( qr , border ) ;
const viewBox : string = ( / viewBox="([^"]*)"/ . exec ( code ) as RegExpExecArray ) [ 1 ] ;
const viewBox : string = ( / viewBox="([^"]*)"/ . exec ( code ) as RegExpExecArray ) [ 1 ] ;
const pathD : string = ( / d="([^"]*)"/ . exec ( code ) as RegExpExecArray ) [ 1 ] ;
const pathD : string = ( / d="([^"]*)"/ . exec ( code ) as RegExpExecArray ) [ 1 ] ;
svg . setAttribute ( "viewBox" , viewBox ) ;
svg . setAttribute ( "viewBox" , viewBox ) ;
( svg . querySelector ( "path" ) as Element ) . setAttribute ( "d" , pathD ) ;
( svg . querySelector ( "path" ) as Element ) . setAttribute ( "d" , pathD ) ;
svg . style . removeProperty ( "display" ) ;
svg . style . removeProperty ( "display" ) ;
svgXml . value = qr. toSvgString ( border ) ;
svgXml . value = code ;
}
}
// Returns a string to describe the given list of segments.
// Returns a string to describe the given list of segments.
@ -168,6 +168,28 @@ namespace app {
}
}
// Returns a string of SVG code for an image depicting the given QR Code, with the given number
// of border modules. The string always uses Unix newlines (\n), regardless of the platform.
function toSvgString ( qr : qrcodegen.QrCode , border : number ) : string {
if ( border < 0 )
throw "Border must be non-negative" ;
let parts : Array < string > = [ ] ;
for ( let y = 0 ; y < qr . size ; y ++ ) {
for ( let x = 0 ; x < qr . size ; x ++ ) {
if ( qr . getModule ( x , y ) )
parts . push ( ` M ${ x + border } , ${ y + border } h1v1h-1z ` ) ;
}
}
return ` <?xml version="1.0" encoding="UTF-8"?>
< ! DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
< svg xmlns = "http://www.w3.org/2000/svg" version = "1.1" viewBox = "0 0 ${qr.size + border * 2} ${qr.size + border * 2}" stroke = "none" >
< rect width = "100%" height = "100%" fill = "#FFFFFF" / >
< path d = "${parts.join(" " ) } " fill = "#000000" / >
< / svg >
`
}
export function handleVersionMinMax ( which : "min" | "max" ) : void {
export function handleVersionMinMax ( which : "min" | "max" ) : void {
const minElem : HTMLInputElement = getInput ( "version-min-input" ) ;
const minElem : HTMLInputElement = getInput ( "version-min-input" ) ;
const maxElem : HTMLInputElement = getInput ( "version-max-input" ) ;
const maxElem : HTMLInputElement = getInput ( "version-max-input" ) ;