UNPKG

create-puzzle

Version:

在浏览器端生成滑块验证码的拼图和背景图。

3 lines (2 loc) 5.29 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).createPuzzle={})}(this,(function(t){"use strict";var e;t.Point=void 0,(e=t.Point||(t.Point={})).None="none",e.Outer="outher",e.Inner="inner";var o=[t.Point.None,t.Point.Outer,t.Point.Inner];function n(t,e){return void 0===e&&(e=0),Math.max(Math.floor(Math.random()*t),e)}function i(t){return t[n(t.length)]}function r(e){var n={top:i(o),right:i(o),bottom:i(o),left:i(o)},r=Object.keys(n);if(n.top===t.Point.Outer&&n.bottom===t.Point.Outer?n[i(["top","bottom"])]=t.Point.Inner:n.top!==t.Point.Outer&&n.bottom!==t.Point.Outer&&(n[i(["top","bottom"])]=t.Point.Outer),n.left===t.Point.Outer&&n.right===t.Point.Outer?n[i(["left","right"])]=t.Point.Inner:n.left!==t.Point.Outer&&n.right!==t.Point.Outer&&(n[i(["left","right"])]=t.Point.Outer),e){var a=[],h=[];r.forEach((function(e){n[e]===t.Point.Inner?a.push(e):n[e]===t.Point.None&&h.push(e)})),2===e?a.forEach((function(e){return n[e]=t.Point.None})):3===e?0===a.length?n[i(h)]=t.Point.Inner:2===a.length&&(n[i(a)]=t.Point.None):4==e&&h.forEach((function(e){return n[e]=t.Point.Inner}))}return n}function a(e,o){void 0===o&&(o={});var n=o.x,i=void 0===n?0:n,a=o.y,h=void 0===a?0:a,u=o.w,c=void 0===u?60:u,l=o.h,d=void 0===l?60:l,f=o.points,g=o.margin,P=void 0===g?0:g;P=P<=0?0:P,"number"!=typeof f&&f||(f=r(f));var s=.15*(Math.min(c,d)-2*P),p=Math.hypot(s,s)/2,m=s+p,v={x:i+P,y:h+P,w:c-m-2*P,h:d-m-2*P},y=v.w/2,b=v.h/2;f.left===t.Point.Outer&&(v.x+=m),f.top===t.Point.Outer&&(v.y+=m),e.beginPath(),e.lineWidth=2,e.moveTo(v.x,v.y),f.top!==t.Point.None&&(e.lineTo(v.x+y-p,v.y),f.top===t.Point.Inner?e.arc(v.x+y,v.y+p,s,1.25*Math.PI,1.75*Math.PI,!0):e.arc(v.x+y,v.y-p,s,.75*Math.PI,.25*Math.PI)),e.lineTo(v.x+v.w,v.y),f.right!==t.Point.None&&(e.lineTo(v.x+v.w,v.y+b-p),f.right===t.Point.Inner?e.arc(v.x+v.w-p,v.y+b,s,1.75*Math.PI,.25*Math.PI,!0):e.arc(v.x+v.w+p,v.y+b,s,1.25*Math.PI,.75*Math.PI)),e.lineTo(v.x+v.w,v.y+v.h),f.bottom!==t.Point.None&&(e.lineTo(v.x+y+p,v.y+v.h),f.bottom===t.Point.Inner?e.arc(v.x+y,v.y+v.h-p,s,.25*Math.PI,.75*Math.PI,!0):e.arc(v.x+y,v.y+v.h+p,s,1.75*Math.PI,1.25*Math.PI)),e.lineTo(v.x,v.y+v.h),f.left!==t.Point.None&&(e.lineTo(v.x,v.y+b+p),f.left===t.Point.Inner?e.arc(v.x+p,v.y+b,s,.75*Math.PI,1.25*Math.PI,!0):e.arc(v.x-p,v.y+b,s,.25*Math.PI,1.75*Math.PI)),e.lineTo(v.x,v.y),e.stroke(),e.closePath()}var h,u,c=[200,304];function l(t){return new Promise((function(e,o){var n,i,r,a=(n=t,"undefined"!=typeof Blob&&n instanceof Blob),h="string"==typeof(i=t)&&0===i.indexOf("data:");a?e(URL.createObjectURL(t)):h?e(t):(r=t,new Promise((function(t,e){var o=new XMLHttpRequest;o.open("get",r,!0),o.responseType="blob",o.onload=function(o){var n=o.target.status;c.indexOf(n)>-1?t(o):e(new Error("[createPuzzle] The image does not support get requests, responseStatus ".concat(n,", '").concat(r,"'.")))},o.onerror=function(t){e(t)},o.send(null)}))).then((function(t){e(URL.createObjectURL(t.target.response))})).catch(o)}))}function d(t,e){return void 0===e&&(e=!0),new Promise((function(o,n){e&&h===t&&u?o(u):l(t).then((function(i){function r(){var t;"string"==typeof(t=i)&&0===t.indexOf("blob:")&&URL.revokeObjectURL(i)}var a=new Image;a.onload=function(){r(),e&&(h=t,u=a),o(a)},a.onerror=function(e){r(),console.error("[createPuzzle] The image load failed, '".concat(t,"'.")),n(e)},a.src=i})).catch(n)}))}t.default=function(t,e){void 0===e&&(e={});var o=e.borderWidth,i=void 0===o?2:o,h=e.borderColor,u=void 0===h?"rgba(255,255,255,0.7)":h,c=e.fillColor,l=void 0===c?"rgba(255,255,255,0.7)":c,f=e.points,g=e.width,P=void 0===g?60:g,s=e.height,p=void 0===s?60:s,m=e.x,v=e.y,y=e.margin,b=void 0===y?2:y,I=e.imageWidth,x=e.imageHeight,w=e.bgWidth,O=e.bgHeight,M=e.bgOffset,T=void 0===M?[0,0]:M,z=e.bgImageType,R=void 0===z?"image/jpeg":z,U=e.bgImageEncoderOptions,L=void 0===U?.8:U,N=e.cacheImage;return new Promise((function(e,o){var h=document.createElement("canvas"),c=document.createElement("canvas"),g=h.getContext("2d"),s=c.getContext("2d");d(t,N).then((function(t){I&&(t.width=I),x&&(t.height=x);var o="number"==typeof w&&w>0?w>P?w:P:t.width,d="number"==typeof O&&O>0?O>p?O:p:t.height;h.width=o,h.height=d;var y=void 0===m?n(o-P):m||0,M=void 0===v?n(d-p):v||0;y<0?y=0:y>o-P&&(y=o-P),M<0?M=0:M>d-p&&(M=d-p);var z="number"!=typeof f&&f?f:r(f),U="function"==typeof T?T(t.width,t.height):T;g&&(g.strokeStyle=u,g.lineWidth=i,g.fillStyle=l,a(g,{x:y,y:M,w:P,h:p,points:z,margin:b}),g.fillStyle=l,g.fill(),g.globalCompositeOperation="destination-over",g.drawImage(t,U[0],U[1],t.width,t.height)),c.width=o,c.height=d;var N="",j="";if(s){s.strokeStyle=u,s.lineWidth=i,a(s,{x:y,y:M,w:P,h:p,points:z,margin:b}),s.globalCompositeOperation="destination-over",s.clip(),s.drawImage(t,U[0],U[1],t.width,t.height);var E=s.getImageData(y,M,P,p);s.clearRect(0,0,o,d),c.width=P,s.putImageData(E,0,M),N=c.toDataURL(),s.clearRect(0,0,P,d),c.width=P,c.height=p,s.putImageData(E,0,0),j=c.toDataURL()}e({bgUrl:h.toDataURL(R,L),puzzleUrl:N,x:y,singlePuzzleUrl:j,singlePuzzleY:M})})).catch(o)}))},t.drawPuzzle=a,t.getRandomInt=n,t.getRandomPoints=r,Object.defineProperty(t,"__esModule",{value:!0})})); //# sourceMappingURL=createPuzzle.min.js.map