From f3e06b8fcba0faf8ffe86e0d3277cb51cb71a636 Mon Sep 17 00:00:00 2001
From: liuzhihang <liuzhihangs@qq.com>
Date: Fri, 4 Nov 2022 23:26:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=BF=E6=8D=A2=20fast-average-color?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../fast-average-color/index.browser.min.js   |  2 +
 templates/assets/zhheo/blogex.js              | 72 +++++++++++--------
 templates/modules/layouts/layout.html         |  4 +-
 3 files changed, 49 insertions(+), 29 deletions(-)
 create mode 100644 templates/assets/libs/fast-average-color/index.browser.min.js

diff --git a/templates/assets/libs/fast-average-color/index.browser.min.js b/templates/assets/libs/fast-average-color/index.browser.min.js
new file mode 100644
index 00000000..506f0805
--- /dev/null
+++ b/templates/assets/libs/fast-average-color/index.browser.min.js
@@ -0,0 +1,2 @@
+/*! Fast Average Color | © 2022 Denis Seleznev | MIT License | https://github.com/fast-average-color/fast-average-color */
+!function(){"use strict";function t(t){var r=t.toString(16);return 1===r.length?"0"+r:r}function r(r){return"#"+r.map(t).join("")}function e(t){return t?(r=t,Array.isArray(r[0])?t:[t]):[];var r}function n(t,r,e){for(var n=0;n<e.length;n++)if(o(t,r,e[n]))return!0;return!1}function o(t,r,e){switch(e.length){case 3:if(function(t,r,e){if(255!==t[r+3])return!0;if(t[r]===e[0]&&t[r+1]===e[1]&&t[r+2]===e[2])return!0;return!1}(t,r,e))return!0;break;case 4:if(function(t,r,e){if(t[r+3]&&e[3])return t[r]===e[0]&&t[r+1]===e[1]&&t[r+2]===e[2]&&t[r+3]===e[3];return t[r+3]===e[3]}(t,r,e))return!0;break;case 5:if(function(t,r,e){var n=e[0],o=e[1],a=e[2],s=e[3],u=e[4],c=t[r+3],h=i(c,s,u);if(!s)return h;if(!c&&h)return!0;if(i(t[r],n,u)&&i(t[r+1],o,u)&&i(t[r+2],a,u)&&h)return!0;return!1}(t,r,e))return!0;break;default:return!1}}function i(t,r,e){return t>=r-e&&t<=r+e}function a(t,r,e){for(var o={},i=e.ignoredColor,a=e.step,s=[0,0,0,0,0],u=0;u<r;u+=a){var c=t[u],h=t[u+1],d=t[u+2],f=t[u+3];if(!i||!n(t,u,i)){var l=Math.round(c/24)+","+Math.round(h/24)+","+Math.round(d/24);o[l]?o[l]=[o[l][0]+c*f,o[l][1]+h*f,o[l][2]+d*f,o[l][3]+f,o[l][4]+1]:o[l]=[c*f,h*f,d*f,f,1],s[4]<o[l][4]&&(s=o[l])}}var g=s[0],v=s[1],p=s[2],m=s[3],C=s[4];return m?[Math.round(g/m),Math.round(v/m),Math.round(p/m),Math.round(m/C)]:e.defaultColor}function s(t,r,e){for(var o=0,i=0,a=0,s=0,u=0,c=e.ignoredColor,h=e.step,d=0;d<r;d+=h){var f=t[d+3],l=t[d]*f,g=t[d+1]*f,v=t[d+2]*f;c&&n(t,d,c)||(o+=l,i+=g,a+=v,s+=f,u++)}return s?[Math.round(o/s),Math.round(i/s),Math.round(a/s),Math.round(s/u)]:e.defaultColor}function u(t,r,e){for(var o=0,i=0,a=0,s=0,u=0,c=e.ignoredColor,h=e.step,d=0;d<r;d+=h){var f=t[d],l=t[d+1],g=t[d+2],v=t[d+3];c&&n(t,d,c)||(o+=f*f*v,i+=l*l*v,a+=g*g*v,s+=v,u++)}return s?[Math.round(Math.sqrt(o/s)),Math.round(Math.sqrt(i/s)),Math.round(Math.sqrt(a/s)),Math.round(s/u)]:e.defaultColor}function c(t){return h(t,"defaultColor",[0,0,0,0])}function h(t,r,e){return void 0===t[r]?e:t[r]}function d(t){if(l(t)){var r=t.naturalWidth,e=t.naturalHeight;return t.naturalWidth||-1===t.src.search(/\.svg(\?|$)/i)||(r=e=100),{width:r,height:e}}return function(t){return"undefined"!=typeof HTMLVideoElement&&t instanceof HTMLVideoElement}(t)?{width:t.videoWidth,height:t.videoHeight}:{width:t.width,height:t.height}}function f(t){return function(t){return"undefined"!=typeof HTMLCanvasElement&&t instanceof HTMLCanvasElement}(t)?"canvas":function(t){return"undefined"!=typeof OffscreenCanvas&&t instanceof OffscreenCanvas}(t)?"offscreencanvas":function(t){return"undefined"!=typeof ImageBitmap&&t instanceof ImageBitmap}(t)?"imagebitmap":t.src}function l(t){return"undefined"!=typeof HTMLImageElement&&t instanceof HTMLImageElement}var g="undefined"==typeof window;var v="FastAverageColor: ";function p(t,r,e){r||(console.error(v+t),e&&console.error(e))}function m(t){return Error(v+t)}var C=function(){function t(){this.canvas=null,this.ctx=null}return t.prototype.getColorAsync=function(t,r){if(!t)return Promise.reject(m("call .getColorAsync() without resource."));if("string"==typeof t){if("undefined"==typeof Image)return Promise.reject(m("resource as string is not supported in this environment"));var e=new Image;return e.crossOrigin=r&&r.crossOrigin||"",e.src=t,this.bindImageEvents(e,r)}if(l(t)&&!t.complete)return this.bindImageEvents(t,r);var n=this.getColor(t,r);return n.error?Promise.reject(n.error):Promise.resolve(n)},t.prototype.getColor=function(t,r){var e=c(r=r||{});if(!t)return p("call .getColor(null) without resource",r.silent),this.prepareResult(e);var n=function(t,r){var e,n=h(r,"left",0),o=h(r,"top",0),i=h(r,"width",t.width),a=h(r,"height",t.height),s=i,u=a;return"precision"===r.mode||(i>a?(e=i/a,s=100,u=Math.round(s/e)):(e=a/i,u=100,s=Math.round(u/e)),(s>i||u>a||s<10||u<10)&&(s=i,u=a)),{srcLeft:n,srcTop:o,srcWidth:i,srcHeight:a,destWidth:s,destHeight:u}}(d(t),r);if(!(n.srcWidth&&n.srcHeight&&n.destWidth&&n.destHeight))return p('incorrect sizes for resource "'.concat(f(t),'"'),r.silent),this.prepareResult(e);if(this.canvas||(this.canvas=g?new OffscreenCanvas(1,1):document.createElement("canvas")),!this.ctx&&(this.ctx=this.canvas.getContext&&this.canvas.getContext("2d"),!this.ctx))return p("Canvas Context 2D is not supported in this browser",r.silent),this.prepareResult(e);this.canvas.width=n.destWidth,this.canvas.height=n.destHeight;var o=e;try{this.ctx.clearRect(0,0,n.destWidth,n.destHeight),this.ctx.drawImage(t,n.srcLeft,n.srcTop,n.srcWidth,n.srcHeight,0,0,n.destWidth,n.destHeight);var i=this.ctx.getImageData(0,0,n.destWidth,n.destHeight).data;o=this.getColorFromArray4(i,r)}catch(e){p("security error (CORS) for resource ".concat(f(t),".\nDetails: https://developer.mozilla.org/en/docs/Web/HTML/CORS_enabled_image"),r.silent,e)}return this.prepareResult(o)},t.prototype.getColorFromArray4=function(t,r){r=r||{};var n=t.length,o=c(r);if(n<4)return o;var i,h=n-n%4,d=4*(r.step||1);switch(r.algorithm||"sqrt"){case"simple":i=s;break;case"sqrt":i=u;break;case"dominant":i=a;break;default:throw m("".concat(r.algorithm," is unknown algorithm"))}return i(t,h,{defaultColor:o,ignoredColor:e(r.ignoredColor),step:d})},t.prototype.prepareResult=function(t){var e,n=t.slice(0,3),o=[t[0],t[1],t[2],t[3]/255],i=(299*(e=t)[0]+587*e[1]+114*e[2])/1e3<128;return{value:[t[0],t[1],t[2],t[3]],rgb:"rgb("+n.join(",")+")",rgba:"rgba("+o.join(",")+")",hex:r(n),hexa:r(t),isDark:i,isLight:!i}},t.prototype.destroy=function(){this.canvas&&(this.canvas.width=1,this.canvas.height=1,this.canvas=null),this.ctx=null},t.prototype.bindImageEvents=function(t,r){var e=this;return new Promise((function(n,o){var i=function(){u();var i=e.getColor(t,r);i.error?o(i.error):n(i)},a=function(){u(),o(m('Error loading image "'.concat(t.src,'".')))},s=function(){u(),o(m('Image "'.concat(t.src,'" loading aborted')))},u=function(){t.removeEventListener("load",i),t.removeEventListener("error",a),t.removeEventListener("abort",s)};t.addEventListener("load",i),t.addEventListener("error",a),t.addEventListener("abort",s)}))},t}();("undefined"!=typeof window?window:self).FastAverageColor=C}();
\ No newline at end of file
diff --git a/templates/assets/zhheo/blogex.js b/templates/assets/zhheo/blogex.js
index 9cd3ec34..a098ed33 100644
--- a/templates/assets/zhheo/blogex.js
+++ b/templates/assets/zhheo/blogex.js
@@ -73,42 +73,58 @@ function coverColor() {
     let path = img.src;
     if (void 0 !== path) {
 
-        const colorThief = new ColorThief();
+        const fac = new FastAverageColor();
+
+        fac.getColorAsync(path)
+            .then(color => {
+                console.log('Average color', color);
+                loadColor(color);
+            })
+            .catch(e => {
+                console.log(e);
+                defaultColor();
+            });
+
+        // const colorThief = new ColorThief();
 
         // Make sure image is finished loading
-        if (img.complete) {
-            loadColor(colorThief.getColor(img));
-        } else {
-            img.addEventListener('load', function () {
-                loadColor(colorThief.getColor(img));
-            });
-        }
-
-
-        function loadColor(rgbColor) {
-
-            let hexColor = rgbToHex(rgbColor[0], rgbColor[1], rgbColor[2]);
-
-            if ("light" === getContrastYIQ(hexColor)) {
-                hexColor = LightenDarkenColor(colorHex(hexColor), -40);
-                document.styleSheets[0].addRule(":root", "--heo-main:" + hexColor + "!important");
-                document.styleSheets[0].addRule(":root", "--heo-main-op:" + hexColor + "23!important");
-                document.styleSheets[0].addRule(":root", "--heo-main-none:" + hexColor + "00!important");
-                heo.initThemeColor();
-                document.getElementById("coverdiv").classList.add("loaded");
-            }
-
-        }
+        // if (img.complete) {
+        //     loadColor(colorThief.getColor(img));
+        // } else {
+        //     img.addEventListener('load', function () {
+        //         loadColor(colorThief.getColor(img));
+        //     });
+        // }
 
 
     } else {
-        document.styleSheets[0].addRule(":root", "--heo-main: var(--heo-theme)!important");
-        document.styleSheets[0].addRule(":root", "--heo-main-op: var(--heo-theme-op)!important");
-        document.styleSheets[0].addRule(":root", "--heo-main-none: var(--heo-theme-none)!important");
-        heo.initThemeColor();
+        defaultColor();
     }
 }
 
+function defaultColor() {
+    document.styleSheets[0].addRule(":root", "--heo-main: var(--heo-theme)!important");
+    document.styleSheets[0].addRule(":root", "--heo-main-op: var(--heo-theme-op)!important");
+    document.styleSheets[0].addRule(":root", "--heo-main-none: var(--heo-theme-none)!important");
+    heo.initThemeColor();
+}
+
+function loadColor(color) {
+
+    let hexColor = color.hex;
+
+    if ("light" === getContrastYIQ(hexColor)) {
+        hexColor = LightenDarkenColor(colorHex(hexColor), -40);
+        document.styleSheets[0].addRule(":root", "--heo-main:" + hexColor + "!important");
+        document.styleSheets[0].addRule(":root", "--heo-main-op:" + hexColor + "23!important");
+        document.styleSheets[0].addRule(":root", "--heo-main-none:" + hexColor + "00!important");
+        heo.initThemeColor();
+        document.getElementById("coverdiv").classList.add("loaded");
+    }
+
+}
+
+
 function rgbToHex(r, g, b) {
     return '#' + [r, g, b].map(x => {
         const hex = x.toString(16)
diff --git a/templates/modules/layouts/layout.html b/templates/modules/layouts/layout.html
index 9fad4d89..c7211b37 100644
--- a/templates/modules/layouts/layout.html
+++ b/templates/modules/layouts/layout.html
@@ -66,7 +66,9 @@
     <script th:src="@{/assets/libs/waterfall/waterfall.min.js}"></script>
 
     <!-- 获取主色 https://lokeshdhakar.com/projects/color-thief/ -->
-    <script th:src="@{/assets/libs/color-thief/color-thief.umd.js}"></script>
+    <!--<script th:src="@{/assets/libs/color-thief/color-thief.umd.js}"></script>-->
+    <script th:src="@{/assets/libs/fast-average-color/index.browser.min.js}"></script>
+
 </div>
 
 <div>