search by img

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

search similar images by image

@@ -6,24 +6,50 @@
  * @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
- * @require
+ * @javascript_url
  */
 
-// TODO
-// - background-url image
+// c.f.
+// http://ptech.g.hatena.ne.jp/noromanba/20121114/1352977145
+(() => {
+    const attach = 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)
+  });
+});
+//*/
 
-// c.f. http://ptech.g.hatena.ne.jp/noromanba/20121114/1352977145
-Array.prototype.slice.call(document.querySelectorAll('img')).forEach(function (img) {
-    img.style.cursor = 'help';
-
-    img.addEventListener('click', function (evt) {
-        // event cancel, stop propagation. e.g. <a><img></a>, click-handlier
-        // c.f. https://developer.mozilla.org/en/docs/DOM/event.preventDefault
-        //      https://developer.mozilla.org/en/docs/DOM/event.stopPropagation
-        evt.preventDefault();
-        evt.stopPropagation();
-
-        var imgurl = evt.target.src;
-        location.href = 'https://www.google.com/searchbyimage?image_url=' + encodeURIComponent(imgurl);
-    }, false);
-});

• /*
   * @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 = 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 です。