\n
\n Tips:
\n- \n {messages.map((msg, i) =>
- {msg} )}\n
服务器在国外，加载图片在晚上高峰期可能会很慢；
,\n由于下载采用了Blob 协议，故仅新版 Chrome、Firefox、Opera、Edge 支持下载，其它浏览器请点击预览后右击保存。
\n ];\n\nclass Progress extends Component {\n render() {\n if (this.props.show)\n return ()\n else\n return ()\n }\n}\n\nclass Notification extends Component {\n render() {\n if (this.props.show)\n return (\n\n 生成完毕。\n
\n )\n else\n return (\n null\n )\n }\n}\n\nclass Template extends Component {\n constructor(props) {\n super(props)\n this.finished = true;\n this.gifInfo = this.props.element;\n this.state = {\n showProgressBar: false,\n showNotification: false,\n progressNum: 0,\n }\n }\n displayBar = () => {\n this.setState({ showProgressBar: true })\n }\n createWorkers = async (info) => {\n const tmpWorker = await fetch(Vendors + '/gif.worker.js'),\n workerSrcBlob = new Blob([await tmpWorker.text()], { type: 'text/javascript' }),\n workerBlobURL = window.URL.createObjectURL(workerSrcBlob);\n\n this.gif = new GIF({\n workerScript: workerBlobURL,\n workers: 3,\n quality: 16,\n width: info.width,\n height: info.height,\n })\n\n }\n\n renderGif = () => {\n this.gif.render();\n this.gif.on('progress', progress => {\n this.setState({ progressNum: 100 * progress });\n this.finished = false;\n })\n this.gif.on('finished', blob => {\n this.finished = true;\n const img = this.refs.gifMeme;\n window.gifUrl = window.URL.createObjectURL(blob);\n img.src = window.gifUrl;\n this.hideBar()\n if (this.download) {\n this.downGif()\n }\n })\n }\n\n hideBar = () => {\n this.setState({ showProgressBar: false, showNotification: true })\n setTimeout(() => {\n this.setState({ showNotification: false })\n }, 1666);\n }\n\n downGif = () => {\n let a = document.createElement('a');\n a.href = window.gifUrl;\n a.download = 'meme.gif';\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n }\n\n createGif = async () => {\n this.finished = false;\n const tmp = await fetch(Vendors + this.gifInfo.gif),\n response = await tmp.arrayBuffer(),\n arrayBufferView = new Uint8Array(response),\n gifReader = new omggif.GifReader(arrayBufferView),\n frameZeroInfo = gifReader.frameInfo(0),\n [, ctx] = this.createCanvasContext(frameZeroInfo.width, frameZeroInfo.height);\n return {\n index: 0,\n time: 0,\n ctx: ctx,\n gifReader: gifReader,\n width: frameZeroInfo.width,\n height: frameZeroInfo.height,\n captions: document.querySelectorAll('.input.is-info.sentence'),\n pixelBuffer: new Uint8ClampedArray(frameZeroInfo.width * frameZeroInfo.height * 4),\n }\n }\n\n createCanvasContext = (width, height) => {\n const canvas = document.createElement('canvas');\n [canvas.width, canvas.height] = [width, height]\n const ctx = canvas.getContext('2d');\n ctx.font = \"16px 'Microsoft YaHei', sans-serif\";\n [ctx.textAlign, ctx.textBaseline] = ['center', 'bottom'];\n [ctx.fillStyle, ctx.strokeStyle] = ['white', 'black'];\n [ctx.lineWidth, ctx.lineJoin] = [3, 'round'];\n return [canvas, ctx];\n }\n\n drawCaptions = (info, frameInfo) => {\n var textInfo = this.gifInfo.config[info.index];\n if (textInfo.startTime <= info.time && info.time <= textInfo.endTime) {\n var text = undefined;\n if (info.captions[info.index])\n text = info.captions[info.index].value || textInfo.default;\n else\n text = textInfo.default;\n info.ctx.strokeText(text, info.width / 2, info.height - 5, info.width);\n info.ctx.fillText(text, info.width / 2, info.height - 5, info.width);\n }\n info.time += frameInfo.delay / 100;\n if (info.time > textInfo.endTime) {\n info.index++;\n }\n }\n\n drawFrame = (info) => {\n for (let i = 0; i < info.gifReader.numFrames(); i++) {\n info.gifReader.decodeAndBlitFrameRGBA(i, info.pixelBuffer);\n let imageData = new window.ImageData(info.pixelBuffer, info.width, info.height);\n info.ctx.putImageData(imageData, 0, 0);\n\n let frameInfo = info.gifReader.frameInfo(i);\n if (info.index < this.gifInfo.config.length) {\n this.drawCaptions(info, frameInfo)\n }\n this.gif.addFrame(info.ctx, {\n copy: true,\n delay: frameInfo.delay * 10,\n dispose: -1\n })\n }\n }\n\n\n generating = async (download) => {\n this.setState({ progressNum: 0 })\n if (!this.finished) {\n return\n }\n this.download = download;\n this.displayBar();\n const info = await this.createGif();\n await this.createWorkers(info);\n this.drawFrame(info);\n this.renderGif()\n }\n\n render() {\n return (\n <>\n Meme
\n——{this.props.element.name}
\n\n
\n 
\n
\n \n \n
)\n }\n \n \n
\n \n \n \n
\n \n