☰

Reverse TinEye Image Search

Dragging any image allows you to do a TinEye image search.

  1. // ==UserScript==
  2. // @name        Reverse TinEye Image Search
  3. // @namespace   AmineKudo
  4. // @description Dragging any image allows you to do a TinEye image search.
  5. // @include     *
  6. // @exclude     *www.google.*/imghp*
  7. // @exclude     *www.google.*/search?*site=imghp&*
  8. // @exclude     *www.google.*/search?tbs=sbi:*
  9. // @grant       none
  10. // @version     1.00
  11. // ==/UserScript==
  12.  
  13. if (!document || !document.body || top !== self) return;
  14.  
  15. /*=============*\
  16. |*  CONSTANTS  *|
  17. \*=============*/
  18. var CONSTANT = {
  19.     incorrectTimeout: 2000,      //Milliseconds
  20. };
  21.  
  22. var EL = {
  23.     body:       document.body,
  24.     head:       document.getElementsByTagName('head')[0],
  25.     zone:       null,       //Set later
  26.     form:       null,       //Set later
  27.     message:    null,       //Set later
  28. };
  29.  
  30. var VAR = {
  31.     dragImgSrc:    null,    //String
  32.     dontHide:      false,   //Bool
  33.     draggedOver:   false,   //Bool
  34. };
  35.  
  36. var MESSAGE = {
  37.     drop:       "Drop image here!",
  38.     incorrect:  "This is not a valid image.",
  39.     oldBrowser: "You browser is too old and cannot use FileReader HTML5 API, please uninstall this userscript",
  40. };
  41.  
  42. var URL = {
  43.     imageSearch:    "https://www.tineye.com/search?url=",
  44.     formSearch:     "https://www.tineye.com/search",
  45. };
  46.  
  47. /*=============*\
  48. |*   CHECKS    *|
  49. \*=============*/
  50. if(!window.FileReader) {
  51.     alert(MESSAGE.oldBrowser);
  52.     return;
  53. }
  54.  
  55. /*=============*\
  56. |*  FUNCTIONS  *|
  57. \*=============*/
  58. function getId(id) {
  59.     return document.getElementById(id);
  60. }
  61.  
  62. function createEl(elementName, id /*optional*/, attrArr /*optional*/) {
  63.     var el = document.createElement(elementName);
  64.     if (id) {
  65.         el.id = id;
  66.     }
  67.     if (attrArr) {
  68.         try{
  69.         for (var attr in attrArr) {
  70.             el.setAttribute(attr, attrArr[attr]);
  71.         }
  72.         }catch(e){alert("Attributes are set wrong: "+e);}
  73.     }
  74.     return el;
  75. }
  76.  
  77. function fileNameFromFileUrl (url) {
  78.     var index = url.lastIndexOf("/");
  79.     if (index == -1) {return url;}
  80.     return url.substr(index + 1);
  81. }
  82.  
  83. function fixDataUrl(dataURL) {
  84.     return dataURL.substr(dataURL.indexOf(",") + 1)
  85.                   .replace(/\//gm, "_").replace(/\+/gm, "-");
  86. }
  87.  
  88.  
  89. /*=============*\
  90. |*    HTML     *|
  91. \*=============*/
  92. function addDropZone() {
  93.     EL.zone = createEl("div", "userscripts-dropzone");
  94.     EL.body.appendChild(EL.zone);
  95.     
  96.     EL.message = createEl("div", "userscripts-dropzone-message");
  97.     EL.zone.appendChild(EL.message);
  98.     attachDragEvents(false);
  99. }
  100.  
  101. /*=============*\
  102. |*     CSS     *|
  103. \*=============*/
  104. (function(){
  105.     var CSS = {
  106.             "#userscripts-dropzone" : {
  107.                 "margin" : "0",
  108.                 "height" : "50px",
  109.                 "width" : "100%",
  110.                 "-webkit-user-select" : "none",
  111.                 "-moz-user-select" : "none",
  112.                 "user-select" : "none",
  113.                 "position" : "fixed",
  114.                 "top" : "-140px",
  115.                 "left" : "0px",
  116.                 "background" : "#f0f0f0",
  117.                 "box-shadow" : "0 0px 10px rgba(0,0,0,0.8)",
  118.                 "box-sizing" : "border-box",
  119.                 "-webkit-box-sizing" : "border-box",
  120.                 "-moz-box-sizing" : "border-box",
  121.                 "z-index" : "10000000",
  122.                 "-moz-transition-property" : "top",
  123.                 "-moz-transition-duration" : "0.2s",
  124.                 "-moz-transition-timing-function" : "ease-out",
  125.                 "-webkit-transition-property" : "top",
  126.                 "-webkit-transition-duration" : "0.2s",
  127.                 "-webkit-transition-timing-function" : "ease-out",
  128.                 "transition-property" : "top",
  129.                 "transition-duration" : "0.2s",
  130.                 "transition-timing-function" : "ease-out",
  131.             },
  132.             "#userscripts-dropzone.show" : {
  133.                 "top"     : "0px",
  134.             },
  135.             "#userscripts-dropzone-message": {
  136.                 "text-align" : "center",
  137.                 "font-size" : "18px !important",
  138.                 "font-weight" : "bold !important",
  139.                 "font-family" : "Arial, san-serif !important",
  140.                 "color" : "black !important",
  141.                 "padding" : "15px",
  142.             },
  143.         },
  144.         cssString = "",
  145.         propString = "",
  146.         eachSelector = "",
  147.         style = createEl("style");
  148.     for(var selector in CSS) {
  149.         eachSelector = CSS[selector];
  150.         propString = "";
  151.         for(var property in eachSelector) {
  152.             propString += property + ":" + eachSelector[property] + ";";
  153.         }
  154.         cssString += selector + "{" + propString + "}";
  155.     }
  156.     style.appendChild(document.createTextNode(cssString));
  157.     EL.head.appendChild(style);
  158. })();
  159.  
  160. /*=============*\
  161. |*  FUNCTIONS  *|
  162. \*=============*/
  163.  
  164. function openSearchUrl(url) {
  165.     var fileName = fileNameFromFileUrl(url);
  166.     
  167.     // Check if real file
  168.     if (fileName.indexOf(".") === -1) {
  169.         displayIncorrectFile();
  170.         return;
  171.     }
  172.     var tehUrl = URL.imageSearch + escape(url);
  173.     window.open(tehUrl, "_blank");
  174.     hide();
  175. }
  176.  
  177. function displayIncorrectFile() {
  178.     VAR.dontHide = true;
  179.     EL.message.innerHTML = MESSAGE.incorrect;
  180.     setTimeout(function(){
  181.         VAR.dontHide = false;
  182.         hide();
  183.     }, CONSTANT.incorrectTimeout);
  184. }
  185.  
  186. function processDrop(event) {
  187. try{
  188.     var dt = event.dataTransfer,
  189.         link = dt.getData("Text"),
  190.         imgUrl = VAR.dragImgSrc,
  191.         files = dt.files,
  192.         file = null,
  193.         i = 0;
  194.         
  195.     if (imgUrl != null) {
  196.         clearImageSource();
  197.         openSearchUrl(imgUrl);
  198.     } else if (link != "") {
  199.         console.log(link)
  200.         openSearchUrl(link);
  201.     } else if (files.length > 0) {
  202.         for (; i < files.length; i++) {
  203.             file = files[i];
  204.             var reader = new FileReader();
  205.             reader.file = file;
  206.             reader.addEventListener("loadend", processFile, false);
  207.             try {
  208.                 reader.readAsDataURL(file);
  209.             }catch(error) {
  210.                 displayIncorrectFile();
  211.                 if (console && console.log) {
  212.                     console.log(error);
  213.                 }
  214.             }
  215.         }
  216.     } else {
  217.         displayIncorrectFile();
  218.         if (console && console.log) {
  219.             console.log("Not an image",event);
  220.         }
  221.     }
  222.     stopBrowser(event);
  223. }catch(e){alert(e)}
  224. }
  225.  
  226. function processFile(event) {
  227.     event.currentTarget.removeEventListener('loadend', processFile, false);
  228.     if (this.result == "") {    
  229.         displayIncorrectFile();
  230.         return;
  231.     }
  232.     var dataUrl = fixDataUrl(this.result),
  233.         fileName = this.file.name;
  234.         
  235.     setImageForm(dataUrl, fileName);
  236.     EL.form.submit();
  237.     hide();
  238.     this.file = null;
  239.     setImageForm("", "");
  240.     
  241.     // Fixes Chrome's form searching
  242.     var counter = parseInt(EL.form.getAttribute('counter')) + 1;
  243.     EL.form.setAttribute('counter', counter);
  244.     EL.form.action = EL.form.getAttribute('origAction') + counter;
  245. }
  246.  
  247. function setImageForm(dataUrl, fileName) {
  248.     if (EL.form) {
  249.         getId('userscripts-form-data-url').setAttribute('value', dataUrl);
  250.         getId('userscripts-form-filename').setAttribute('value', fileName);
  251.         return;
  252.     }
  253.     EL.form = createEl("form", "userscripts-form-image-search", {
  254.                     enctype:    'multipart/form-data',
  255.                     method:     'POST',
  256.                     target:     '_blank',
  257.                     action:     (URL.formSearch + '?d=0'),
  258.                     origAction: (URL.formSearch + '?d'),
  259.                     counter:    0,
  260.                 });
  261.     var field1 = createEl("input", 'userscripts-form-data-url', {
  262.                     type:       'hidden',
  263.                     name:       'image',
  264.                     value:      dataUrl
  265.                 }),
  266.         field2 = createEl("input", null, {
  267.                     type:       'hidden',
  268.                     name:       'btnG',
  269.                     value:      'Search'
  270.                 }),
  271.         field3 = createEl("input", 'userscripts-form-filename', {
  272.                     type:       'hidden',
  273.                     name:       'filename',
  274.                     value:      fileName
  275.                 }),
  276.         field4 = createEl("input", null, {
  277.                     type:       'hidden',
  278.                     name:       'hl',
  279.                     value:      'en'
  280.                 });
  281.     EL.form.appendChild(field1);
  282.     EL.form.appendChild(field2);
  283.     EL.form.appendChild(field3);
  284.     EL.form.appendChild(field4);
  285.     EL.zone.appendChild(EL.form);
  286. }
  287.  
  288. /*=============*\
  289. |*   EVENTS    *|
  290. \*=============*/
  291.  
  292. function detachDragEvents() {
  293.     document.removeEventListener("dragstart", processDragStart, false);
  294.     document.removeEventListener("dragenter", processDragEnter, false);
  295.     
  296.     document.addEventListener("dragend", clearImageSource, false);
  297.     document.addEventListener("mouseover", mouseMove, false);
  298.     EL.zone.addEventListener("dragover", dragOverZone, false);
  299.     EL.zone.addEventListener("dragleave", dragOutZone, false);
  300.     EL.zone.addEventListener("drop", processDrop, false);
  301. }
  302.  
  303. function attachDragEvents(shouldRemoveEvents) {
  304.     document.addEventListener("dragenter", processDragEnter, false);
  305.     document.addEventListener("dragstart", processDragStart, false);
  306.     
  307.     if (!shouldRemoveEvents) {
  308.         document.removeEventListener("dragend", clearImageSource, false);
  309.         document.removeEventListener("mouseover", mouseMove, false);
  310.         EL.zone.removeEventListener("dragover", dragOverZone, false);
  311.         EL.zone.removeEventListener("dragleave", dragOutZone, false);
  312.         EL.zone.removeEventListener("drop", processDrop, false);
  313.     }
  314. }
  315. function stopBrowser(evt) {
  316.     evt.stopPropagation();
  317.     evt.preventDefault();
  318. }
  319.  
  320. function dragOverZone(event){
  321.     VAR.draggedOver = true;
  322.     stopBrowser(event);
  323. }
  324.  
  325. function dragOutZone(event){    
  326.     VAR.draggedOver = false;
  327.     stopBrowser(event);
  328. }
  329.  
  330. function mouseMove(e) {
  331.     if (VAR.draggedOver) {
  332.         return;
  333.     }
  334.     if (EL.zone.className === "show") {
  335.         hide();
  336.     } else {
  337.         attachDragEvents();
  338.     }
  339. }
  340.  
  341. function processDragStart(event) {
  342.     var el = event.target;
  343.     if (el.tagName === "IMG") {
  344.         VAR.dragImgSrc = el.src;
  345.     } else {
  346.         var imgs = el.getElementsByTagName('img');
  347.         if (imgs.length > 0) {
  348.             VAR.dragImgSrc = imgs[0].src;
  349.         } else {
  350.             if (el.tagName !== "A" || el.getAttribute("href") == "") {
  351.                 detachDragEvents();
  352.                 return;
  353.             }
  354.         }
  355.     }
  356.     show();
  357. }
  358.  
  359. function processDragEnter(event) {
  360.     if (VAR.dragImgSrc != null || event.dataTransfer.getData('Text') == "") {
  361.         show();
  362.     } else {    
  363.         detachDragEvents();
  364.     }
  365. }
  366.  
  367. /*=============*\
  368. |*     MISC    *|
  369. \*=============*/
  370. function clearImageSource(event) {
  371.     VAR.dragImgSrc = null;
  372.     hide();
  373. }
  374.  
  375. function show() {
  376.     if (EL.zone.className === "show") {
  377.         return;
  378.     }
  379.     EL.message.innerHTML = MESSAGE.drop;
  380.     detachDragEvents();
  381.     EL.zone.className = "show";
  382. }
  383.  
  384. function hide() {
  385.     if (EL.zone.className === "") {
  386.         return;
  387.     }
  388.     attachDragEvents();
  389.     if (VAR.dontHide) {
  390.         return;
  391.     }
  392.     VAR.draggedOver = false;
  393.     EL.zone.className = "";
  394. }
  395.  
  396. /*=============*\
  397. |*    START    *|
  398. \*=============*/
  399. addDropZone();