diff --git a/dist/widget-qrcode.min.js b/dist/widget-qrcode.min.js index 27e8e0a..e8e20d7 100644 --- a/dist/widget-qrcode.min.js +++ b/dist/widget-qrcode.min.js @@ -10,4 +10,4 @@ * * Created on: 2024-05-26 */ -!function(){"use strict";function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,o=new Array(t);r65536?(o[0]=240|(1835008&n)>>>18,o[1]=128|(258048&n)>>>12,o[2]=128|(4032&n)>>>6,o[3]=128|63&n):n>2048?(o[0]=224|(61440&n)>>>12,o[1]=128|(4032&n)>>>6,o[2]=128|63&n):n>128?(o[0]=192|(1984&n)>>>6,o[1]=128|63&n):o[0]=n,this.parsedData.push(o)}this.parsedData=Array.prototype.concat.apply([],this.parsedData),this.parsedData.length!=this.data.length&&(this.parsedData.unshift(191),this.parsedData.unshift(187),this.parsedData.unshift(239))}function b(){this.buffer=[],this.length=0}m.prototype={getLength:function(e){return this.parsedData.length},write:function(e){for(var t=0,r=this.parsedData.length;t>>7-e%8&1)},put:function(e,t){for(var r=0;r>>t-r-1&1))},getLengthInBits:function(){return this.length},putBit:function(e){var t=Math.floor(this.length/8);this.buffer.length<=t&&this.buffer.push(0),e&&(this.buffer[t]|=128>>>this.length%8),this.length++}};for(var P={glog:function(e){if(e<1)throw new Error("glog("+e+")");return P.LOG_TABLE[e]},gexp:function(e){for(;e<0;)e+=255;for(;e>=256;)e-=255;return P.EXP_TABLE[e]},EXP_TABLE:new Array(256),LOG_TABLE:new Array(256)},I=0;I<8;I++)P.EXP_TABLE[I]=1<=0;)t^=D.G15<=0;)t^=D.G18<>>=1;return t},getPatternPosition:function(e){return D.PATTERN_POSITION_TABLE[e-1]},getMask:function(e,t,r){switch(e){case C:return(t+r)%2==0;case T:return t%2==0;case R:return r%3==0;case S:return(t+r)%3==0;case M:return(Math.floor(t/2)+Math.floor(r/3))%2==0;case B:return t*r%2+t*r%3==0;case A:return(t*r%2+t*r%3)%2==0;case L:return(t*r%3+(t+r)%2)%2==0;default:throw new Error("bad maskPattern:"+e)}},getErrorCorrectPolynomial:function(e){for(var t=new k([1],0),r=0;r5&&(r+=3+a-5)}for(var g=0;gf.length)throw new Error("Too long data");return r}function _(e,t,r){return{imageReady:function(e){var t={},r=Object.entries(e).map((function(e){return new Promise((function(r){var o=new Image;o.src=e[1],o.onload=function(){t[e[0]]=o,r()}}))}));return r.length?Promise.all(r).then((function(){return t})):Promise.resolve({})},getValue:function(e,r){var o;return null==t||null===(o=t[e])||void 0===o?void 0:o[r]},isPositionPoint:function(e,r){if(!t)return!1;var o=t.length,n=0;return e>=2&&e<5&&r>=2&&r<5?n=1:e<7&&r<7?n=2:e>=o-5&&e=2&r<5?n=1:e>=o-7&&e=0&r<7?n=2:e>=2&&e<5&&r>=o-5&r=0&&e<7&&r>=o-7&r=a||l>=a||(t[i][l]=2)},getForegroundImageBrush:function(t){var r;if(t.width>e.canvas.width||t.height>e.canvas.height){var o=document.createElement("canvas"),n=o.getContext("2d");t.width>e.canvas.width?(o.width=e.canvas.width,o.height=t.height/t.width*e.canvas.width):(o.width=t.width/t.height*e.canvas.height,o.height=e.canvas.height),n.drawImage(t,0,0,o.width,o.height),r=e.createPattern(o,"repeat")}else r=e.createPattern(t,"repeat");return r},drawRightAngle:function(t,r,o,n){var a,i;switch(o){case 0:a=t*n,i=r*n,e.lineTo(a,i);break;case 1:a=t*n+n,i=r*n,e.lineTo(a,i);break;case 2:a=t*n+n,i=r*n+n,e.lineTo(a,i);break;case 3:a=t*n,i=r*n+n,e.lineTo(a,i)}},drawRoundBrick:function(t,r,o,n){var a,i,l=n/2;switch(o){case 0:a=t*n+l,i=r*n+l,e.arc(a,i,l,Math.PI,1.5*Math.PI,!1);break;case 1:a=t*n+n-l,i=r*n+l,e.arc(a,i,l,1.5*Math.PI,2*Math.PI,!1);break;case 2:a=t*n+n-l,i=r*n+n-l,e.arc(a,i,l,0,Math.PI/2,!1);break;case 3:a=t*n+l,i=r*n+n-l,e.arc(a,i,l,Math.PI/2,Math.PI,!1)}},fillRound:function(t,r,o,n){var a,i,l=n/2;switch(e.beginPath(),o){case 0:a=t*n+l,i=r*n+l,e.arc(a,i,l,Math.PI,1.5*Math.PI,!1),a=t*n,i=r*n;break;case 1:a=t*n+n-l,i=r*n+l,e.arc(a,i,l,1.5*Math.PI,2*Math.PI,!1),a=t*n+n,i=r*n;break;case 2:a=t*n+n-l,i=r*n+n-l,e.arc(a,i,l,0,Math.PI/2,!1),a=t*n+n,i=r*n+n;break;case 3:a=t*n+l,i=r*n+n-l,e.arc(a,i,l,Math.PI/2,Math.PI,!1),a=t*n,i=r*n+n}e.lineTo(a,i),e.closePath(),e.fill(),e.stroke()}}}E.prototype={addData:function(e){var t=new m(e);this.dataList.push(t),this.dataCache=null},isDark:function(e,t){if(e<0||this.moduleCount<=e||t<0||this.moduleCount<=t)throw new Error(e+","+t);return this.modules[e][t]},getModuleCount:function(){return this.moduleCount},make:function(){this.makeImpl(!1,this.getBestMaskPattern())},makeImpl:function(e,t){this.moduleCount=4*this.typeNumber+17,this.modules=new Array(this.moduleCount);for(var r=0;r=7&&this.setupTypeNumber(e),null==this.dataCache&&(this.dataCache=E.createData(this.typeNumber,this.errorCorrectLevel,this.dataList)),this.mapData(this.dataCache,t)},setupPositionProbePattern:function(e,t){for(var r=-1;r<=7;r++)if(!(e+r<=-1||this.moduleCount<=e+r))for(var o=-1;o<=7;o++)t+o<=-1||this.moduleCount<=t+o||(this.modules[e+r][t+o]=0<=r&&r<=6&&(0==o||6==o)||0<=o&&o<=6&&(0==r||6==r)||2<=r&&r<=4&&2<=o&&o<=4)},getBestMaskPattern:function(){for(var e=0,t=0,r=0;r<8;r++){this.makeImpl(!0,r);var o=D.getLostPoint(this);(0==r||e>o)&&(e=o,t=r)}return t},createMovieClip:function(e,t,r){var o=e.createEmptyMovieClip(t,r);this.make();for(var n=0;n>r&1);this.modules[Math.floor(r/3)][r%3+this.moduleCount-8-3]=o}for(var n=0;n<18;n++){var a=!e&&1==(t>>n&1);this.modules[n%3+this.moduleCount-8-3][Math.floor(n/3)]=a}},setupTypeInfo:function(e,t){for(var r=this.errorCorrectLevel<<3|t,o=D.getBCHTypeInfo(r),n=0;n<15;n++){var a=!e&&1==(o>>n&1);n<6?this.modules[n][8]=a:n<8?this.modules[n+1][8]=a:this.modules[this.moduleCount-15+n][8]=a}for(var i=0;i<15;i++){var l=!e&&1==(o>>i&1);i<8?this.modules[8][this.moduleCount-i-1]=l:i<9?this.modules[8][15-i-1+1]=l:this.modules[8][15-i-1]=l}this.modules[this.moduleCount-8][8]=!e},mapData:function(e,t){for(var r=-1,o=this.moduleCount-1,n=7,a=0,i=this.moduleCount-1;i>0;i-=2)for(6==i&&i--;;){for(var l=0;l<2;l++)if(null==this.modules[o][i-l]){var u=!1;a>>n&1)),D.getMask(t,o,i-l)&&(u=!u),this.modules[o][i-l]=u,-1==--n&&(a++,n=7)}if((o+=r)<0||this.moduleCount<=o){o-=r,r=-r;break}}}},E.PAD0=236,E.PAD1=17,E.createData=function(e,t,r){for(var o=w.getRSBlocks(e,t),n=new b,a=0;a8*l)throw new Error("code length overflow. ("+n.getLengthInBits()+">"+8*l+")");for(n.getLengthInBits()+4<=8*l&&n.put(0,4);n.getLengthInBits()%8!=0;)n.putBit(!1);for(;!(n.getLengthInBits()>=8*l||(n.put(E.PAD0,8),n.getLengthInBits()>=8*l));)n.put(E.PAD1,8);return E.createBytes(n,o)},E.createBytes=function(e,t){for(var r=0,o=0,n=0,a=new Array(t.length),i=new Array(t.length),l=0;l=0?c.get(d):0}}for(var v=0,m=0;m1){var f=e.createLinearGradient(0,0,e.canvas.width,e.canvas.height),c=g.length-1;g.forEach((function(e,t){f.addColorStop(t/c,e)})),s=f}var h=r.innerColor||s,d=r.outerColor||s;e.save(),!r.backgroundColor&&t.backgroundImage?e.drawImage(t.backgroundImage,0,0,e.canvas.width,e.canvas.height):(e.fillStyle=n,e.fillRect(0,0,e.canvas.width,e.canvas.height)),e.restore(),e.save(),e.translate(i,l);for(var v=0;v1){var f=e.createLinearGradient(0,0,e.canvas.width,e.canvas.height),c=g.length-1;g.forEach((function(e,t){f.addColorStop(t/c,e)})),s=f}var h=r.innerColor||s,d=r.outerColor||s;e.save(),!r.backgroundColor&&t.backgroundImage?e.drawImage(t.backgroundImage,0,0,e.canvas.width,e.canvas.height):(e.fillStyle=n,e.fillRect(0,0,e.canvas.width,e.canvas.height)),e.restore(),e.save(),e.translate(i,l);for(var v=0;v1){var f=e.createLinearGradient(0,0,e.canvas.width,e.canvas.height),c=g.length-1;g.forEach((function(e,t){f.addColorStop(t/c,e)})),s=f}var h=r.innerColor||s,d=r.outerColor||s;e.save(),!r.backgroundColor&&t.backgroundImage?e.drawImage(t.backgroundImage,0,0,e.canvas.width,e.canvas.height):(e.fillStyle=n,e.fillRect(0,0,e.canvas.width,e.canvas.height)),e.restore(),e.save(),e.translate(i+a/2,l+a/2);for(var v=0;v1){var s=e.createLinearGradient(0,0,e.canvas.width,e.canvas.height),f=g.length-1;g.forEach((function(e,t){s.addColorStop(t/f,e)})),s}r.innerColor,r.outerColor,e.save(),t.backgroundImage?e.drawImage(t.backgroundImage,0,0,e.canvas.width,e.canvas.height):(e.fillStyle=n,e.fillRect(0,0,e.canvas.width,e.canvas.height)),e.restore(),e.save(),e.translate(i,l);for(var c=0;c\n \n \n ',t.$module=t.shadowRoot.querySelector(".mod-qrcode"),t.$canvas=t.$module.querySelector("canvas"),t.context=t.$canvas.getContext("2d"),t.resize(),"undefined"!=typeof ResizeObserver&&new ResizeObserver((function(){t.resize()})).observe(t)}},{key:"resize",value:function(){var e=this,t=window.getComputedStyle(e);if(t.width&&t.height){var r=Math.max(parseInt(t.width),parseInt(t.height));e.$canvas.width=2*r,e.$canvas.height=2*r,e.drawQRCode()}}},{key:"drawQRCode",value:function(){var e=this,t=e.level;e.logo?(t="H",e.$module.querySelector(".logo").style="background: url(".concat(e.logo,") center center/ 25% 25% no-repeat;")):e.$module.querySelector(".logo").style="";var r=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"https://passer-by.com/",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"H",r=new E(V(e,s[t]),s[t]);return r.addData(e),r.make(),r.modules}(e.value,t);e.context.clearRect(0,0,e.$canvas.width,e.$canvas.height),(O[e.template]||O.default)(e.context,r,{foregroundImage:e.foregroundImage,backgroundImage:e.backgroundImage,foregroundColor:e.foregroundColor,backgroundColor:e.backgroundColor,innerColor:e.innerColor,outerColor:e.outerColor})}}],i=[{key:"observedAttributes",get:function(){return["value","template","level","width","height","logo","foreground-image","background-image","foreground-color","background-color","inner-color","outer-color"]}}],o&&n(r.prototype,o),i&&n(r,i),Object.defineProperty(r,"prototype",{writable:!1}),u}(g(HTMLElement));customElements.get("widget-qrcode")||customElements.define("widget-qrcode",j)}(); +!function(){"use strict";function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,o=new Array(t);r65536?(o[0]=240|(1835008&n)>>>18,o[1]=128|(258048&n)>>>12,o[2]=128|(4032&n)>>>6,o[3]=128|63&n):n>2048?(o[0]=224|(61440&n)>>>12,o[1]=128|(4032&n)>>>6,o[2]=128|63&n):n>128?(o[0]=192|(1984&n)>>>6,o[1]=128|63&n):o[0]=n,this.parsedData.push(o)}this.parsedData=Array.prototype.concat.apply([],this.parsedData),this.parsedData.length!=this.data.length&&(this.parsedData.unshift(191),this.parsedData.unshift(187),this.parsedData.unshift(239))}function b(){this.buffer=[],this.length=0}m.prototype={getLength:function(e){return this.parsedData.length},write:function(e){for(var t=0,r=this.parsedData.length;t>>7-e%8&1)},put:function(e,t){for(var r=0;r>>t-r-1&1))},getLengthInBits:function(){return this.length},putBit:function(e){var t=Math.floor(this.length/8);this.buffer.length<=t&&this.buffer.push(0),e&&(this.buffer[t]|=128>>>this.length%8),this.length++}};for(var P={glog:function(e){if(e<1)throw new Error("glog("+e+")");return P.LOG_TABLE[e]},gexp:function(e){for(;e<0;)e+=255;for(;e>=256;)e-=255;return P.EXP_TABLE[e]},EXP_TABLE:new Array(256),LOG_TABLE:new Array(256)},y=0;y<8;y++)P.EXP_TABLE[y]=1<=0;)t^=L.G15<=0;)t^=L.G18<>>=1;return t},getPatternPosition:function(e){return L.PATTERN_POSITION_TABLE[e-1]},getMask:function(e,t,r){switch(e){case C:return(t+r)%2==0;case T:return t%2==0;case R:return r%3==0;case S:return(t+r)%3==0;case M:return(Math.floor(t/2)+Math.floor(r/3))%2==0;case B:return t*r%2+t*r%3==0;case A:return(t*r%2+t*r%3)%2==0;case D:return(t*r%3+(t+r)%2)%2==0;default:throw new Error("bad maskPattern:"+e)}},getErrorCorrectPolynomial:function(e){for(var t=new w([1],0),r=0;r5&&(r+=3+a-5)}for(var g=0;gf.length)throw new Error("Too long data");return r}function _(e,t,r){return{imageReady:function(e){var t={},r=Object.entries(e).map((function(e){return new Promise((function(r){var o=new Image;o.src=e[1],o.onload=function(){t[e[0]]=o,r()}}))}));return r.length?Promise.all(r).then((function(){return t})):Promise.resolve({})},getValue:function(e,r){var o;return null==t||null===(o=t[e])||void 0===o?void 0:o[r]},isPositionPoint:function(e,r){if(!t)return!1;var o=t.length,n=0;return e>=2&&e<5&&r>=2&&r<5?n=1:e<7&&r<7?n=2:e>=o-5&&e=2&r<5?n=1:e>=o-7&&e=0&r<7?n=2:e>=2&&e<5&&r>=o-5&r=0&&e<7&&r>=o-7&r=a||l>=a||(t[i][l]=2)},getImageBrush:function(t){var r;if(t.width>e.canvas.width||t.height>e.canvas.height){var o=document.createElement("canvas"),n=o.getContext("2d");t.width>e.canvas.width&&t.height>e.canvas.height?t.width/t.heighte.canvas.width?(o.width=e.canvas.width,o.height=t.height/t.width*e.canvas.width):(o.width=t.width/t.height*e.canvas.height,o.height=e.canvas.height),n.drawImage(t,0,0,o.width,o.height),r=e.createPattern(o,"repeat")}else r=e.createPattern(t,"repeat");return r},drawRightAngle:function(t,r,o,n){var a,i;switch(o){case 0:a=t*n,i=r*n,e.lineTo(a,i);break;case 1:a=t*n+n,i=r*n,e.lineTo(a,i);break;case 2:a=t*n+n,i=r*n+n,e.lineTo(a,i);break;case 3:a=t*n,i=r*n+n,e.lineTo(a,i)}},drawRoundBrick:function(t,r,o,n){var a,i,l=n/2;switch(o){case 0:a=t*n+l,i=r*n+l,e.arc(a,i,l,Math.PI,1.5*Math.PI,!1);break;case 1:a=t*n+n-l,i=r*n+l,e.arc(a,i,l,1.5*Math.PI,2*Math.PI,!1);break;case 2:a=t*n+n-l,i=r*n+n-l,e.arc(a,i,l,0,Math.PI/2,!1);break;case 3:a=t*n+l,i=r*n+n-l,e.arc(a,i,l,Math.PI/2,Math.PI,!1)}},fillRound:function(t,r,o,n){var a,i,l=n/2;switch(e.beginPath(),o){case 0:a=t*n+l,i=r*n+l,e.arc(a,i,l,Math.PI,1.5*Math.PI,!1),a=t*n,i=r*n;break;case 1:a=t*n+n-l,i=r*n+l,e.arc(a,i,l,1.5*Math.PI,2*Math.PI,!1),a=t*n+n,i=r*n;break;case 2:a=t*n+n-l,i=r*n+n-l,e.arc(a,i,l,0,Math.PI/2,!1),a=t*n+n,i=r*n+n;break;case 3:a=t*n+l,i=r*n+n-l,e.arc(a,i,l,Math.PI/2,Math.PI,!1),a=t*n,i=r*n+n}e.lineTo(a,i),e.closePath(),e.fill(),e.stroke()}}}E.prototype={addData:function(e){var t=new m(e);this.dataList.push(t),this.dataCache=null},isDark:function(e,t){if(e<0||this.moduleCount<=e||t<0||this.moduleCount<=t)throw new Error(e+","+t);return this.modules[e][t]},getModuleCount:function(){return this.moduleCount},make:function(){this.makeImpl(!1,this.getBestMaskPattern())},makeImpl:function(e,t){this.moduleCount=4*this.typeNumber+17,this.modules=new Array(this.moduleCount);for(var r=0;r=7&&this.setupTypeNumber(e),null==this.dataCache&&(this.dataCache=E.createData(this.typeNumber,this.errorCorrectLevel,this.dataList)),this.mapData(this.dataCache,t)},setupPositionProbePattern:function(e,t){for(var r=-1;r<=7;r++)if(!(e+r<=-1||this.moduleCount<=e+r))for(var o=-1;o<=7;o++)t+o<=-1||this.moduleCount<=t+o||(this.modules[e+r][t+o]=0<=r&&r<=6&&(0==o||6==o)||0<=o&&o<=6&&(0==r||6==r)||2<=r&&r<=4&&2<=o&&o<=4)},getBestMaskPattern:function(){for(var e=0,t=0,r=0;r<8;r++){this.makeImpl(!0,r);var o=L.getLostPoint(this);(0==r||e>o)&&(e=o,t=r)}return t},createMovieClip:function(e,t,r){var o=e.createEmptyMovieClip(t,r);this.make();for(var n=0;n>r&1);this.modules[Math.floor(r/3)][r%3+this.moduleCount-8-3]=o}for(var n=0;n<18;n++){var a=!e&&1==(t>>n&1);this.modules[n%3+this.moduleCount-8-3][Math.floor(n/3)]=a}},setupTypeInfo:function(e,t){for(var r=this.errorCorrectLevel<<3|t,o=L.getBCHTypeInfo(r),n=0;n<15;n++){var a=!e&&1==(o>>n&1);n<6?this.modules[n][8]=a:n<8?this.modules[n+1][8]=a:this.modules[this.moduleCount-15+n][8]=a}for(var i=0;i<15;i++){var l=!e&&1==(o>>i&1);i<8?this.modules[8][this.moduleCount-i-1]=l:i<9?this.modules[8][15-i-1+1]=l:this.modules[8][15-i-1]=l}this.modules[this.moduleCount-8][8]=!e},mapData:function(e,t){for(var r=-1,o=this.moduleCount-1,n=7,a=0,i=this.moduleCount-1;i>0;i-=2)for(6==i&&i--;;){for(var l=0;l<2;l++)if(null==this.modules[o][i-l]){var u=!1;a>>n&1)),L.getMask(t,o,i-l)&&(u=!u),this.modules[o][i-l]=u,-1==--n&&(a++,n=7)}if((o+=r)<0||this.moduleCount<=o){o-=r,r=-r;break}}}},E.PAD0=236,E.PAD1=17,E.createData=function(e,t,r){for(var o=k.getRSBlocks(e,t),n=new b,a=0;a8*l)throw new Error("code length overflow. ("+n.getLengthInBits()+">"+8*l+")");for(n.getLengthInBits()+4<=8*l&&n.put(0,4);n.getLengthInBits()%8!=0;)n.putBit(!1);for(;!(n.getLengthInBits()>=8*l||(n.put(E.PAD0,8),n.getLengthInBits()>=8*l));)n.put(E.PAD1,8);return E.createBytes(n,o)},E.createBytes=function(e,t){for(var r=0,o=0,n=0,a=new Array(t.length),i=new Array(t.length),l=0;l=0?c.get(d):0}}for(var v=0,m=0;m1){var f=e.createLinearGradient(0,0,e.canvas.width,e.canvas.height),c=g.length-1;g.forEach((function(e,t){f.addColorStop(t/c,e)})),s=f}var h=r.innerColor||s,d=r.outerColor||s,v=n;!r.backgroundColor&&t.backgroundImage&&(v=e.drawImage(t.backgroundImage,0,0,e.canvas.width,e.canvas.height)),e.save(),e.fillStyle=v,e.fillRect(0,0,e.canvas.width,e.canvas.height),e.restore(),e.save(),e.translate(i,l);for(var m=0;m1){var f=e.createLinearGradient(0,0,e.canvas.width,e.canvas.height),c=g.length-1;g.forEach((function(e,t){f.addColorStop(t/c,e)})),s=f}var h=r.innerColor||s,d=r.outerColor||s,v=n;!r.backgroundColor&&t.backgroundImage&&(v=e.drawImage(t.backgroundImage,0,0,e.canvas.width,e.canvas.height)),e.save(),e.fillStyle=v,e.fillRect(0,0,e.canvas.width,e.canvas.height),e.restore(),e.save(),e.translate(i,l);for(var m=0;m1){var f=e.createLinearGradient(0,0,e.canvas.width,e.canvas.height),c=g.length-1;g.forEach((function(e,t){f.addColorStop(t/c,e)})),s=f}var h=r.innerColor||s,d=r.outerColor||s,v=n;!r.backgroundColor&&t.backgroundImage&&(v=e.drawImage(t.backgroundImage,0,0,e.canvas.width,e.canvas.height)),e.save(),e.fillStyle=v,e.fillRect(0,0,e.canvas.width,e.canvas.height),e.restore(),e.save(),e.translate(i+a/2,l+a/2);for(var m=0;m1){var c=e.createLinearGradient(0,0,e.canvas.width,e.canvas.height),h=s.length-1;s.forEach((function(e,t){c.addColorStop(t/h,e)})),f=c}var d=r.innerColor||g,v=r.outerColor||g;t.backgroundImage&&(g=g.replace(/#([0-9a-fA-F]{6}).*/,"#$188"),n=n.replace(/#([0-9a-fA-F]{6}).*/,"#$188"),d=d.replace(/#([0-9a-fA-F]{6}).*/,"#$188"),v=v.replace(/#([0-9a-fA-F]{6}).*/,"#$188"));var m=d||f,b=v||f,P=t.backgroundImage?u.getImageBrush(t.backgroundImage):n;e.save(),e.fillStyle=P,e.fillRect(0,0,e.canvas.width,e.canvas.height),e.restore(),e.save(),e.translate(i,l);for(var y=0;y\n \n \n ',t.$module=t.shadowRoot.querySelector(".mod-qrcode"),t.$canvas=t.$module.querySelector("canvas"),t.context=t.$canvas.getContext("2d"),t.resize(),"undefined"!=typeof ResizeObserver&&new ResizeObserver((function(){t.resize()})).observe(t)}},{key:"resize",value:function(){var e=this,t=window.getComputedStyle(e);if(t.width&&t.height){var r=Math.max(parseInt(t.width),parseInt(t.height));e.$canvas.width=2*r,e.$canvas.height=2*r,e.drawQRCode()}}},{key:"drawQRCode",value:function(){var e=this,t=e.level;e.logo?(t="H",e.$module.querySelector(".logo").style="background: url(".concat(e.logo,") center center/ 25% 25% no-repeat;")):e.$module.querySelector(".logo").style="";var r=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"https://passer-by.com/",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"H",r=new E(V(e,s[t]),s[t]);return r.addData(e),r.make(),r.modules}(e.value,t);e.context.clearRect(0,0,e.$canvas.width,e.$canvas.height),(O[e.template]||O.default)(e.context,r,{foregroundImage:e.foregroundImage,backgroundImage:e.backgroundImage,foregroundColor:e.foregroundColor,backgroundColor:e.backgroundColor,innerColor:e.innerColor,outerColor:e.outerColor})}}],i=[{key:"observedAttributes",get:function(){return["value","template","level","width","height","logo","foreground-image","background-image","foreground-color","background-color","inner-color","outer-color"]}}],o&&n(r.prototype,o),i&&n(r,i),Object.defineProperty(r,"prototype",{writable:!1}),u}(g(HTMLElement));customElements.get("widget-qrcode")||customElements.define("widget-qrcode",j)}(); diff --git a/src/module/method/DrawUtil.js b/src/module/method/DrawUtil.js index 3632a04..dc22716 100644 --- a/src/module/method/DrawUtil.js +++ b/src/module/method/DrawUtil.js @@ -91,18 +91,28 @@ export default function(context,data,options) { } } }, - // 前景图片笔刷 - getForegroundImageBrush:function(image){ + // 图片笔刷 + getImageBrush:function(image,fill='default'){ let brush; if(image.width>context.canvas.width||image.height>context.canvas.height){ let $canvas = document.createElement('canvas'); let contextTemp = $canvas.getContext('2d'); - if(image.width>context.canvas.width){ - $canvas.width = context.canvas.width; - $canvas.height = image.height/image.width*context.canvas.width; + if(image.width>context.canvas.width&&image.height>context.canvas.height){ + if(image.width/image.heightcontext.canvas.width){ + $canvas.width = context.canvas.width; + $canvas.height = image.height/image.width*context.canvas.width; + }else{ + $canvas.width = image.width/image.height*context.canvas.height; + $canvas.height = context.canvas.height; + } } contextTemp.drawImage(image,0,0,$canvas.width,$canvas.height); brush = context.createPattern($canvas,'repeat'); diff --git a/src/module/template/bar.js b/src/module/template/bar.js index aea1c5a..f20c32d 100644 --- a/src/module/template/bar.js +++ b/src/module/template/bar.js @@ -18,19 +18,19 @@ export default function(context,data,options){ let backgroundColor = options.backgroundColor||'#ffffff'; let foregroundColor = options.foregroundColor||'#000000'; let colors = foregroundColor.split(','); - let color = colors[0]; + let foregroundImage = colors[0]; if(!options.foregroundColor&&resources.foregroundImage){ - color = api.getForegroundImageBrush(resources.foregroundImage); + foregroundImage = api.getImageBrush(resources.foregroundImage); } - let innerColor = options.innerColor||colors?.[1]||color; - let outerColor = options.outerColor||color; - context.save(); + let innerColor = options.innerColor||colors?.[1]||foregroundImage; + let outerColor = options.outerColor||foregroundImage; + let backgroundImage = backgroundColor; if(!options.backgroundColor&&resources.backgroundImage){ - context.drawImage(resources.backgroundImage,0,0,context.canvas.width,context.canvas.height); - }else{ - context.fillStyle = backgroundColor; - context.fillRect(0,0,context.canvas.width,context.canvas.height); + backgroundImage = context.drawImage(resources.backgroundImage,0,0,context.canvas.width,context.canvas.height); } + context.save(); + context.fillStyle = backgroundImage; + context.fillRect(0,0,context.canvas.width,context.canvas.height); context.restore(); context.save(); context.translate(x+0.5*pxWidth,y+0.5*pxWidth); @@ -52,11 +52,11 @@ export default function(context,data,options){ }else if(api.isPositionPoint(i,j)==2){ context.fillStyle = outerColor; }else{ - let color = colors[(i+j)%colors.length]; + let fillColor = colors[(i+j)%colors.length]; if(!options.foregroundColor&&resources.foregroundImage){ - color = context.createPattern(resources.foregroundImage,'repeat'); + fillColor = foregroundImage; } - context.fillStyle = color; + context.fillStyle = fillColor; } if(api.isPositionPoint(i,j)){ context.beginPath(); diff --git a/src/module/template/default.js b/src/module/template/default.js index d39a985..4c1c298 100644 --- a/src/module/template/default.js +++ b/src/module/template/default.js @@ -18,9 +18,9 @@ export default function(context,data,options){ let backgroundColor = options.backgroundColor||'#ffffff'; let foregroundColor = options.foregroundColor||'#000000'; let colors = foregroundColor.split(','); - let color = colors[0]; + let foregroundImage = colors[0]; if(!options.foregroundColor&&resources.foregroundImage){ - color = api.getForegroundImageBrush(resources.foregroundImage); + foregroundImage = api.getImageBrush(resources.foregroundImage); } if(colors.length>1){ let gradient = context.createLinearGradient(0,0,context.canvas.width,context.canvas.height); @@ -28,17 +28,17 @@ export default function(context,data,options){ colors.forEach(function(value,index){ gradient.addColorStop(index/length,value); }); - color = gradient; + foregroundImage = gradient; } - let innerColor = options.innerColor||color; - let outerColor = options.outerColor||color; - context.save(); + let innerColor = options.innerColor||foregroundImage; + let outerColor = options.outerColor||foregroundImage; + let backgroundImage = backgroundColor; if(!options.backgroundColor&&resources.backgroundImage){ - context.drawImage(resources.backgroundImage,0,0,context.canvas.width,context.canvas.height); - }else{ - context.fillStyle = backgroundColor; - context.fillRect(0,0,context.canvas.width,context.canvas.height); + backgroundImage = context.drawImage(resources.backgroundImage,0,0,context.canvas.width,context.canvas.height); } + context.save(); + context.fillStyle = backgroundImage; + context.fillRect(0,0,context.canvas.width,context.canvas.height); context.restore(); context.save(); context.translate(x,y); @@ -50,7 +50,7 @@ export default function(context,data,options){ }else if(api.isPositionPoint(i,j)==2){ context.fillStyle = outerColor; }else{ - context.fillStyle = color; + context.fillStyle = foregroundImage; } context.fillRect(Math.ceil(i*pxWidth)-0.5,Math.ceil(j*pxWidth)-0.5,Math.ceil(pxWidth)+1,Math.ceil(pxWidth)+1); } diff --git a/src/module/template/diamond.js b/src/module/template/diamond.js index e248199..2911c9d 100644 --- a/src/module/template/diamond.js +++ b/src/module/template/diamond.js @@ -18,9 +18,9 @@ export default function(context,data,options){ let backgroundColor = options.backgroundColor||'#ffffff'; let foregroundColor = options.foregroundColor||'#000000'; let colors = foregroundColor.split(','); - let color = colors[0]; + let foregroundImage = colors[0]; if(!options.foregroundColor&&resources.foregroundImage){ - color = api.getForegroundImageBrush(resources.foregroundImage); + foregroundImage = api.getImageBrush(resources.foregroundImage); } if(colors.length>1){ let gradient = context.createLinearGradient(0,0,context.canvas.width,context.canvas.height); @@ -28,17 +28,17 @@ export default function(context,data,options){ colors.forEach(function(value,index){ gradient.addColorStop(index/length,value); }); - color = gradient; + foregroundImage = gradient; } - let innerColor = options.innerColor||color; - let outerColor = options.outerColor||color; - context.save(); + let innerColor = options.innerColor||foregroundImage; + let outerColor = options.outerColor||foregroundImage; + let backgroundImage = backgroundColor; if(!options.backgroundColor&&resources.backgroundImage){ - context.drawImage(resources.backgroundImage,0,0,context.canvas.width,context.canvas.height); - }else{ - context.fillStyle = backgroundColor; - context.fillRect(0,0,context.canvas.width,context.canvas.height); + backgroundImage = context.drawImage(resources.backgroundImage,0,0,context.canvas.width,context.canvas.height); } + context.save(); + context.fillStyle = backgroundImage; + context.fillRect(0,0,context.canvas.width,context.canvas.height); context.restore(); context.save(); context.translate(x+pxWidth/2,y+pxWidth/2); @@ -51,8 +51,8 @@ export default function(context,data,options){ context.fillStyle = outerColor; context.strokeStyle = outerColor; }else{ - context.fillStyle = color; - context.strokeStyle = color; + context.fillStyle = foregroundImage; + context.strokeStyle = foregroundImage; } if(api.getValue(i,j)){ context.beginPath(); diff --git a/src/module/template/fusion.js b/src/module/template/fusion.js index d892b0a..9394751 100644 --- a/src/module/template/fusion.js +++ b/src/module/template/fusion.js @@ -18,9 +18,9 @@ export default function(context,data,options){ let backgroundColor = options.backgroundColor||'#ffffff'; let foregroundColor = options.foregroundColor||'#000000'; let colors = foregroundColor.split(','); - let color = colors[0]; + let foregroundImage = colors[0]; if(!options.foregroundColor&&resources.foregroundImage){ - color = api.getForegroundImageBrush(resources.foregroundImage); + foregroundImage = api.getImageBrush(resources.foregroundImage); } if(colors.length>1){ let gradient = context.createLinearGradient(0,0,context.canvas.width,context.canvas.height); @@ -28,41 +28,43 @@ export default function(context,data,options){ colors.forEach(function(value,index){ gradient.addColorStop(index/length,value); }); - color = gradient; + foregroundImage = gradient; } - let innerColor = options.innerColor||color; - let outerColor = options.outerColor||color; - context.save(); + let innerColor = options.innerColor||foregroundColor; + let outerColor = options.outerColor||foregroundColor; if(resources.backgroundImage){ - context.drawImage(resources.backgroundImage,0,0,context.canvas.width,context.canvas.height); - }else{ - context.fillStyle = backgroundColor; - context.fillRect(0,0,context.canvas.width,context.canvas.height); + foregroundColor = foregroundColor.replace(/#([0-9a-fA-F]{6}).*/,'#$188'); + backgroundColor = backgroundColor.replace(/#([0-9a-fA-F]{6}).*/,'#$188'); + innerColor = innerColor.replace(/#([0-9a-fA-F]{6}).*/,'#$188'); + outerColor = outerColor.replace(/#([0-9a-fA-F]{6}).*/,'#$188'); } + let innerImage = innerColor||foregroundImage; + let outerImage = outerColor||foregroundImage; + let backgroundImage = resources.backgroundImage?api.getImageBrush(resources.backgroundImage):backgroundColor; + context.save(); + context.fillStyle = backgroundImage; + context.fillRect(0,0,context.canvas.width,context.canvas.height); context.restore(); context.save(); context.translate(x,y); for(let i=0;i1){ let gradient = context.createLinearGradient(0,0,context.canvas.width,context.canvas.height); @@ -28,17 +28,17 @@ export default function(context,data,options){ colors.forEach(function(value,index){ gradient.addColorStop(index/length,value); }); - color = gradient; + foregroundImage = gradient; } - let innerColor = options.innerColor||color; - let outerColor = options.outerColor||color; - context.save(); + let innerColor = options.innerColor||foregroundImage; + let outerColor = options.outerColor||foregroundImage; + let backgroundImage = backgroundColor; if(!options.backgroundColor&&resources.backgroundImage){ - context.drawImage(resources.backgroundImage,0,0,context.canvas.width,context.canvas.height); - }else{ - context.fillStyle = backgroundColor; - context.fillRect(0,0,context.canvas.width,context.canvas.height); + backgroundImage = context.drawImage(resources.backgroundImage,0,0,context.canvas.width,context.canvas.height); } + context.save(); + context.fillStyle = backgroundImage; + context.fillRect(0,0,context.canvas.width,context.canvas.height); context.restore(); context.save(); context.translate(x,y); @@ -51,8 +51,8 @@ export default function(context,data,options){ context.fillStyle = outerColor; context.strokeStyle = outerColor; }else{ - context.fillStyle = color; - context.strokeStyle = color; + context.fillStyle = foregroundImage; + context.strokeStyle = foregroundImage; } if (api.getValue(i,j)){ let cx = i * pxWidth; diff --git a/src/widget-qrcode.js b/src/widget-qrcode.js index 4228632..f0e31ff 100644 --- a/src/widget-qrcode.js +++ b/src/widget-qrcode.js @@ -74,10 +74,12 @@ class WidgetQRCode extends HTMLElement { _.addEventListener('resize',function(){ _.resize(); },false); - // 修复切换tab画布被清空问题 - document.addEventListener('visibilitychange',function(){ - _.drawQRCode(); - }); + // Edge浏览器切换tab画布被清空问题 + if(navigator.userAgent.includes('Edg/')){ + document.addEventListener('visibilitychange',function(){ + _.drawQRCode(); + }); + } } render(parser){ let _ = this;