text: (window.webpackJsonp=window.webpackJsonp||[]).push([[5],{Bl7J:function(e,t,n){"use strict";var r=n("PlB2"),o=n("q1tI"),a=n.n(o),i=n("Wbzz"),c=n("NSxh");n("8ypT");t.a=function(e){var t=e.children;return a.a.createElement(i.StaticQuery,{query:"755544856",render:function(e){return a.a.createElement(a.a.Fragment,null,t,a.a.createElement(c.a,null))},data:r})}},Iab2:function(e,t,n){(function(r){var o,a,i;n("sC2a"),n("pJf4"),a=[],void 0===(i="function"==typeof(o=function(){"use strict";function t(e,t,n){var r=new XMLHttpRequest;r.open("GET",e),r.responseType="blob",r.onload=function(){i(r.response,t,n)},r.onerror=function(){console.error("could not download file")},r.send()}function n(e){var t=new XMLHttpRequest;t.open("HEAD",e,!1);try{t.send()}catch(e){}return 200<=t.status&&299>=t.status}function o(e){try{e.dispatchEvent(new MouseEvent("click"))}catch(t){var n=document.createEvent("MouseEvents");n.initMouseEvent("click",!0,!0,window,0,0,0,80,20,!1,!1,!1,!1,0,null),e.dispatchEvent(n)}}var a="object"==typeof window&&window.window===window?window:"object"==typeof self&&self.self===self?self:"object"==typeof r&&r.global===r?r:void 0,i=a.saveAs||("object"!=typeof window||window!==a?function(){}:"download"in HTMLAnchorElement.prototype?function(e,r,i){var c=a.URL||a.webkitURL,u=document.createElement("a");r=r||e.name||"download",u.download=r,u.rel="noopener","string"==typeof e?(u.href=e,u.origin===location.origin?o(u):n(u.href)?t(e,r,i):o(u,u.target="_blank")):(u.href=c.createObjectURL(e),setTimeout((function(){c.revokeObjectURL(u.href)}),4e4),setTimeout((function(){o(u)}),0))}:"msSaveOrOpenBlob"in navigator?function(e,r,a){if(r=r||e.name||"download","string"!=typeof e)navigator.msSaveOrOpenBlob(function(e,t){return void 0===t?t={autoBom:!1}:"object"!=typeof t&&(console.warn("Deprecated: Expected third argument to be a object"),t={autoBom:!t}),t.autoBom&&/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(e.type)?new Blob(["\ufeff",e],{type:e.type}):e}(e,a),r);else if(n(e))t(e,r,a);else{var i=document.createElement("a");i.href=e,i.target="_blank",setTimeout((function(){o(i)}))}}:function(e,n,r,o){if((o=o||open("","_blank"))&&(o.document.title=o.document.body.innerText="downloading..."),"string"==typeof e)return t(e,n,r);var i="application/octet-stream"===e.type,c=/constructor/i.test(a.HTMLElement)||a.safari,u=/CriOS\/[\d]+/.test(navigator.userAgent);if((u||i&&c)&&"object"==typeof FileReader){var l=new FileReader;l.onloadend=function(){var e=l.result;e=u?e:e.replace(/^data:[^;]*;/,"data:attachment/file;"),o?o.location.href=e:location=e,o=null},l.readAsDataURL(e)}else{var s=a.URL||a.webkitURL,f=s.createObjectURL(e);o?o.location=f:location.href=f,o=null,setTimeout((function(){s.revokeObjectURL(f)}),4e4)}});a.saveAs=i.saveAs=i,e.exports=i})?o.apply(t,a):o)||(e.exports=i)}).call(this,n("yLpj"))},PlB2:function(e){e.exports=JSON.parse('{"data":{"site":{"siteMetadata":{"title":"Meme · 表情包生成"}}}}')},RXBc:function(e,t,n){"use strict";n.r(t);var r=n("q1tI"),o=n.n(r),a=(n("ksaK"),n("48OU")),i=n("Bl7J"),c=n("vrFN"),u=(n("6kNP"),n("8npG"),n("CtJk"),n("o0o1")),l=n.n(u),s=(n("ls82"),n("cLAn")),f=n.n(s),m=n("Iab2"),h=n.n(m),d=n("t+BR");function p(e,t,n,r,o,a,i){try{var c=e[a](i),u=c.value}catch(l){return void n(l)}c.done?t(u):Promise.resolve(u).then(r,o)}function g(e){return function(){var t=this,n=arguments;return new Promise((function(r,o){var a=e.apply(t,n);function i(e){p(a,r,o,i,c,"next",e)}function c(e){p(a,r,o,i,c,"throw",e)}i(void 0)}))}}var v=[o.a.createElement("p",null,(new Date).getMonth()+1+"月"+(new Date).getDate()+"日 天气 大火炉"),o.a.createElement("p",null,"和富婆走丢了。")],w=[o.a.createElement("p",null,"点击文字可直接编辑；"),o.a.createElement("p",null,"点击图片可自定义上传静态图片；"),o.a.createElement("p",null,"由于下载采用了",o.a.createElement("a",{href:"https://developer.mozilla.org/zh-CN/docs/Web/API/Blob",rel:"noopener noreferrer",target:"_blank"},"Blob")," 协议，故仅新版 Chrome、Firefox、Opera、Edge 支持下载，其它浏览器请点击预览后右击保存。")],y=function(e){var t,n;function r(t){var n;return(n=e.call(this,t)||this).loadImg=function(e){var t=function(e){n.refs.myCanvas.getContext("2d").drawImage(e,0,0,300,250)};n.sourceImg=new Image,n.sourceImg.src=e,n.sourceImg.complete?t(n.sourceImg):(n.sourceImg.onload=function(){t(n.sourceImg)},n.sourceImg.onerror=function(){alert("图片加载失败，请稍后重试。")})},n.toPng=function(){f.a.toPng(n.refs.cnt).then((function(e){n.refs.result.src=e})).catch((function(e){console.error("oops, something went wrong!",e)}))},n.toBlob=function(){f.a.toBlob(n.refs.cnt).then((function(e){h.a.saveAs(e,"meme.png")}))},n.readImage=function(){if(n.state.selectedFile){var e=new FileReader;e.onload=function(e){var t=new Image;t.src=e.target.result,t.onload=g(l.a.mark((function e(){return l.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,n.setState({canvasHeight:t.height/t.width*300});case 2:n.refs.myCanvas.getContext("2d").drawImage(t,0,0,300,n.state.canvasHeight);case 3:case"end":return e.stop()}}),e)})))},e.readAsDataURL(n.state.selectedFile)}},n.handleSelectedFile=function(){var e=g(l.a.mark((function e(t){return l.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,n.setState({selectedFile:t.target.files[0]});case 2:n.readImage();case 3:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}(),n.state={selectedFile:null,canvasHeight:250},n}n=e,(t=r).prototype=Object.create(n.prototype),t.prototype.constructor=t,t.__proto__=n;var a=r.prototype;return a.componentDidMount=function(){var e=this;fetch(d.b+"/img/example.png").then((function(e){return e.arrayBuffer()})).then((function(e){return new Blob([new Uint8Array(e)])})).then((function(e){return window.URL.createObjectURL(e)})).then((function(t){return e.loadImg(t)}))},a.render=function(){var e=this;return o.a.createElement("section",{className:"section container"},o.a.createElement("h1",{className:"title"},"Meme"),o.a.createElement("p",{className:"subtitle"},"——这个仇我记下了"),o.a.createElement("hr",null),o.a.createElement("div",{id:"cntVengeful",className:"is-centered",ref:"cnt"},o.a.createElement("canvas",{id:"myCanvas",ref:"myCanvas",height:this.state.canvasHeight,onClick:function(){e.refs.fileUpload.click()}}),o.a.createElement("p",{contentEditable:"true",className:"edit"},v)),o.a.createElement("div",{className:"button-width"},o.a.createElement("button",{id:"preview",className:"button is-info is-outlined",onClick:this.toPng},"戳我预览"),o.a.createElement("button",{id:"download",className:"button is-info is-outlined",onClick:this.toBlob},"戳我下载")),o.a.createElement("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=",id:"result",alt:"meme",title:"meme",ref:"result"}),o.a.createElement("br",null),o.a.createElement("br",null),o.a.createElement("br",null),o.a.createElement("input",{type:"file",id:"fileUpload",onChange:this.handleSelectedFile,ref:"fileUpload"}),o.a.createElement("article",{className:"message is-warning content"},o.a.createElement("div",{className:"message-body"},o.a.createElement("p",null,"Tips:"),o.a.createElement("ol",{className:"message-text"},w.map((function(e){return o.a.createElement("li",null,e)}))))))},r}(r.Component);t.default=function(){return o.a.createElement(i.a,null,o.a.createElement(c.a,{title:"Home",keywords:["Meme","表情包生成","纯 JavaScript"]}),o.a.createElement(a.a,null),o.a.createElement(y,null))}},cLAn:function(e,t,n){n("n7j8"),n("YbXK"),n("klQ5"),n("sC2a"),n("q8oJ"),n("C9fy"),n("CtJk"),n("HQhv"),n("sPse"),n("AqHK"),n("rzGZ"),n("Dq+y"),n("Ggvi"),n("JHok"),n("OeI1"),n("6kNP"),n("8npG"),function(t){"use strict";var n=function(){return{escape:function(e){return e.replace(/([.*+?^${}()|\[\]\/\\])/g,"\\$1")},parseExtension:t,mimeType:function(e){var n=t(e).toLowerCase();return(r="application/font-woff",{woff:r,woff2:r,ttf:"application/font-truetype",eot:"application/vnd.ms-fontobject",png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",gif:"image/gif",tiff:"image/tiff",svg:"image/svg+xml"})[n]||"";var r},dataAsUrl:function(e,t){return"data:"+t+";base64,"+e},isDataUrl:function(e){return-1!==e.search(/^(data:)/)},canvasToBlob:function(e){return e.toBlob?new Promise((function(t){e.toBlob(t)})):function(e){return new Promise((function(t){for(var n=window.atob(e.toDataURL().split(",")[1]),r=n.length,o=new Uint8Array(r),a=0;a<r;a++)o[a]=n.charCodeAt(a);t(new Blob([o],{type:"image/png"}))}))}(e)},resolveUrl:function(e,t){var n=document.implementation.createHTMLDocument(),r=n.createElement("base");n.head.appendChild(r);var o=n.createElement("a");return n.body.appendChild(o),r.href=t,o.href=e,o.href},getAndEncode:function(e){c.impl.options.cacheBust&&(e+=(/\?/.test(e)?"&":"?")+(new Date).getTime());return new Promise((function(t){var n,r=new XMLHttpRequest;if(r.onreadystatechange=function(){if(4!==r.readyState)return;if(200!==r.status)return void(n?t(n):a("cannot fetch resource: "+e+", status: "+r.status));var o=new FileReader;o.onloadend=function(){var e=o.result.split(/,/)[1];t(e)},o.readAsDataURL(r.response)},r.ontimeout=function(){n?t(n):a("timeout of 30000ms occured while fetching resource: "+e)},r.responseType="blob",r.timeout=3e4,r.open("GET",e,!0),r.send(),c.impl.options.imagePlaceholder){var o=c.impl.options.imagePlaceholder.split(/,/);o&&o[1]&&(n=o[1])}function a(e){console.error(e),t("")}}))},uid:(e=0,function(){return"u"+("0000"+(Math.random()*Math.pow(36,4)<<0).toString(36)).slice(-4)+e++}),delay:function(e){return function(t){return new Promise((function(n){setTimeout((function(){n(t)}),e)}))}},asArray:function(e){for(var t=[],n=e.length,r=0;r<n;r++)t.push(e[r]);return t},escapeXhtml:function(e){return e.replace(/#/g,"%23").replace(/\n/g,"%0A")},makeImage:function(e){return new Promise((function(t,n){var r=new Image;r.onload=function(){t(r)},r.onerror=n,r.src=e}))},width:function(e){var t=n(e,"border-left-width"),r=n(e,"border-right-width");return e.scrollWidth+t+r},height:function(e){var t=n(e,"border-top-width"),r=n(e,"border-bottom-width");return e.scrollHeight+t+r}};var e;function t(e){var t=/\.([^\.\/]*?)$/g.exec(e);return t?t[1]:""}function n(e,t){var n=window.getComputedStyle(e).getPropertyValue(t);return parseFloat(n.replace("px",""))}}(),r=function(){var e=/url\(['"]?([^'"]+?)['"]?\)/g;return{inlineAll:function(e,n,a){return function(){return!t(e)}()?Promise.resolve(e):Promise.resolve(e).then(r).then((function(t){var r=Promise.resolve(e);return t.forEach((function(e){r=r.then((function(t){return o(t,e,n,a)}))})),r}))},shouldProcess:t,impl:{readUrls:r,inline:o}};function t(t){return-1!==t.search(e)}function r(t){for(var r,o=[];null!==(r=e.exec(t));)o.push(r[1]);return o.filter((function(e){return!n.isDataUrl(e)}))}function o(e,t,r,o){return Promise.resolve(t).then((function(e){return r?n.resolveUrl(e,r):e})).then(o||n.getAndEncode).then((function(e){return n.dataAsUrl(e,n.mimeType(t))})).then((function(r){return e.replace(function(e){return new RegExp("(url\\(['\"]?)("+n.escape(e)+")(['\"]?\\))","g")}(t),"$1"+r+"$3")}))}}(),o=function(){return{resolveAll:function(){return e(document).then((function(e){return Promise.all(e.map((function(e){return e.resolve()})))})).then((function(e){return e.join("\n")}))},impl:{readAll:e}};function e(){return Promise.resolve(n.asArray(document.styleSheets)).then((function(e){var t=[];return e.forEach((function(e){try{n.asArray(e.cssRules||[]).forEach(t.push.bind(t))}catch(r){console.log("Error while reading CSS rules from "+e.href,r.toString())}})),t})).then((function(e){return e.filter((function(e){return e.type===CSSRule.FONT_FACE_RULE})).filter((function(e){return r.shouldProcess(e.style.getPropertyValue("src"))}))})).then((function(t){return t.map(e)}));function e(e){return{resolve:function(){var t=(e.parentStyleSheet||{}).href;return r.inlineAll(e.cssText,t)},src:function(){return e.style.getPropertyValue("src")}}}}}(),a=function(){return{inlineAll:function t(o){return o instanceof Element?function(e){var t=e.style.getPropertyValue("background");return t?r.inlineAll(t).then((function(t){e.style.setProperty("background",t,e.style.getPropertyPriority("background"))})).then((function(){return e})):Promise.resolve(e)}(o).then((function(){return o instanceof HTMLImageElement?e(o).inline():Promise.all(n.asArray(o.childNodes).map((function(e){return t(e)})))})):Promise.resolve(o)},impl:{newImage:e}};function e(e){return{inline:function(t){return n.isDataUrl(e.src)?Promise.resolve():Promise.resolve(e.src).then(t||n.getAndEncode).then((function(t){return n.dataAsUrl(t,n.mimeType(e.src))})).then((function(t){return new Promise((function(n,r){e.onload=n,e.onerror=r,e.src=t}))}))}}}}(),i={imagePlaceholder:void 0,cacheBust:!1},c={toSvg:u,toPng:function(e,t){return l(e,t||{}).then((function(e){return e.toDataURL()}))},toJpeg:function(e,t){return l(e,t=t||{}).then((function(e){return e.toDataURL("image/jpeg",t.quality||1)}))},toBlob:function(e,t){return l(e,t||{}).then(n.canvasToBlob)},toPixelData:function(e,t){return l(e,t||{}).then((function(t){return t.getContext("2d").getImageData(0,0,n.width(e),n.height(e)).data}))},impl:{fontFaces:o,images:a,util:n,inliner:r,options:{}}};function u(e,t){return function(e){void 0===e.imagePlaceholder?c.impl.options.imagePlaceholder=i.imagePlaceholder:c.impl.options.imagePlaceholder=e.imagePlaceholder;void 0===e.cacheBust?c.impl.options.cacheBust=i.cacheBust:c.impl.options.cacheBust=e.cacheBust}(t=t||{}),Promise.resolve(e).then((function(e){return function e(t,r,o){return o||!r||r(t)?Promise.resolve(t).then((function(e){return e instanceof HTMLCanvasElement?n.makeImage(e.toDataURL()):e.cloneNode(!1)})).then((function(e){return a(t,e,r)})).then((function(e){return function(e,t){return t instanceof Element?Promise.resolve().then(r).then(o).then(a).then(i).then((function(){return t})):t;function r(){var r,o;r=window.getComputedStyle(e),o=t.style,r.cssText?o.cssText=r.cssText:function(e,t){n.asArray(e).forEach((function(n){t.setProperty(n,e.getPropertyValue(n),e.getPropertyPriority(n))}))}(r,o)}function o(){[":before",":after"].forEach((function(r){!function(r){var o=window.getComputedStyle(e,r),a=o.getPropertyValue("content");if(""===a||"none"===a)return;var i=n.uid();t.className=t.className+" "+i;var c=document.createElement("style");c.appendChild(function(e,t,r){var o="."+e+":"+t,a=r.cssText?function(e){var t=e.getPropertyValue("content");return e.cssText+" content: "+t+";"}(r):function(e){return n.asArray(e).map((function(t){return t+": "+e.getPropertyValue(t)+(e.getPropertyPriority(t)?" !important":"")})).join("; ")+";"}(r);return document.createTextNode(o+"{"+a+"}")}(i,r,o)),t.appendChild(c)}(r)}))}function a(){e instanceof HTMLTextAreaElement&&(t.innerHTML=e.value),e instanceof HTMLInputElement&&t.setAttribute("value",e.value)}function i(){t instanceof SVGElement&&(t.setAttribute("xmlns","http://www.w3.org/2000/svg"),t instanceof SVGRectElement&&["width","height"].forEach((function(e){var n=t.getAttribute(e);n&&t.style.setProperty(e,n)})))}}(t,e)})):Promise.resolve();function a(t,r,o){var a=t.childNodes;return 0===a.length?Promise.resolve(r):i(r,n.asArray(a),o).then((function(){return r}));function i(t,n,r){var o=Promise.resolve();return n.forEach((function(n){o=o.then((function(){return e(n,r)})).then((function(e){e&&t.appendChild(e)}))})),o}}}(e,t.filter,!0)})).then(s).then(f).then((function(e){t.bgcolor&&(e.style.backgroundColor=t.bgcolor);t.width&&(e.style.width=t.width+"px");t.height&&(e.style.height=t.height+"px");t.style&&Object.keys(t.style).forEach((function(n){e.style[n]=t.style[n]}));return e})).then((function(r){return function(e,t,r){return Promise.resolve(e).then((function(e){return e.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),(new XMLSerializer).serializeToString(e)})).then(n.escapeXhtml).then((function(e){return'<foreignObject x="0" y="0" width="100%" height="100%">'+e+"</foreignObject>"})).then((function(e){return'<svg xmlns="http://www.w3.org/2000/svg" width="'+t+'" height="'+r+'">'+e+"</svg>"})).then((function(e){return"data:image/svg+xml;charset=utf-8,"+e}))}(r,t.width||n.width(e),t.height||n.height(e))}))}function l(e,t){return u(e,t).then(n.makeImage).then(n.delay(100)).then((function(r){var o=function(e){var r=document.createElement("canvas");if(r.width=t.width||n.width(e),r.height=t.height||n.height(e),t.bgcolor){var o=r.getContext("2d");o.fillStyle=t.bgcolor,o.fillRect(0,0,r.width,r.height)}return r}(e);return o.getContext("2d").drawImage(r,0,0),o}))}function s(e){return o.resolveAll().then((function(t){var n=document.createElement("style");return e.appendChild(n),n.appendChild(document.createTextNode(t)),e}))}function f(e){return a.inlineAll(e).then((function(){return e}))}e.exports=c}()}}]);
  //# sourceMappingURL=component---src-pages-index-js-b9bd4687994008606716.js.map