{"id":241,"date":"2025-05-24T11:28:08","date_gmt":"2025-05-24T03:28:08","guid":{"rendered":"http:\/\/47.111.133.139\/?p=241"},"modified":"2025-06-14T19:52:37","modified_gmt":"2025-06-14T11:52:37","slug":"%e8%87%aa%e5%8a%a8%e8%8d%89%e7%a8%bf","status":"publish","type":"post","link":"https:\/\/yin.nnneri.me\/?p=241","title":{"rendered":"\u5728\u7ebf\u6296\u52a8\u5de5\u5177(\u9700\u8981\u7ef4\u62a4)"},"content":{"rendered":"\r\n

\u4e0d\u719f\u6089\u5982\u4f55\u4f7f\u7528\u8bf7\u8f6c\u5230\u9875\u5c3e<\/mark><\/h2>\r\n\r\n\r\n\r\n\r\n\r\n\r\n \r\n \r\n Dithering<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gif.js\/0.2.0\/gif.js\"><\/script>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.7.2\/css\/all.min.css\" rel=\"stylesheet\">\r\n <script>\r\n tailwind.config = {\r\n darkMode: 'class',\r\n theme: {\r\n extend: {\r\n colors: {\r\n primary: '#165DFF',\r\n secondary: '#0FC6C2',\r\n success: '#00B42A',\r\n warning: '#FF7D00',\r\n danger: '#F53F3F',\r\n neutral: {\r\n 100: '#F5F7FA',\r\n 200: '#E5E6EB',\r\n 300: '#C9CDD4',\r\n 400: '#86909C',\r\n 500: '#4E5969',\r\n 600: '#272E3B',\r\n 700: '#1D2129',\r\n },\r\n dark: '#1D2129',\r\n 'dark-2': '#4E5969',\r\n 'light-1': '#F2F3F5',\r\n 'light-2': '#E5E6EB',\r\n 'light-3': '#C9CDD4',\r\n },\r\n fontFamily: {\r\n mono: ['Consolas', 'monospace'],\r\n },\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style type=\"text\/tailwindcss\">\r\n @layer utilities {\r\n .content-auto {\r\n content-visibility: auto;\r\n }\r\n .text-shadow {\r\n text-shadow: 0 1px 2px rgba(0,0,0,0.1);\r\n }\r\n .transition-bg {\r\n transition: background-color 0.3s ease;\r\n }\r\n .transition-all-300 {\r\n transition: all 0.3s ease;\r\n }\r\n .editor-container {\r\n @apply relative rounded-lg shadow-md overflow-hidden border border-gray-200 ;\r\n }\r\n .nav-item {\r\n @apply px-4 py-2 rounded-lg transition-bg cursor-pointer text-dark hover:bg-primary\/20;\r\n }\r\n .nav-item.active {\r\n @apply bg-primary text-white shadow-sm;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <main class=\"dark:bg-neutral-700 dark:text-light-1 container mx-auto w-full\">\r\n\r\n <div id=\"processing-status\" class=\"hidden fixed inset-0 z-50 backdrop-blur-md\">\r\n <div class=\"flex items-center justify-center min-h-screen\">\r\n <div class=\"p-6 rounded-lg max-w-md w-full mx-4 relative shadow-xl\">\r\n <div class=\"relative h-8 rounded-full bg-gray-200\">\r\n <div class=\"h-8 rounded-full bg-gradient-to-r from-pink-500 to-pink-500 transition-all duration-100 ease-out\"\r\n style=\"width: 60%\"><\/div>\r\n <span class=\"absolute inset-0 flex items-center justify-center text-sm font-medium text-white\">60%<\/span>\r\n <\/div>\r\n <\/div>\r\n <button id='output-stop-button' class=\"w-20 h-20 bg-red-500 hover:bg-red-600 active:bg-red-700\r\n border-2 border-red-700 rounded-lg text-white font-semibold\r\n transition-all duration-200 ease-in-out \r\n shadow-md hover:shadow-lg active:shadow-sm\r\n focus:outline-none focus:ring-4 focus:ring-red-300\r\n disabled:opacity-50 disabled:cursor-not-allowed\"\r\n >\r\n \u505c\u6b62\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"dark:bg-neutral-700 grid grid-cols-1 gap-8\">\r\n <!-- \u5de6\u4fa7\u63a7\u5236\u9762\u677f -->\r\n <div>\r\n <div class=\"dark:bg-neutral-700 dark:border-neutral-600 dark:text-light-1 rounded-xl shadow-soft p-6 transition-all duration-300 hover:shadow-lg border border-gray-100\">\r\n <!-- \u56fe\u7247\u4e0a\u4f20 -->\r\n <div id=\"dropimage-upload\" class=\"mb-6\">\r\n <label class=\"block text-sm font-medium dark:text-light-2 mb-2\">\u9009\u62e9\u56fe\u7247<\/label>\r\n <div class=\"relative\">\r\n <div class=\"flex items-center justify-center w-full\">\r\n <label for=\"file-upload\" class=\"flex flex-col items-center justify-center w-full h-40 border-2 dark:border-neutral-600 border-dashed rounded-lg cursor-pointer dark:bg-neutral-600 bg-neutral-100 hover:bg-neutral-50 dark:hover:bg-neutral-500 transition-colors duration-200\">\r\n <div class=\"flex flex-col items-center justify-center pt-5 pb-6\">\r\n <i class=\"fa-solid fa-cloud-upload text-3xl dark:text-neutral-300 text-neutral-400 mb-2\"><\/i>\r\n <p class=\"mb-2 text-sm dark:text-neutral-300 text-neutral-500\"><span class=\"font-semibold\">\u70b9\u51fb\u4e0a\u4f20\u56fe\u7247<\/span> \u6216\u62d6\u653e\u81f3\u6b64\u5904<\/p>\r\n <p class=\"text-xs dark:text-neutral-400 text-neutral-400\">\u652f\u6301 PNG, JPG, WebP \u683c\u5f0f<\/p>\r\n <\/div>\r\n <input id=\"file-upload\" type=\"file\" accept=\"image\/*\" class=\"hidden\" \/>\r\n <\/label>\r\n <\/div>\r\n <div id=\"file-name\" class=\"mt-2 text-sm dark:text-neutral-300 text-neutral-500 truncate hidden\"><\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mb-6\">\r\n <label class=\"block text-sm font-medium dark:text-light-2 text-neutral-600 mb-2\">\u8f6c\u6362\u9009\u9879<\/label>\r\n <div class=\"space-y-4\">\r\n <!-- \u9884\u89c8\u7f29\u653e -->\r\n <div>\r\n <label class=\"flex items-center justify-between text-sm\">\r\n <span class=\"dark:text-light-2 text-neutral-600\">\u7f29\u653e\u6bd4\u4f8b<\/span>\r\n <span id=\"images-resolution-value\" class=\"dark:text-neutral-300 text-neutral-500\"><\/span>\r\n <span id=\"scale-value\" class=\"dark:text-neutral-300 text-neutral-500\">100%<\/span>\r\n <\/label>\r\n <input type=\"range\" id=\"scale\" min=\"2\" max=\"100\" step=\"2\" value=\"100\" class=\"w-full h-2 dark:bg-neutral-600 bg-neutral-200 rounded-lg appearance-none cursor-pointer accent-primary\">\r\n <\/div>\r\n \r\n <!-- \u5f69\u8272 -->\r\n <div>\r\n <label class=\"flex items-center justify-between text-sm\">\r\n <span class=\"dark:text-light-2 text-neutral-600\">\u9009\u9879<\/span>\r\n <\/label>\r\n <div class=\"flex justify-end\">\r\n <input type=\"checkbox\" id=\"color-checkbox\" class=\"w-5 h-5 dark:bg-neutral-600 bg-neutral-200 rounded-lg cursor-pointer accent-primary\">\r\n <span id=\"color-value\" class=\"dark:text-neutral-300 text-neutral-500 text-sm\">\u5f69\u8272\u8f93\u51fa<\/span>\r\n <\/div>\r\n <div class=\"flex justify-end\">\r\n <p>|<\/p>\r\n <\/div>\r\n <div class=\"flex justify-end\">\r\n <input type=\"checkbox\" id=\"precisionPreview-checkbox\" checked=\"checked\" class=\"w-5 h-5 dark:bg-neutral-600 bg-neutral-200 rounded-lg cursor-pointer accent-primary\">\r\n <span id=\"precisionPreview\" class=\"dark:text-neutral-300 text-neutral-500 text-sm\">\u70b9\u5bf9\u70b9\u9884\u89c8<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u77e9\u9635\u5927\u5c0f -->\r\n <div>\r\n <label for=\"matrix-size\" class=\"block text-sm font-medium dark:text-light-2 text-slate-700 mb-1\">Bayer\u77e9\u9635\u5c3a\u5bf8<\/label>\r\n <div class=\"flex items-center\">\r\n <input type=\"range\" id=\"matrix-size\" min=\"1\" max=\"5\" step=\"1\" value=\"3\" \r\n class=\"w-full h-2 dark:bg-neutral-600 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-primary\">\r\n <span id=\"matrixsize-value\" class=\"ml-2 text-sm dark:text-neutral-300 text-slate-600 min-w-[2rem] text-center\">8\u00d78<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- \u9608\u503c -->\r\n <div>\r\n <label class=\"flex items-center justify-between text-sm\">\r\n <span class=\"dark:text-light-2 text-neutral-600\">\u9608\u503c<\/span>\r\n <span id=\"threshold-value\" class=\"dark:text-neutral-300 text-neutral-500\">128<\/span>\r\n <\/label>\r\n <input type=\"range\" id=\"threshold\" min=\"-256\" max=\"512\" value=\"128\" class=\"w-full h-2 dark:bg-neutral-600 bg-neutral-200 rounded-lg appearance-none cursor-pointer accent-primary\">\r\n <\/div>\r\n \r\n <!-- \u6743\u91cd -->\r\n <div>\r\n <label class=\"flex items-center justify-between text-sm\">\r\n <span class=\"dark:text-light-2 text-neutral-600\">\u6743\u91cd<\/span>\r\n <span id=\"weight-value\" class=\"dark:text-neutral-300 text-neutral-500\">1<\/span>\r\n <\/label>\r\n <input type=\"range\" id=\"weight\" min=\"0\" max=\"2\" value=\"1\" step=\"0.01\" class=\"w-full h-2 dark:bg-neutral-600 bg-neutral-200 rounded-lg appearance-none cursor-pointer accent-primary\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u5bfc\u51fa\u81f3gif\u83dc\u5355 -->\r\n <button id=\"toggle-outputmenu\" class=\"bg-primary hover:bg-primary\/90 text-white px-6 py-2 rounded-lg shadow transition-all duration-300 transform hover:scale-105 flex items-center\">\u5c55\u5f00\/\u6298\u53e0<\/button>\r\n <div id=\"output-menu\" class=\"hidden mt-4 p-6 dark:bg-neutral-700 dark:border-neutral-600 dark:text-light-1 rounded-xl shadow-sm overflow-hidden transition-all duration-300 max-h-0\">\r\n <div class=\"flex justify-between items-center h-16 p-6\">\r\n <div>\r\n <p class=\"text-sm text-gray-600\/95 font-medium mb-1\">\u8d77\u59cb\u5e27\u9608\u503c<\/p>\r\n <button id=\"output-startthreshold\" class=\"bg-transparent border-2 border-primary\/90 text-white hover:text-primary\/80 px-6 py-2 rounded-lg flex items-center focus:outline-none\">\u672a\u5b9a\u4e49<\/button>\r\n <\/div>\r\n \r\n <div>\r\n <p class=\"text-sm text-gray-600\/95 font-medium mb-1\">\u7ed3\u5c3e\u5e27\u9608\u503c<\/p>\r\n <button id=\"output-endthreshold\" class=\"bg-transparent border-2 border-primary\/90 text-white hover:text-primary\/80 px-6 py-2 rounded-lg flex items-center focus:outline-none\">\u672a\u5b9a\u4e49<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex justify-between items-center h-16 p-6\">\r\n <div>\r\n <p class=\"text-sm text-gray-600\/95 font-medium mb-1\">\u8d77\u59cb\u5e27\u6743\u91cd<\/p>\r\n <button id=\"output-startweight\" class=\"bg-transparent border-2 border-primary\/90 text-white hover:text-primary\/80 px-6 py-2 rounded-lg flex items-center focus:outline-none\">\u672a\u5b9a\u4e49<\/button>\r\n <\/div>\r\n \r\n <div>\r\n <p class=\"text-sm text-gray-600\/95 font-medium mb-1\">\u7ed3\u5c3e\u5e27\u6743\u91cd<\/p>\r\n <button id=\"output-endweight\" class=\"bg-transparent border-2 border-primary\/90 text-white hover:text-primary\/80 px-6 py-2 rounded-lg flex items-center focus:outline-none\">\u672a\u5b9a\u4e49<\/button>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mt-2 text-sm text-gray-500\">\r\n \u8bbe\u7f6e GIF \u6bcf\u5e27\u95f4\u9694(\u6beb\u79d2)\r\n <\/p>\r\n <input type=\"number\" id=\"output-duration\", min=\"10\", max=\"10000\", step=\"10\" value=\"100\" required \r\n class=\"block w-full rounded-md dark:bg-neutral-700 border-gray-300 dark:text-light-1 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200 px-4 py-2\">\r\n <p class=\"mt-2 text-sm text-gray-500\">\r\n \u8bbe\u7f6e GIF \u52a8\u753b\u603b\u64ad\u653e\u65f6\u957f(\u6beb\u79d2)\r\n <\/p>\r\n <input type=\"number\" id=\"output-time\", min=\"10\", max=\"10000\", step=\"0.1\" value=\"1000\" required \r\n class=\"block w-full rounded-md dark:bg-neutral-700 border-gray-300 dark:text-light-1 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200 px-4 py-2\">\r\n <div class=\"flex\">\r\n <div>\r\n <label class=\"flex items-center justify-between text-sm\">\r\n <span class=\"dark:text-light-2 text-neutral-600\">\u6307\u6570<\/span>\r\n <span id=\"step-exponent-value\" class=\"dark:text-neutral-300 text-neutral-500\">1<\/span>\r\n <\/label>\r\n <input type=\"range\" id=\"step-exponent\" min=\"1\" max=\"10\" value=\"1\" step=\"0.2\" class=\"w-full h-2 dark:bg-neutral-600 bg-neutral-200 rounded-lg appearance-none cursor-pointer accent-primary\">\r\n <\/div>\r\n <div class=\"flex justify-end\">\r\n <input type=\"checkbox\" id=\"step-exponent-invert-checkbox\" checked=\"checked\" class=\"w-5 h-5 dark:bg-neutral-600 bg-neutral-200 rounded-lg cursor-pointer accent-primary\">\r\n <span class=\"dark:text-neutral-300 text-neutral-500 text-sm\">\u53cd\u8f6c<\/span>\r\n <\/div>\r\n <button id=\"output-button\" class=\"bg-primary hover:bg-primary\/90 text-sm text-white px-9 py-0 rounded-lg shadow transition-all duration-300 transform hover:scale-105 flex items-center\">\u5bfc\u51faGIF<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- \u53f3\u4fa7\u5c55\u793a\u9762\u677f -->\r\n <div>\r\n <!-- \u4f4d\u56fe\u9884\u89c8 -->\r\n <div class=\"rounded-xl transition-all duration-300 w-full h-full\">\r\n <div id=\"bitmap-container\" class=\"w-full h-full dark:bg-neutral-600 bg-neutral-100 rounded-lg flex items-center justify-center overflow-hidden border dark:border-neutral-600 border-gray-100\">\r\n <canvas id=\"bitmap-canvas\" class=\"object-contain hidden\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex p-6 justify-between items-center\">\r\n <button id=\"submit-button\" class=\"bg-primary hover:bg-primary\/90 text-white px-6 py-2 rounded-lg shadow transition-all duration-300 transform hover:scale-105 flex items-center\">\r\n <i class=\"fa-solid fa-paper-plane mr-2\"><\/i> \u8f93\u51fa\u76ee\u6807\u5206\u8fa8\u7387\u56fe\u50cf\r\n <\/button>\r\n <button id=\"submit-svg-button\" class=\"bg-primary hover:bg-primary\/90 text-white px-6 py-2 rounded-lg shadow transition-all duration-300 transform hover:scale-105 flex items-center\">\r\n <i class=\"fa-solid fa-paper-plane mr-2\"><\/i> \u8f93\u51fa\u76ee\u6807\u5206\u8fa8\u7387svg\u56fe\u50cf\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const fileUpload = document.getElementById('file-upload');\r\n const fileName = document.getElementById('file-name');\r\n const dropImageUpload = document.getElementById('dropimage-upload');\r\n const scaleSlider = document.getElementById('scale');\r\n const scaleValue = document.getElementById('scale-value');\r\n const matrixSizeSlider = document.getElementById('matrix-size');\r\n const matrixSizeValue = document.getElementById('matrixsize-value');\r\n const thresholdSlider = document.getElementById('threshold');\r\n const thresholdValue = document.getElementById('threshold-value');\r\n const bitmapCanvas = document.getElementById('bitmap-canvas');\r\n const bitmapContainer = document.getElementById('bitmap-container');\r\n const weightSlider = document.getElementById('weight');\r\n const weightValue = document.getElementById('weight-value');\r\n const colorCheckBox = document.getElementById('color-checkbox');\r\n const precisionPreviewCheckBox = document.getElementById('precisionPreview-checkbox');\r\n const submitButton = document.getElementById('submit-button');\r\n const submitSvgButton = document.getElementById('submit-svg-button');\r\n const toggleOutputMenuButton = document.getElementById('toggle-outputmenu');\r\n const imagesResolutionValue = document.getElementById('images-resolution-value');\r\n\r\n const outputStartThresholdButton = document.getElementById('output-startthreshold');\r\n const outputEndThresholdButton = document.getElementById('output-endthreshold');\r\n const outputStartWeightButton = document.getElementById('output-startweight');\r\n const outputEndWeightButton = document.getElementById('output-endweight');\r\n const outputTimeValue = document.getElementById('output-time');\r\n const outputDurationValue = document.getElementById('output-duration');\r\n const outputButton = document.getElementById('output-button');\r\n const outputStopButton = document.getElementById('output-stop-button');\r\n const outptuStatusBar = document.getElementById('processing-status');\r\n\r\n const stepExponent = document.getElementById('step-exponent');\r\n const stepExponentValue = document.getElementById('step-exponent-value');\r\n const stepExponentInvertCheckbox = document.getElementById('step-exponent-invert-checkbox');\r\n\r\n var scale = 1;\r\n let matrix = [];\r\n var matrixSize = 8;\r\n var threshold = 128;\r\n var outputStartThreshold = -999;\r\n var outputEndThreshold = -999;\r\n var outputStartWeight = -999;\r\n var outputEndWeight = -999;\r\n var outputDuration = 100;\r\n var outputTime = 1000;\r\n var totalRenderCount = -1;\r\n var currentRenderIndex = -1;\r\n var weight = 1;\r\n var isColor = false;\r\n var isPrecisionPreview = true;\r\n let currentImage = null;\r\n var exponentValue = 1.0;\r\n var isExponentValueInvert = true;\r\n\r\n matrix = generateBayerMatrixRecursive(matrixSize);\r\n\r\n function showProcessing()\r\n {\r\n outptuStatusBar.classList.remove(`hidden`);\r\n }\r\n\r\n function hideProcessing()\r\n {\r\n outptuStatusBar.classList.add(`hidden`);\r\n }\r\n\r\n function updateProgress(percentage) {\r\n const progressBar = document.querySelector('#processing-status .bg-gradient-to-r');\r\n const progressText = document.querySelector('#processing-status span');\r\n \r\n \/\/ \u66f4\u65b0\u8fdb\u5ea6\u6761\u6837\u5f0f\r\n progressBar.style.width = percentage;\r\n \r\n \/\/ \u66f4\u65b0\u8fdb\u5ea6\u6587\u672c\r\n progressText.textContent = percentage;\r\n }\r\n\r\n submitSvgButton.addEventListener('click', function(){\r\n if (currentImage && currentImage.complete) {\r\n imageProcess(currentImage, scale, matrix, matrixSize, threshold, weight, true, true, isColor, isPrecisionPreview);\r\n }\r\n });\r\n\r\n stepExponent.addEventListener('input', function(){\r\n exponentValue = this.value;\r\n if (isExponentValueInvert) {\r\n stepExponentValue.textContent = '1 \/ ' + exponentValue;\r\n } else {\r\n stepExponentValue.textContent = '' + exponentValue;\r\n }\r\n });\r\n\r\n stepExponentInvertCheckbox.addEventListener('change', function(){\r\n isExponentValueInvert = (this.checked) ? true : false;\r\n if (isExponentValueInvert) {\r\n stepExponentValue.textContent = '1 \/ ' + exponentValue;\r\n } else {\r\n stepExponentValue.textContent = '' + exponentValue;\r\n }\r\n });\r\n\r\n outputButton.addEventListener('click',function(){\r\n if (outputStartThreshold == -999 || outputEndThreshold == -999 ||outputStartWeight == -999 ||outputEndWeight == -999) {\r\n alert(`\u81f3\u5c11\u6709\u4e00\u9879\u53c2\u6570\u672a\u586b\u5199\uff01`);\r\n return;\r\n }\r\n if (currentImage && currentImage.complete) {\r\n updateProgress(0);\r\n showProcessing();\r\n setTimeout(() => {\r\n gifProcess();\r\n }, 500);\r\n } else {\r\n alert(`\u5f53\u524d\u56fe\u7247\u4e0d\u53ef\u7528`);\r\n return;\r\n }\r\n });\r\n\r\n outputStopButton.addEventListener('click',function(){\r\n totalRenderCount = -1;\r\n });\r\n\r\n async function gifProcess()\r\n {\r\n const workerScriptElement = document.getElementById('worker-script');\r\n const workerCode = workerScriptElement.textContent;\r\n const blob = new Blob([workerCode], { type: 'application\/javascript' });\r\n const workerUrl = URL.createObjectURL(blob);\r\n totalRenderCount = Math.ceil(outputTime \/ outputDuration);\r\n if (totalRenderCount < 1) {\r\n return;\r\n }\r\n currentRenderIndex = 0;\r\n const gif = new GIF({\r\n workers: 2,\r\n quality: 10,\r\n \/\/workerScript: 'https:\/\/cdn.bootcdn.net\/ajax\/libs\/gif.js\/0.2.0\/gif.worker.js',\r\n workerScript: workerUrl,\r\n width: Math.floor(currentImage.width * scale),\r\n height: Math.floor(currentImage.height * scale),\r\n \/\/width: 16,\r\n \/\/height: 16,\r\n });\r\n gif.on('abort', () => {\r\n hideProcessing();\r\n console.log('\u751f\u6210\u5df2\u4e2d\u6b62');\r\n \/\/ \u6267\u884c\u6e05\u7406\u64cd\u4f5c\uff08\u5982\u9690\u85cf\u8fdb\u5ea6\u6761\uff09\r\n });\r\n var exponent = parseFloat((isExponentValueInvert) ? (1.0 \/ exponentValue) : (exponentValue));\r\n for (let i = 1; i < totalRenderCount + 1; i++) {\r\n const threshold = parseFloat(outputStartThreshold) + parseFloat((outputEndThreshold - outputStartThreshold) * ((i \/ totalRenderCount) ** exponent));\r\n const weight = parseFloat(outputStartWeight) + parseFloat((outputEndWeight - outputStartWeight) * ((i \/ totalRenderCount) ** exponent));\r\n \/\/console.log(`${exponent},${threshold},${weight}`);\r\n let image = imageProcess(currentImage, scale, matrix, matrixSize, threshold, weight, true, false, isColor, false);\r\n \/\/let image = bitmapCanvas;\r\n gif.addFrame(image,{\r\n delay: outputDuration,\r\n copy: true,\r\n });\r\n image.getContext('2d').clearRect(0, 0, image.width, image.height);\r\n currentRenderIndex++;\r\n updateProgress(100 * i \/ totalRenderCount);\r\n await new Promise(resolve => setTimeout(resolve));\r\n }\r\n if (totalRenderCount == -1) {\r\n gif.abort();\r\n gif.frames = [];\r\n URL.revokeObjectURL(workerUrl);\r\n currentRenderIndex = -1;\r\n return;\r\n }\r\n gif.on('finished', (blob) => {\r\n const url = URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = 'animation.gif';\r\n a.click();\r\n hideProcessing();\r\n URL.revokeObjectURL(url);\r\n URL.revokeObjectURL(workerUrl);\r\n currentRenderIndex = -1;\r\n });\r\n gif.on('error', e => {\r\n console.error('GIF\u751f\u6210\u9519\u8bef:', e);\r\n });\r\n gif.render();\r\n }\r\n\r\n outputDurationValue.addEventListener('change', function(){\r\n outputDuration = this.value;\r\n });\r\n\r\n outputTimeValue.addEventListener('change', function(){\r\n outputTime = this.value;\r\n });\r\n\r\n outputStartThresholdButton.addEventListener('click',function() {\r\n this.textContent = threshold;\r\n outputStartThreshold = threshold;\r\n });\r\n\r\n outputEndThresholdButton.addEventListener('click',function() {\r\n this.textContent = threshold;\r\n outputEndThreshold = threshold;\r\n });\r\n\r\n outputStartWeightButton.addEventListener('click',function() {\r\n this.textContent = weight;\r\n outputStartWeight = weight;\r\n });\r\n\r\n outputEndWeightButton.addEventListener('click',function() {\r\n this.textContent = weight;\r\n outputEndWeight = weight;\r\n });\r\n\r\n toggleOutputMenuButton.addEventListener('click',function(){\r\n const content = document.getElementById('output-menu');\r\n content.classList.toggle('max-h-0');\r\n content.classList.toggle('max-h-[500px]');\r\n content.classList.toggle('hidden');\r\n });\r\n\r\n scaleSlider.addEventListener('input', function(){\r\n scale = this.value \/ 100; \/\/ \u8f6c\u6362\u4e3a\u5c0f\u6570\r\n scaleValue.textContent = this.value;\r\n if (currentImage && currentImage.complete) {\r\n imagesResolutionValue.textContent = Math.floor(currentImage.width * scale)+'x'+Math.floor(currentImage.height * scale);\r\n }\r\n imageFresh();\r\n });\r\n \r\n matrixSizeSlider.addEventListener('input', function(){\r\n matrixSizeValue.textContent = (2 ** this.value)+'x'+(2 ** this.value);\r\n matrix = generateBayerMatrixRecursive(2 ** this.value);\r\n matrixSize = 2 ** this.value;\r\n imageFresh();\r\n });\r\n\r\n thresholdSlider.addEventListener('input', function(){\r\n thresholdValue.textContent = this.value;\r\n threshold = this.value;\r\n imageFresh();\r\n });\r\n\r\n weightSlider.addEventListener('input', function(){\r\n weightValue.textContent = this.value;\r\n weight = this.value;\r\n imageFresh();\r\n });\r\n\r\n colorCheckBox.addEventListener('change', function(){\r\n isColor = (this.checked) ? true : false;\r\n imageFresh();\r\n });\r\n\r\n precisionPreviewCheckBox.addEventListener('change', function(){\r\n isPrecisionPreview = (this.checked) ? true : false;\r\n imageFresh();\r\n });\r\n\r\n \/\/ bitmapCanvas.onclick = async function() {\r\n \/\/ \/\/ \u5c06Canvas\u5185\u5bb9\u8f6c\u6362\u4e3aBlob\u5bf9\u8c61\r\n \/\/ this.toBlob(async function(blob) {\r\n \/\/ if (blob) {\r\n \/\/ \/\/ \u521b\u5efa\u4e34\u65f6URL\r\n \/\/ const url = await URL.createObjectURL(blob);\r\n \/\/ window.open(url, '_blank');\r\n \r\n \/\/ \/\/ \u91ca\u653eURL\u5bf9\u8c61\uff0c\u907f\u514d\u5185\u5b58\u6cc4\u6f0f\r\n \/\/ setTimeout(() => URL.revokeObjectURL(url), 10000);\r\n \/\/ } else {\r\n \/\/ alert('\u65e0\u6cd5\u83b7\u53d6Canvas\u5185\u5bb9');\r\n \/\/ }\r\n \/\/ }, 'image\/png');\r\n \/\/ };\r\n\r\n bitmapCanvas.onclick = async function() {\r\n \/\/ \u5c06 Canvas \u5185\u5bb9\u8f6c\u6362\u4e3a Blob \u5bf9\u8c61\r\n this.toBlob(function(blob) {\r\n if (blob) {\r\n \/\/ \u521b\u5efa FileReader \u5bf9\u8c61\r\n const reader = new FileReader();\r\n \r\n \/\/ \u8bfb\u53d6 Blob \u4e3a DataURL\r\n reader.onloadend = function() {\r\n \/\/ \u521b\u5efa\u65b0\u7a97\u53e3\u5e76\u8bbe\u7f6e DataURL \u4e3a\u56fe\u7247\u6e90\r\n const newWindow = window.open('', '_blank');\r\n if (newWindow) {\r\n newWindow.document.write(`<img decoding=\"async\" src=\"${reader.result}\" alt=\"Canvas Image\" >`);\r\n newWindow.document.close();\r\n } else {\r\n alert('\u8bf7\u5141\u8bb8\u5f39\u51fa\u7a97\u53e3\u4ee5\u67e5\u770b\u56fe\u7247');\r\n }\r\n };\r\n \r\n \/\/ \u5f00\u59cb\u8bfb\u53d6 Blob\r\n reader.readAsDataURL(blob);\r\n } else {\r\n alert('\u65e0\u6cd5\u83b7\u53d6 Canvas \u5185\u5bb9');\r\n }\r\n }, 'image\/png');\r\n };\r\n\r\n submitButton.addEventListener('click', submit);\r\n function submit()\r\n {\r\n if (currentImage && currentImage.complete) {\r\n imageProcess(currentImage, scale, matrix, matrixSize, threshold, weight, false, false, isColor, false);\r\n }\r\n bitmapCanvas.toBlob(function(blob) {\r\n if (blob) {\r\n \/\/ \u521b\u5efa FileReader \u5bf9\u8c61\r\n const reader = new FileReader();\r\n \r\n \/\/ \u8bfb\u53d6 Blob \u4e3a DataURL\r\n reader.onloadend = function() {\r\n \/\/ \u521b\u5efa\u65b0\u7a97\u53e3\u5e76\u8bbe\u7f6e DataURL \u4e3a\u56fe\u7247\u6e90\r\n const newWindow = window.open('', '_blank');\r\n if (newWindow) {\r\n newWindow.document.write(`<img decoding=\"async\" src=\"${reader.result}\" alt=\"Canvas Image\" >`);\r\n newWindow.document.close();\r\n } else {\r\n alert('\u8bf7\u5141\u8bb8\u5f39\u51fa\u7a97\u53e3\u4ee5\u67e5\u770b\u56fe\u7247');\r\n }\r\n };\r\n \r\n \/\/ \u5f00\u59cb\u8bfb\u53d6 Blob\r\n reader.readAsDataURL(blob);\r\n } else {\r\n alert('\u65e0\u6cd5\u83b7\u53d6 Canvas \u5185\u5bb9');\r\n }\r\n }, 'image\/png');\r\n \/\/ alert(`\u88ab\u6309\u4e0b`);\r\n }\r\n\r\n \/\/ \u521d\u59cb\u5316\u62d6\u62fd\u533a\u57df\u6837\u5f0f\r\n function setupDragDrop() {\r\n dropImageUpload.addEventListener(\"dragover\", function(e) {\r\n e.preventDefault();\r\n this.querySelector('label').classList.add('border-primary');\r\n this.querySelector('label').classList.remove('border-neutral-200');\r\n });\r\n \r\n dropImageUpload.addEventListener(\"dragleave\", function(e) {\r\n e.preventDefault();\r\n this.querySelector('label').classList.remove('border-primary');\r\n this.querySelector('label').classList.add('border-neutral-200');\r\n });\r\n \r\n dropImageUpload.addEventListener(\"drop\", function(e) {\r\n e.preventDefault();\r\n this.querySelector('label').classList.remove('border-primary');\r\n this.querySelector('label').classList.add('border-neutral-200');\r\n \r\n if (e.dataTransfer.files.length) {\r\n addImage({ type: 'drop', dataTransfer: e.dataTransfer });\r\n }\r\n });\r\n }\r\n \r\n setupDragDrop();\r\n fileUpload.addEventListener('change', function(e) {\r\n addImage({ type: 'change', target: e.target});\r\n });\r\n \r\n \/* \u56fe\u7247\u6dfb\u52a0 *\/\r\n function addImage(e) \r\n {\r\n let file;\r\n if (e.type === 'drop') { \r\n file = e.dataTransfer.files[0];\r\n } else {\r\n file = e.target.files[0];\r\n }\r\n if (!file) return;\r\n if (!file.type.match('image.*')) {\r\n alert('\u8bf7\u4e0a\u4f20\u56fe\u7247\u6587\u4ef6\uff01');\r\n return;\r\n }\r\n fileName.textContent = file.name;\r\n fileName.classList.remove('hidden');\r\n \r\n \/\/ \u8bfb\u53d6\u5e76\u663e\u793a\u56fe\u7247\r\n const reader = new FileReader();\r\n reader.onload = function(e) {\r\n currentImage = new Image();\r\n currentImage.onload = function() {\r\n \/\/ \u56fe\u7247\u52a0\u8f7d\u5b8c\u6210\u540e\u5904\u7406\r\n imageFresh();\r\n imagesResolutionValue.textContent = (Math.floor(currentImage.width * scale))+'x'+(Math.floor(currentImage.height * scale));\r\n }\r\n currentImage.src = e.target.result;\r\n };\r\n reader.readAsDataURL(file);\r\n }\r\n\r\n \/* Bayer\u77e9\u9635\u751f\u6210 *\/\r\n function generateBayerMatrixRecursive(size) {\r\n if (size === 1 || size === 0) {\r\n return [[0]];\r\n }\r\n const halfSize = size \/ 2;\r\n const subMatrix = generateBayerMatrixRecursive(halfSize);\r\n const matrix = Array(size).fill().map(() => Array(size).fill(0)); \r\n for (let y = 0; y < halfSize; y++) {\r\n for (let x = 0; x < halfSize; x++) {\r\n const value = subMatrix[y][x];\r\n matrix[y][x] = 4 * value;\r\n matrix[y][x + halfSize] = 4 * value + 2;\r\n matrix[y + halfSize][x] = 4 * value + 3;\r\n matrix[y + halfSize][x + halfSize] = 4 * value + 1;\r\n }\r\n }\r\n return matrix;\r\n }\r\n\r\n function imageFresh()\r\n {\r\n if (currentImage && currentImage.complete) {\r\n imageProcess(currentImage, scale, matrix, matrixSize, threshold, weight, false, false, isColor, isPrecisionPreview);\r\n }\r\n }\r\n\r\n function svgGenerate(bitmapData, width, height)\r\n {\r\n const svg = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'svg');\r\n svg.setAttribute('width', width);\r\n svg.setAttribute('height', height);\r\n svg.setAttribute('viewBox', '0 0 '+width+' '+height);\r\n for (let y = 0; y < height; y++) {\r\n for (let x = 0; x < width; x++) {\r\n const index = (y * width + x) * 4;\r\n const pixel = bitmapData[y][x];\r\n const rect = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'rect');\r\n rect.setAttribute('x', x);\r\n rect.setAttribute('y', y);\r\n rect.setAttribute('width', 1);\r\n rect.setAttribute('height', 1);\r\n if (Array.isArray(pixel)) {\r\n \/\/ \u5f69\u8272\u50cf\u7d20\r\n \/\/ data[index] = pixel[0]; \/\/ R\r\n \/\/ data[index + 1] = pixel[1]; \/\/ G\r\n \/\/ data[index + 2] = pixel[2]; \/\/ B\r\n \/\/ data[index + 3] = 255; \/\/ A\r\n if (pixel[0] === 255 && pixel[1] === 0 && pixel[2] === 0)\r\n rect.setAttribute('fill', 'red');\r\n else if (pixel[0] === 255 && pixel[1] === 255 && pixel[2] === 0)\r\n rect.setAttribute('fill', 'yellow');\r\n else if (pixel[0] === 0 && pixel[1] === 255 && pixel[2] === 0)\r\n rect.setAttribute('fill', 'green');\r\n else if (pixel[0] === 255 && pixel[1] === 0 && pixel[2] === 0)\r\n rect.setAttribute('fill', 'aqua');\r\n else if (pixel[0] === 0 && pixel[1] === 0 && pixel[2] === 255)\r\n rect.setAttribute('fill', 'blue');\r\n else if (pixel[0] === 255 && pixel[1] === 0 && pixel[2] === 255)\r\n rect.setAttribute('fill', 'fuchsia');\r\n else if (pixel[0] === 255 && pixel[1] === 255 && pixel[2] === 255)\r\n rect.setAttribute('fill', 'white');\r\n else \r\n rect.setAttribute('fill', 'black');\r\n } else {\r\n if (pixel === 0) {\r\n rect.setAttribute('fill', 'black');\r\n } else {\r\n rect.setAttribute('fill', 'white');\r\n }\r\n }\r\n svg.appendChild(rect);\r\n }\r\n }\r\n const serializer = new XMLSerializer();\r\n const svgString = serializer.serializeToString(svg);\r\n const blob = new Blob([svgString], { type: 'image\/svg+xml' });\r\n console.log(blob);\r\n const url = URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.target = '_blank';\r\n a.download = 'pixel-art.svg';\r\n document.body.appendChild(a);\r\n a.click();\r\n document.body.removeChild(a);\r\n }\r\n\r\n \/* \u56fe\u50cf\u8f6c\u6362 *\/\r\n function imageProcess(image, scale, matrix, matrixSize, threshold, weight, isOutput, isSVG, isColored, isPrecisionPreview)\r\n {\r\n var width;\r\n var height;\r\n if (isPrecisionPreview) {\r\n const ret = bitmapContainer.getBoundingClientRect();\r\n width = Math.floor(ret.width);\r\n height = Math.floor(width \/ image.width * image.height);\r\n } else {\r\n width = Math.floor(image.width * scale);\r\n height = Math.floor(image.height * scale);\r\n }\r\n \r\n \/\/ \u6e05\u7a7a\u4e4b\u524d\u7684\u4f4d\u56fe\u6570\u636e\r\n const bitmapData = [];\r\n \r\n const canvas = document.createElement('canvas');\r\n const ctx = canvas.getContext('2d');\r\n \r\n\r\n canvas.width = width;\r\n canvas.height = height;\r\n\r\n ctx.drawImage(image, 0, 0, width, height);\r\n const imageData = ctx.getImageData(0, 0, width, height);\r\n const thresholdInt = parseInt(threshold);\r\n const data = imageData.data;\r\n \r\n for (let y = 0; y < height; y++) {\r\n const row = [];\r\n for (let x = 0; x < width; x++) {\r\n const index = (y * width + x) * 4;\r\n var matrixThreshold = 0;\r\n if (weight != 0) {\r\n const matrixX = x % matrixSize;\r\n const matrixY = y % matrixSize;\r\n const matrixValue = matrix[matrixY][matrixX];\r\n \/\/matrixThreshold += ((matrixValue + 0.5) \/ (matrixSize * matrixSize)) * 255 * weight - 1.5 * matrixSize * matrixSize;\r\n matrixThreshold += ((matrixValue + 0.5) \/ (matrixSize * matrixSize)) * 255 * weight;\r\n }\r\n matrixThreshold += thresholdInt;\r\n if (isColored) {\r\n const pixel = [];\r\n pixel[0] = (data[index] > (matrixThreshold \/ 2) ? 255 : 0);\r\n pixel[1] = (data[index + 1] > (matrixThreshold \/ 2) ? 255 : 0);\r\n pixel[2] = (data[index + 2] > (matrixThreshold \/ 2) ? 255 : 0);\r\n row.push(pixel);\r\n } else {\r\n const gray = Math.round(\r\n 0.299 * data[index] + \r\n 0.587 * data[index + 1] + \r\n 0.114 * data[index + 2]\r\n );\r\n row.push(gray > (matrixThreshold \/ 2) ? 255 : 0);\r\n }\r\n }\r\n bitmapData.push(row);\r\n }\r\n \r\n if (isOutput) {\r\n \/\/return bitmapData;\r\n if (isSVG)\r\n svgGenerate(bitmapData,width,height);\r\n else\r\n return outputImageData(bitmapData,width,height)\r\n } else {\r\n displayBitmap(bitmapData, width, height);\r\n }\r\n }\r\n \r\n function outputImageData(bitmapData, width, height) {\r\n\r\n const canvas = document.createElement('canvas');\r\n canvas.width = width;\r\n canvas.height = height;\r\n\r\n const ctx = canvas.getContext('2d');\r\n const imageData = ctx.createImageData(width, height);\r\n const data = imageData.data;\r\n \r\n \/\/ \u5c06\u4f4d\u56fe\u6570\u636e\u8f6c\u6362\u56de\u56fe\u50cf\u6570\u636e\r\n for (let y = 0; y < height; y++) {\r\n for (let x = 0; x < width; x++) {\r\n const index = (y * width + x) * 4;\r\n const pixel = bitmapData[y][x];\r\n \r\n if (Array.isArray(pixel)) {\r\n \/\/ \u5f69\u8272\u50cf\u7d20\r\n data[index] = pixel[0]; \/\/ R\r\n data[index + 1] = pixel[1]; \/\/ G\r\n data[index + 2] = pixel[2]; \/\/ B\r\n data[index + 3] = 255; \/\/ A\r\n } else {\r\n \/\/ \u7070\u5ea6\/\u4e8c\u503c\/\u534a\u8272\u8c03\u50cf\u7d20\r\n data[index] = pixel; \/\/ R\r\n data[index + 1] = pixel; \/\/ G\r\n data[index + 2] = pixel; \/\/ B\r\n data[index + 3] = 255; \/\/ A\r\n }\r\n }\r\n }\r\n \/\/ \u7ed8\u5236\u56fe\u50cf\r\n ctx.putImageData(imageData, 0, 0);\r\n return canvas;\r\n }\r\n\r\n \/\/ \u6784\u9020BMP\u4e8c\u8fdb\u5236\u6570\u636e\r\n function createBMPBuffer({ width, height, pixels ,isColored}) {\r\n \/\/ \u8ba1\u7b97\u6bcf\u884c\u5b57\u8282\u6570\uff08\u97004\u5b57\u8282\u5bf9\u9f50\uff09\r\n const bytesPerRow = Math.ceil(width * 3 \/ 4) * 4;\r\n const fileSize = 54 + bytesPerRow * height;\r\n\r\n \/\/ \u521b\u5efaArrayBuffer\r\n const buffer = new ArrayBuffer(fileSize);\r\n const view = new DataView(buffer);\r\n\r\n \/\/ 1. \u6587\u4ef6\u5934\uff0814\u5b57\u8282\uff09\r\n view.setUint16(0, 0x4D42, true); \/\/ BM\u6807\u8bc6\r\n view.setUint32(2, fileSize, true); \/\/ \u6587\u4ef6\u603b\u5927\u5c0f\r\n view.setUint32(10, 54, true); \/\/ \u6570\u636e\u504f\u79fb\u91cf\r\n\r\n \/\/ 2. \u4fe1\u606f\u5934\uff0840\u5b57\u8282\uff09\r\n view.setUint32(14, 40, true); \/\/ \u4fe1\u606f\u5934\u5927\u5c0f\r\n view.setInt32(18, width, true); \/\/ \u5bbd\u5ea6\r\n view.setInt32(22, height, true); \/\/ \u9ad8\u5ea6\r\n view.setUint16(26, 1, true); \/\/ \u989c\u8272\u5e73\u9762\u6570\r\n view.setUint16(28, 24, true); \/\/ \u6bcf\u50cf\u7d20\u4f4d\u6570\uff0824\u4f4dRGB\uff09\r\n view.setUint32(30, 0, true); \/\/ \u538b\u7f29\u65b9\u5f0f\uff08\u65e0\u538b\u7f29\uff09\r\n view.setUint32(34, bytesPerRow * height, true); \/\/ \u50cf\u7d20\u6570\u636e\u5927\u5c0f\r\n view.setUint32(38, 0, true); \/\/ \u6c34\u5e73\u5206\u8fa8\u7387\r\n view.setUint32(42, 0, true); \/\/ \u5782\u76f4\u5206\u8fa8\u7387\r\n view.setUint32(46, 0, true); \/\/ \u8c03\u8272\u677f\u989c\u8272\u6570\r\n view.setUint32(50, 0, true); \/\/ \u91cd\u8981\u989c\u8272\u6570\r\n\r\n \/\/ 3. \u50cf\u7d20\u6570\u636e\uff08BGR\u5012\u5e8f\u6392\u5217\uff09\r\n let offset = 54;\r\n \r\n if (isColored) {\r\n for (let y = height - 1; y >= 0; y--) { \/\/ BMP\u4ece\u4e0b\u5230\u4e0a\u5b58\u50a8\r\n for (let x = 0; x < width; x++) {\r\n const idx = (y * width + x) * 4;\r\n \/\/ RGB\u8f6cBGR\uff0c\u5e76\u5ffd\u7565Alpha\u901a\u9053\r\n view.setUint8(offset++, pixels[idx + 2]); \/\/ B\r\n view.setUint8(offset++, pixels[idx + 1]); \/\/ G\r\n view.setUint8(offset++, pixels[idx + 0]); \/\/ R\r\n }\r\n }\r\n } else {\r\n for (let y = height - 1; y >= 0; y--) { \/\/ BMP\u4ece\u4e0b\u5230\u4e0a\u5b58\u50a8\r\n for (let x = 0; x < width; x++) {\r\n const idx = (y * width + x) * 1;\r\n \/\/ RGB\u8f6cBGR\uff0c\u5e76\u5ffd\u7565Alpha\u901a\u9053\r\n view.setUint8(offset++, pixels[idx]); \/\/ B\r\n view.setUint8(offset++, pixels[idx]); \/\/ G\r\n view.setUint8(offset++, pixels[idx]); \/\/ R\r\n }\r\n }\r\n\r\n }\r\n \/\/ \u884c\u586b\u5145\uff08\u6bcf\u884c\u957f\u5ea6\u9700\u4e3a4\u7684\u500d\u6570\uff09\r\n for (let p = 0; p < (bytesPerRow - width * 3); p++) {\r\n view.setUint8(offset++, 0);\r\n }\r\n\r\n return buffer;\r\n }\r\n \r\n \/* \u56fe\u50cf\u663e\u793a *\/\r\n function displayBitmap(bitmapData, width, height) {\r\n \/\/ \u663e\u793acanvas\r\n bitmapCanvas.classList.remove('hidden');\r\n\r\n \/\/ \u8bbe\u7f6ecanvas\u5c3a\u5bf8\r\n bitmapCanvas.width = width;\r\n bitmapCanvas.height = height;\r\n \r\n\r\n const ctx = bitmapCanvas.getContext('2d');\r\n const imageData = ctx.createImageData(width, height);\r\n const data = imageData.data;\r\n \r\n \/\/ \u5c06\u4f4d\u56fe\u6570\u636e\u8f6c\u6362\u56de\u56fe\u50cf\u6570\u636e\r\n for (let y = 0; y < height; y++) {\r\n for (let x = 0; x < width; x++) {\r\n const index = (y * width + x) * 4;\r\n const pixel = bitmapData[y][x];\r\n \r\n if (Array.isArray(pixel)) {\r\n \/\/ \u5f69\u8272\u50cf\u7d20\r\n data[index] = pixel[0]; \/\/ R\r\n data[index + 1] = pixel[1]; \/\/ G\r\n data[index + 2] = pixel[2]; \/\/ B\r\n data[index + 3] = 255; \/\/ A\r\n } else {\r\n \/\/ \u7070\u5ea6\/\u4e8c\u503c\/\u534a\u8272\u8c03\u50cf\u7d20\r\n data[index] = pixel; \/\/ R\r\n data[index + 1] = pixel; \/\/ G\r\n data[index + 2] = pixel; \/\/ B\r\n data[index + 3] = 255; \/\/ A\r\n }\r\n }\r\n }\r\n \/\/ \u7ed8\u5236\u56fe\u50cf\r\n ctx.putImageData(imageData, 0, 0);\r\n }\r\n });\r\n <\/script>\r\n <script id=\"worker-script\" type=\"application\/worker\">\r\n (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){var NeuQuant=require(\".\/TypedNeuQuant.js\");var LZWEncoder=require(\".\/LZWEncoder.js\");function ByteArray(){this.page=-1;this.pages=[];this.newPage()}ByteArray.pageSize=4096;ByteArray.charMap={};for(var i=0;i<256;i++)ByteArray.charMap[i]=String.fromCharCode(i);ByteArray.prototype.newPage=function(){this.pages[++this.page]=new Uint8Array(ByteArray.pageSize);this.cursor=0};ByteArray.prototype.getData=function(){var rv=\"\";for(var p=0;p<this.pages.length;p++){for(var i=0;i<ByteArray.pageSize;i++){rv+=ByteArray.charMap[this.pages[p][i]]}}return rv};ByteArray.prototype.writeByte=function(val){if(this.cursor>=ByteArray.pageSize)this.newPage();this.pages[this.page][this.cursor++]=val};ByteArray.prototype.writeUTFBytes=function(string){for(var l=string.length,i=0;i<l;i++)this.writeByte(string.charCodeAt(i))};ByteArray.prototype.writeBytes=function(array,offset,length){for(var l=length||array.length,i=offset||0;i<l;i++)this.writeByte(array[i])};function GIFEncoder(width,height){this.width=~~width;this.height=~~height;this.transparent=null;this.transIndex=0;this.repeat=-1;this.delay=0;this.image=null;this.pixels=null;this.indexedPixels=null;this.colorDepth=null;this.colorTab=null;this.neuQuant=null;this.usedEntry=new Array;this.palSize=7;this.dispose=-1;this.firstFrame=true;this.sample=10;this.dither=false;this.globalPalette=false;this.out=new ByteArray}GIFEncoder.prototype.setDelay=function(milliseconds){this.delay=Math.round(milliseconds\/10)};GIFEncoder.prototype.setFrameRate=function(fps){this.delay=Math.round(100\/fps)};GIFEncoder.prototype.setDispose=function(disposalCode){if(disposalCode>=0)this.dispose=disposalCode};GIFEncoder.prototype.setRepeat=function(repeat){this.repeat=repeat};GIFEncoder.prototype.setTransparent=function(color){this.transparent=color};GIFEncoder.prototype.addFrame=function(imageData){this.image=imageData;this.colorTab=this.globalPalette&&this.globalPalette.slice?this.globalPalette:null;this.getImagePixels();this.analyzePixels();if(this.globalPalette===true)this.globalPalette=this.colorTab;if(this.firstFrame){this.writeLSD();this.writePalette();if(this.repeat>=0){this.writeNetscapeExt()}}this.writeGraphicCtrlExt();this.writeImageDesc();if(!this.firstFrame&&!this.globalPalette)this.writePalette();this.writePixels();this.firstFrame=false};GIFEncoder.prototype.finish=function(){this.out.writeByte(59)};GIFEncoder.prototype.setQuality=function(quality){if(quality<1)quality=1;this.sample=quality};GIFEncoder.prototype.setDither=function(dither){if(dither===true)dither=\"FloydSteinberg\";this.dither=dither};GIFEncoder.prototype.setGlobalPalette=function(palette){this.globalPalette=palette};GIFEncoder.prototype.getGlobalPalette=function(){return this.globalPalette&&this.globalPalette.slice&&this.globalPalette.slice(0)||this.globalPalette};GIFEncoder.prototype.writeHeader=function(){this.out.writeUTFBytes(\"GIF89a\")};GIFEncoder.prototype.analyzePixels=function(){if(!this.colorTab){this.neuQuant=new NeuQuant(this.pixels,this.sample);this.neuQuant.buildColormap();this.colorTab=this.neuQuant.getColormap()}if(this.dither){this.ditherPixels(this.dither.replace(\"-serpentine\",\"\"),this.dither.match(\/-serpentine\/)!==null)}else{this.indexPixels()}this.pixels=null;this.colorDepth=8;this.palSize=7;if(this.transparent!==null){this.transIndex=this.findClosest(this.transparent,true)}};GIFEncoder.prototype.indexPixels=function(imgq){var nPix=this.pixels.length\/3;this.indexedPixels=new Uint8Array(nPix);var k=0;for(var j=0;j<nPix;j++){var index=this.findClosestRGB(this.pixels[k++]&255,this.pixels[k++]&255,this.pixels[k++]&255);this.usedEntry[index]=true;this.indexedPixels[j]=index}};GIFEncoder.prototype.ditherPixels=function(kernel,serpentine){var kernels={FalseFloydSteinberg:[[3\/8,1,0],[3\/8,0,1],[2\/8,1,1]],FloydSteinberg:[[7\/16,1,0],[3\/16,-1,1],[5\/16,0,1],[1\/16,1,1]],Stucki:[[8\/42,1,0],[4\/42,2,0],[2\/42,-2,1],[4\/42,-1,1],[8\/42,0,1],[4\/42,1,1],[2\/42,2,1],[1\/42,-2,2],[2\/42,-1,2],[4\/42,0,2],[2\/42,1,2],[1\/42,2,2]],Atkinson:[[1\/8,1,0],[1\/8,2,0],[1\/8,-1,1],[1\/8,0,1],[1\/8,1,1],[1\/8,0,2]]};if(!kernel||!kernels[kernel]){throw\"Unknown dithering kernel: \"+kernel}var ds=kernels[kernel];var index=0,height=this.height,width=this.width,data=this.pixels;var direction=serpentine?-1:1;this.indexedPixels=new Uint8Array(this.pixels.length\/3);for(var y=0;y<height;y++){if(serpentine)direction=direction*-1;for(var x=direction==1?0:width-1,xend=direction==1?width:0;x!==xend;x+=direction){index=y*width+x;var idx=index*3;var r1=data[idx];var g1=data[idx+1];var b1=data[idx+2];idx=this.findClosestRGB(r1,g1,b1);this.usedEntry[idx]=true;this.indexedPixels[index]=idx;idx*=3;var r2=this.colorTab[idx];var g2=this.colorTab[idx+1];var b2=this.colorTab[idx+2];var er=r1-r2;var eg=g1-g2;var eb=b1-b2;for(var i=direction==1?0:ds.length-1,end=direction==1?ds.length:0;i!==end;i+=direction){var x1=ds[i][1];var y1=ds[i][2];if(x1+x>=0&&x1+x<width&&y1+y>=0&&y1+y<height){var d=ds[i][0];idx=index+x1+y1*width;idx*=3;data[idx]=Math.max(0,Math.min(255,data[idx]+er*d));data[idx+1]=Math.max(0,Math.min(255,data[idx+1]+eg*d));data[idx+2]=Math.max(0,Math.min(255,data[idx+2]+eb*d))}}}}};GIFEncoder.prototype.findClosest=function(c,used){return this.findClosestRGB((c&16711680)>>16,(c&65280)>>8,c&255,used)};GIFEncoder.prototype.findClosestRGB=function(r,g,b,used){if(this.colorTab===null)return-1;if(this.neuQuant&&!used){return this.neuQuant.lookupRGB(r,g,b)}var c=b|g<<8|r<<16;var minpos=0;var dmin=256*256*256;var len=this.colorTab.length;for(var i=0,index=0;i<len;index++){var dr=r-(this.colorTab[i++]&255);var dg=g-(this.colorTab[i++]&255);var db=b-(this.colorTab[i++]&255);var d=dr*dr+dg*dg+db*db;if((!used||this.usedEntry[index])&&d<dmin){dmin=d;minpos=index}}return minpos};GIFEncoder.prototype.getImagePixels=function(){var w=this.width;var h=this.height;this.pixels=new Uint8Array(w*h*3);var data=this.image;var srcPos=0;var count=0;for(var i=0;i<h;i++){for(var j=0;j<w;j++){this.pixels[count++]=data[srcPos++];this.pixels[count++]=data[srcPos++];this.pixels[count++]=data[srcPos++];srcPos++}}};GIFEncoder.prototype.writeGraphicCtrlExt=function(){this.out.writeByte(33);this.out.writeByte(249);this.out.writeByte(4);var transp,disp;if(this.transparent===null){transp=0;disp=0}else{transp=1;disp=2}if(this.dispose>=0){disp=dispose&7}disp<<=2;this.out.writeByte(0|disp|0|transp);this.writeShort(this.delay);this.out.writeByte(this.transIndex);this.out.writeByte(0)};GIFEncoder.prototype.writeImageDesc=function(){this.out.writeByte(44);this.writeShort(0);this.writeShort(0);this.writeShort(this.width);this.writeShort(this.height);if(this.firstFrame||this.globalPalette){this.out.writeByte(0)}else{this.out.writeByte(128|0|0|0|this.palSize)}};GIFEncoder.prototype.writeLSD=function(){this.writeShort(this.width);this.writeShort(this.height);this.out.writeByte(128|112|0|this.palSize);this.out.writeByte(0);this.out.writeByte(0)};GIFEncoder.prototype.writeNetscapeExt=function(){this.out.writeByte(33);this.out.writeByte(255);this.out.writeByte(11);this.out.writeUTFBytes(\"NETSCAPE2.0\");this.out.writeByte(3);this.out.writeByte(1);this.writeShort(this.repeat);this.out.writeByte(0)};GIFEncoder.prototype.writePalette=function(){this.out.writeBytes(this.colorTab);var n=3*256-this.colorTab.length;for(var i=0;i<n;i++)this.out.writeByte(0)};GIFEncoder.prototype.writeShort=function(pValue){this.out.writeByte(pValue&255);this.out.writeByte(pValue>>8&255)};GIFEncoder.prototype.writePixels=function(){var enc=new LZWEncoder(this.width,this.height,this.indexedPixels,this.colorDepth);enc.encode(this.out)};GIFEncoder.prototype.stream=function(){return this.out};module.exports=GIFEncoder},{\".\/LZWEncoder.js\":2,\".\/TypedNeuQuant.js\":3}],2:[function(require,module,exports){var EOF=-1;var BITS=12;var HSIZE=5003;var masks=[0,1,3,7,15,31,63,127,255,511,1023,2047,4095,8191,16383,32767,65535];function LZWEncoder(width,height,pixels,colorDepth){var initCodeSize=Math.max(2,colorDepth);var accum=new Uint8Array(256);var htab=new Int32Array(HSIZE);var codetab=new Int32Array(HSIZE);var cur_accum,cur_bits=0;var a_count;var free_ent=0;var maxcode;var clear_flg=false;var g_init_bits,ClearCode,EOFCode;function char_out(c,outs){accum[a_count++]=c;if(a_count>=254)flush_char(outs)}function cl_block(outs){cl_hash(HSIZE);free_ent=ClearCode+2;clear_flg=true;output(ClearCode,outs)}function cl_hash(hsize){for(var i=0;i<hsize;++i)htab[i]=-1}function compress(init_bits,outs){var fcode,c,i,ent,disp,hsize_reg,hshift;g_init_bits=init_bits;clear_flg=false;n_bits=g_init_bits;maxcode=MAXCODE(n_bits);ClearCode=1<<init_bits-1;EOFCode=ClearCode+1;free_ent=ClearCode+2;a_count=0;ent=nextPixel();hshift=0;for(fcode=HSIZE;fcode<65536;fcode*=2)++hshift;hshift=8-hshift;hsize_reg=HSIZE;cl_hash(hsize_reg);output(ClearCode,outs);outer_loop:while((c=nextPixel())!=EOF){fcode=(c<<BITS)+ent;i=c<<hshift^ent;if(htab[i]===fcode){ent=codetab[i];continue}else if(htab[i]>=0){disp=hsize_reg-i;if(i===0)disp=1;do{if((i-=disp)<0)i+=hsize_reg;if(htab[i]===fcode){ent=codetab[i];continue outer_loop}}while(htab[i]>=0)}output(ent,outs);ent=c;if(free_ent<1<<BITS){codetab[i]=free_ent++;htab[i]=fcode}else{cl_block(outs)}}output(ent,outs);output(EOFCode,outs)}function encode(outs){outs.writeByte(initCodeSize);remaining=width*height;curPixel=0;compress(initCodeSize+1,outs);outs.writeByte(0)}function flush_char(outs){if(a_count>0){outs.writeByte(a_count);outs.writeBytes(accum,0,a_count);a_count=0}}function MAXCODE(n_bits){return(1<<n_bits)-1}function nextPixel(){if(remaining===0)return EOF;--remaining;var pix=pixels[curPixel++];return pix&255}function output(code,outs){cur_accum&=masks[cur_bits];if(cur_bits>0)cur_accum|=code<<cur_bits;else cur_accum=code;cur_bits+=n_bits;while(cur_bits>=8){char_out(cur_accum&255,outs);cur_accum>>=8;cur_bits-=8}if(free_ent>maxcode||clear_flg){if(clear_flg){maxcode=MAXCODE(n_bits=g_init_bits);clear_flg=false}else{++n_bits;if(n_bits==BITS)maxcode=1<<BITS;else maxcode=MAXCODE(n_bits)}}if(code==EOFCode){while(cur_bits>0){char_out(cur_accum&255,outs);cur_accum>>=8;cur_bits-=8}flush_char(outs)}}this.encode=encode}module.exports=LZWEncoder},{}],3:[function(require,module,exports){var ncycles=100;var netsize=256;var maxnetpos=netsize-1;var netbiasshift=4;var intbiasshift=16;var intbias=1<<intbiasshift;var gammashift=10;var gamma=1<<gammashift;var betashift=10;var beta=intbias>>betashift;var betagamma=intbias<<gammashift-betashift;var initrad=netsize>>3;var radiusbiasshift=6;var radiusbias=1<<radiusbiasshift;var initradius=initrad*radiusbias;var radiusdec=30;var alphabiasshift=10;var initalpha=1<<alphabiasshift;var alphadec;var radbiasshift=8;var radbias=1<<radbiasshift;var alpharadbshift=alphabiasshift+radbiasshift;var alpharadbias=1<<alpharadbshift;var prime1=499;var prime2=491;var prime3=487;var prime4=503;var minpicturebytes=3*prime4;function NeuQuant(pixels,samplefac){var network;var netindex;var bias;var freq;var radpower;function init(){network=[];netindex=new Int32Array(256);bias=new Int32Array(netsize);freq=new Int32Array(netsize);radpower=new Int32Array(netsize>>3);var i,v;for(i=0;i<netsize;i++){v=(i<<netbiasshift+8)\/netsize;network[i]=new Float64Array([v,v,v,0]);freq[i]=intbias\/netsize;bias[i]=0}}function unbiasnet(){for(var i=0;i<netsize;i++){network[i][0]>>=netbiasshift;network[i][1]>>=netbiasshift;network[i][2]>>=netbiasshift;network[i][3]=i}}function altersingle(alpha,i,b,g,r){network[i][0]-=alpha*(network[i][0]-b)\/initalpha;network[i][1]-=alpha*(network[i][1]-g)\/initalpha;network[i][2]-=alpha*(network[i][2]-r)\/initalpha}function alterneigh(radius,i,b,g,r){var lo=Math.abs(i-radius);var hi=Math.min(i+radius,netsize);var j=i+1;var k=i-1;var m=1;var p,a;while(j<hi||k>lo){a=radpower[m++];if(j<hi){p=network[j++];p[0]-=a*(p[0]-b)\/alpharadbias;p[1]-=a*(p[1]-g)\/alpharadbias;p[2]-=a*(p[2]-r)\/alpharadbias}if(k>lo){p=network[k--];p[0]-=a*(p[0]-b)\/alpharadbias;p[1]-=a*(p[1]-g)\/alpharadbias;p[2]-=a*(p[2]-r)\/alpharadbias}}}function contest(b,g,r){var bestd=~(1<<31);var bestbiasd=bestd;var bestpos=-1;var bestbiaspos=bestpos;var i,n,dist,biasdist,betafreq;for(i=0;i<netsize;i++){n=network[i];dist=Math.abs(n[0]-b)+Math.abs(n[1]-g)+Math.abs(n[2]-r);if(dist<bestd){bestd=dist;bestpos=i}biasdist=dist-(bias[i]>>intbiasshift-netbiasshift);if(biasdist<bestbiasd){bestbiasd=biasdist;bestbiaspos=i}betafreq=freq[i]>>betashift;freq[i]-=betafreq;bias[i]+=betafreq<<gammashift}freq[bestpos]+=beta;bias[bestpos]-=betagamma;return bestbiaspos}function inxbuild(){var i,j,p,q,smallpos,smallval,previouscol=0,startpos=0;for(i=0;i<netsize;i++){p=network[i];smallpos=i;smallval=p[1];for(j=i+1;j<netsize;j++){q=network[j];if(q[1]<smallval){smallpos=j;smallval=q[1]}}q=network[smallpos];if(i!=smallpos){j=q[0];q[0]=p[0];p[0]=j;j=q[1];q[1]=p[1];p[1]=j;j=q[2];q[2]=p[2];p[2]=j;j=q[3];q[3]=p[3];p[3]=j}if(smallval!=previouscol){netindex[previouscol]=startpos+i>>1;for(j=previouscol+1;j<smallval;j++)netindex[j]=i;previouscol=smallval;startpos=i}}netindex[previouscol]=startpos+maxnetpos>>1;for(j=previouscol+1;j<256;j++)netindex[j]=maxnetpos}function inxsearch(b,g,r){var a,p,dist;var bestd=1e3;var best=-1;var i=netindex[g];var j=i-1;while(i<netsize||j>=0){if(i<netsize){p=network[i];dist=p[1]-g;if(dist>=bestd)i=netsize;else{i++;if(dist<0)dist=-dist;a=p[0]-b;if(a<0)a=-a;dist+=a;if(dist<bestd){a=p[2]-r;if(a<0)a=-a;dist+=a;if(dist<bestd){bestd=dist;best=p[3]}}}}if(j>=0){p=network[j];dist=g-p[1];if(dist>=bestd)j=-1;else{j--;if(dist<0)dist=-dist;a=p[0]-b;if(a<0)a=-a;dist+=a;if(dist<bestd){a=p[2]-r;if(a<0)a=-a;dist+=a;if(dist<bestd){bestd=dist;best=p[3]}}}}}return best}function learn(){var i;var lengthcount=pixels.length;var alphadec=30+(samplefac-1)\/3;var samplepixels=lengthcount\/(3*samplefac);var delta=~~(samplepixels\/ncycles);var alpha=initalpha;var radius=initradius;var rad=radius>>radiusbiasshift;if(rad<=1)rad=0;for(i=0;i<rad;i++)radpower[i]=alpha*((rad*rad-i*i)*radbias\/(rad*rad));var step;if(lengthcount<minpicturebytes){samplefac=1;step=3}else if(lengthcount%prime1!==0){step=3*prime1}else if(lengthcount%prime2!==0){step=3*prime2}else if(lengthcount%prime3!==0){step=3*prime3}else{step=3*prime4}var b,g,r,j;var pix=0;i=0;while(i<samplepixels){b=(pixels[pix]&255)<<netbiasshift;g=(pixels[pix+1]&255)<<netbiasshift;r=(pixels[pix+2]&255)<<netbiasshift;j=contest(b,g,r);altersingle(alpha,j,b,g,r);if(rad!==0)alterneigh(rad,j,b,g,r);pix+=step;if(pix>=lengthcount)pix-=lengthcount;i++;if(delta===0)delta=1;if(i%delta===0){alpha-=alpha\/alphadec;radius-=radius\/radiusdec;rad=radius>>radiusbiasshift;if(rad<=1)rad=0;for(j=0;j<rad;j++)radpower[j]=alpha*((rad*rad-j*j)*radbias\/(rad*rad))}}}function buildColormap(){init();learn();unbiasnet();inxbuild()}this.buildColormap=buildColormap;function getColormap(){var map=[];var index=[];for(var i=0;i<netsize;i++)index[network[i][3]]=i;var k=0;for(var l=0;l<netsize;l++){var j=index[l];map[k++]=network[j][0];map[k++]=network[j][1];map[k++]=network[j][2]}return map}this.getColormap=getColormap;this.lookupRGB=inxsearch}module.exports=NeuQuant},{}],4:[function(require,module,exports){var GIFEncoder,renderFrame;GIFEncoder=require(\".\/GIFEncoder.js\");renderFrame=function(frame){var encoder,page,stream,transfer;encoder=new GIFEncoder(frame.width,frame.height);if(frame.index===0){encoder.writeHeader()}else{encoder.firstFrame=false}encoder.setTransparent(frame.transparent);encoder.setRepeat(frame.repeat);encoder.setDelay(frame.delay);encoder.setQuality(frame.quality);encoder.setDither(frame.dither);encoder.setGlobalPalette(frame.globalPalette);encoder.addFrame(frame.data);if(frame.last){encoder.finish()}if(frame.globalPalette===true){frame.globalPalette=encoder.getGlobalPalette()}stream=encoder.stream();frame.data=stream.pages;frame.cursor=stream.cursor;frame.pageSize=stream.constructor.pageSize;if(frame.canTransfer){transfer=function(){var i,len,ref,results;ref=frame.data;results=[];for(i=0,len=ref.length;i<len;i++){page=ref[i];results.push(page.buffer)}return results}();return self.postMessage(frame,transfer)}else{return self.postMessage(frame)}};self.onmessage=function(event){return renderFrame(event.data)}},{\".\/GIFEncoder.js\":1}]},{},[4]);\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">\u4f7f\u7528\u6307\u5357<\/h2>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">\u5f69\u8272<\/h3>\r\n\r\n\r\n\r\n<p>\u542f\u7528\u540e\u56fe\u50cf\u5c06\u4ee5\u5f69\u8272\u8f93\u51fa\uff0c\u8f93\u51fa\u7684\u989c\u8272\u6709\u516b\u79cd\uff1a<br><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-black-color\">\u9ed1\u8272<\/mark>\uff08#000000\uff09<br><mark style=\"background-color:rgba(0, 0, 0, 0);color:#ff00ff\" class=\"has-inline-color\">\u7c89\u8272<\/mark>\uff08#FF00FF\uff09<br><mark style=\"background-color:rgba(0, 0, 0, 0);color:#ff0000\" class=\"has-inline-color\">\u7ea2\u8272<\/mark>\uff08#FF0000\uff09<br><mark style=\"background-color:rgba(0, 0, 0, 0);color:#ffff00\" class=\"has-inline-color\">\u9ec4\u8272<\/mark>\uff08#FFFF00\uff09<br><mark style=\"background-color:rgba(0, 0, 0, 0);color:#00ff00\" class=\"has-inline-color\">\u7eff\u8272<\/mark>\uff08#00FF00\uff09<br><mark style=\"background-color:rgba(0, 0, 0, 0);color:#00ffff\" class=\"has-inline-color\">\u9752\u8272<\/mark>\uff08#00FFFF\uff09<br><mark style=\"background-color:rgba(0, 0, 0, 0);color:#0000ff\" class=\"has-inline-color\">\u84dd\u8272<\/mark>\uff08#0000FF\uff09<br><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-white-color\">\u767d\u8272<\/mark>\uff08#FFFFFF\uff09<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">\u70b9\u5bf9\u70b9\u663e\u793a<\/h3>\r\n\r\n\r\n\r\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">\u5f3a\u70c8\u5efa\u8bae\u5f00\u542f\uff08\u5982\u679c\u671f\u671b\u5bfc\u51fagif\u5efa\u8bae\u5173\u95ed\uff09<\/mark><br>\u542f\u7528\u540e\u56fe\u50cf\u4f1a\u88ab\u5f3a\u884c\u7f29\u653e\u4f7f\u5176\u4e0e\u663e\u793a\u5668\u7269\u7406\u50cf\u7d20\u5bf9\u9f50<br>\u70b9\u5bf9\u70b9\u4ec5\u9488\u5bf9\u9884\u89c8\u754c\u9762\uff0c\u4e0d\u4f1a\u5bf9\u56fe\u50cf\u8f93\u51fa\u9020\u6210\u5f71\u54cd<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Bayer\u77e9\u9635\u5c3a\u5bf8<\/h3>\r\n\r\n\r\n\r\n<p><-- \u7ec6\u8282\u51cf\u5c0f \u7ec6\u8282\u589e\u52a0 --><\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">\u9608\u503c<\/h3>\r\n\r\n\r\n\r\n<p><-- \u4eae\u5ea6\u589e\u52a0 \u4eae\u5ea6\u964d\u4f4e --><\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">\u6743\u91cd<\/h3>\r\n\r\n\r\n\r\n<p><-- \u5bf9\u6bd4\u5ea6\u589e\u52a0 \u5bf9\u6bd4\u5ea6\u51cf\u5c0f --><br><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-amber-color\">\u6743\u91cd\u51cf\u4e3a0\u5373\u4e3a\u4e8c\u503c\u5316<\/mark><\/strong><\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">GIF\u5bfc\u51fa<\/h3>\r\n\r\n\r\n\r\n<p>GIF\u5bfc\u51fa\u64cd\u4f5c\u88ab\u9690\u85cf\uff0c\u9700\u8981\u70b9\u51fb \u5c55\u5f00\/\u6298\u53e0 \u6309\u94ae<\/p>\r\n\r\n\r\n\r\n<p>\u5bfc\u51fa\u754c\u9762\u603b\u5171\u6709\u516d\u4e2a\u53c2\u6570\u9700\u8981\u8c03\u6574<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>\u8d77\u59cb\u5e27\u9608\u503c<\/li>\r\n\r\n\r\n\r\n<li>\u7ed3\u5c3e\u5e27\u9608\u503c<\/li>\r\n\r\n\r\n\r\n<li>\u8d77\u59cb\u5e27\u6743\u91cd<\/li>\r\n\r\n\r\n\r\n<li>\u7ed3\u5c3e\u5e27\u6743\u91cd<\/li>\r\n\r\n\r\n\r\n<li>\u8bbe\u7f6eGIF\u6bcf\u5e27\u95f4\u9694<\/li>\r\n\r\n\r\n\r\n<li>\u8bbe\u7f6eGIF\u52a8\u753b\u603b\u64ad\u653e\u65f6\u957f<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>\u5176\u4e2d\uff0c\u524d\u56db\u4e2a\u7684\u8bbe\u7f6e\u65b9\u5f0f\u662f\u70b9\u51fb\u540e\u5c06\u5f53\u524d\u72b6\u6001\u5bfc\u5165\uff0c\u82e5\u9700\u4fee\u6539\u5219\u9700\u8981\u62d6\u52a8\u4e0a\u65b9\u9608\u503c\/\u6743\u91cd\u8fdb\u5ea6\u6761<\/p>\r\n\r\n\r\n\r\n<p>\u540e\u4e24\u4e2a\u8bbe\u7f6e\u9700\u8981\u624b\u52a8\u8f93\u5165\uff0c\u5355\u4f4d\u6beb\u79d2<\/p>\r\n\r\n\r\n\r\n<p>\u5982\u679c\u9047\u5230\u5e27\u6570\u65e0\u6cd5\u6574\u9664\u7684\u60c5\u51b5\uff08\u64ad\u653e\u65f6\u957f\u4e0e\u95f4\u9694\u76f8\u9664\u7ed3\u679c\u4e0d\u4e3a\u6574\u6570\uff09\uff0c\u5219\u81ea\u52a8\u653e\u5f03\u6700\u540e\u4e00\u5e27<\/p>\r\n\r\n\r\n\r\n<p><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>\u4e0d\u719f\u6089\u5982\u4f55\u4f7f\u7528\u8bf7\u8f6c\u5230\u9875\u5c3e Dithering 60% \u505c\u6b62 \u9009\u62e9\u56fe\u7247 \u70b9\u51fb\u4e0a\u4f20\u56fe\u7247 \u6216\u62d6\u653e\u81f3\u6b64\u5904 \u652f\u6301 PNG, JPG, Web …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"emotion":"","emotion_color":"","title_style":"","license":"","footnotes":""},"categories":[17],"tags":[],"class_list":["post-241","post","type-post","status-publish","format-standard","hentry","category-tools"],"_links":{"self":[{"href":"https:\/\/yin.nnneri.me\/index.php?rest_route=\/wp\/v2\/posts\/241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yin.nnneri.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yin.nnneri.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yin.nnneri.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yin.nnneri.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=241"}],"version-history":[{"count":32,"href":"https:\/\/yin.nnneri.me\/index.php?rest_route=\/wp\/v2\/posts\/241\/revisions"}],"predecessor-version":[{"id":388,"href":"https:\/\/yin.nnneri.me\/index.php?rest_route=\/wp\/v2\/posts\/241\/revisions\/388"}],"wp:attachment":[{"href":"https:\/\/yin.nnneri.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yin.nnneri.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yin.nnneri.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}