search by img

by noromanba 2017-10-27 [2017/10/27 16:40:57]
(Forked from 画像検索 by amachang)

search similar images by image

@@ -12,18 +12,20 @@
 // c.f.
 // http://ptech.g.hatena.ne.jp/noromanba/20121114/1352977145
 (() => {
-    const attach = Array.from(ctx.querySelectorAll('img'), img => {
-        img.style.cursor = 'help';
+    const attach = (ctx) => {
+        Array.from(ctx.querySelectorAll('img'), img => {
+            img.style.cursor = 'help';
 
-        img.addEventListener('click', evt => {
-            // suppress click-handler and bubbling e.g. <a><img></a>;
-            evt.preventDefault();
-            evt.stopPropagation();
+            img.addEventListener('click', evt => {
+                // suppress click-handler and bubbling e.g. <a><img></a>;
+                evt.preventDefault();
+                evt.stopPropagation();
 
-            const imgurl = evt.target.src;
-            location.href = 'https://www.google.com/searchbyimage?image_url=' + encodeURIComponent(imgurl);
+                const imgurl = evt.target.src;
+                location.href = 'https://www.google.com/searchbyimage?image_url=' + encodeURIComponent(imgurl);
+            });
         });
-    });
+    };
     attach(document.body);
 
     new MutationObserver(records => {
@@ -31,7 +33,7 @@
             attach(record.target);
         });
     }).observe(document.body, { childList: true, subtree: true });
-)();
+})();
 
 // WIP
 // handle background-image url()

• /*
   * @title search by img
   * @description search similar images by image
   * @include http://*
   * @include https://*
   * @contributor amachang http://let.hatelabo.jp/amachang/let/gYC-xauujbmgLw (Fork of)
   * @author      noromanba http://let.hatelabo.jp/noromanba/let/gYC-yuC1yoHyZw
   * @license MIT License http://www.opensource.org/licenses/mit-license
   * @javascript_url
   */
  
  // c.f.
  // http://ptech.g.hatena.ne.jp/noromanba/20121114/1352977145
  (() => {
      const attach = (ctx) => {
          Array.from(ctx.querySelectorAll('img'), img => {
              img.style.cursor = 'help';
  
              img.addEventListener('click', evt => {
                  // suppress click-handler and bubbling e.g. <a><img></a>;
                  evt.preventDefault();
                  evt.stopPropagation();
  
                  const imgurl = evt.target.src;
                  location.href = 'https://www.google.com/searchbyimage?image_url=' + encodeURIComponent(imgurl);
              });
          });
      };
      attach(document.body);
  
      new MutationObserver(records => {
          records.forEach(record => {
              attach(record.target);
          });
      }).observe(document.body, { childList: true, subtree: true });
  })();
  
  // WIP
  // handle background-image url()
  /*
  Array.from(document.querySelectorAll('*'), node => {
    const bgImg = getComputedStyle(node).backgroundImage;
    if (bgImg && bgImg !== 'none') {
      return {node, bgImg};
    }
  }).filter(spec => !!spec).forEach(spec => {
    // handle multi-bgimg c.f.
    // http://let.hatelabo.jp/noromanba/let/hLHW67STx8oc
    Array(spec.bgImg).some(img => {
      const bgURL = (img.match(/^url\(['"]?(https?:.*)['"]?\)/) || [])[1];
      if (!bgURL) return;
      // TODO
      // attach(spec) / attach(spec.node, spec.bgURL)
    });
  });
  //*/
  
  

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。