☰

Commit: Interactive image diff

Adds an image diff control in place of a regular image comparison renderer on GitHub

2020-03-27 يوللانغان نەشرى. ئەڭ يېڭى نەشرىنى كۆرۈش.

  1. // ==UserScript==
  2. // @name         Commit: Interactive image diff
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2
  5. // @description  Adds an image diff control in place of a regular image comparison renderer on GitHub
  6. // @author       You
  7. // @match        https://render.githubusercontent.com/diff/img?*
  8. // @match        https://github.com/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     if (window.location.hostname === 'github.com') {
  16.         console.log("Commit: Interactive image diff");
  17.         let styleApplied = false;
  18.         const styleNode = document.createElement("style");
  19.         styleNode.innerHTML = `
  20. /*body.hasIframe .container-lg.new-discussion-timeline { max-width: initial; }*/
  21. .render-container[data-type='img'] { height: 700px !important; }
  22. `;
  23.         document.head.appendChild(styleNode);
  24.  
  25.         document.body.addEventListener('click', (ev) => {
  26.             let target = ev.target.closest('button');
  27.             if (!target || styleApplied) {
  28.                 return;
  29.             }
  30.             if (target.getAttribute('aria-label') == 'Display the rich diff') { // are we on milestones page
  31.                 styleApplied = true;
  32.                 document.body.classList.add('full-width'); // this is a built-in class on GH, but it is only on in PR review, not in commits
  33.  
  34.                 // click on all rich previews
  35.                 const buttons = document.querySelectorAll("[aria-label='Display the rich diff']");
  36.                 Array.from(buttons).forEach(button => {
  37.                     const mockedEvent = new MouseEvent('click', {
  38.                         bubbles: true,
  39.                         cancelable: true
  40.                     });
  41.                     button.dispatchEvent(mockedEvent);
  42.                 });
  43.             }
  44.         });
  45.  
  46.  
  47.         return;
  48.     }
  49.  
  50.     //pixelmatch
  51.     !function (t) { if ("object" == typeof exports && "undefined" != typeof module) module.exports = t(); else if ("function" == typeof define && define.amd) define([], t); else { ("undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : this).pixelmatch = t() } }(function () { return function () { return function t(e, n, r) { function o(i, u) { if (!n[i]) { if (!e[i]) { var a = "function" == typeof require && require; if (!u && a) return a(i, !0); if (f) return f(i, !0); var c = new Error("Cannot find module '" + i + "'"); throw c.code = "MODULE_NOT_FOUND", c } var l = n[i] = { exports: {} }; e[i][0].call(l.exports, function (t) { return o(e[i][1][t] || t) }, l, l.exports, t, e, n, r) } return n[i].exports } for (var f = "function" == typeof require && require, i = 0; i < r.length; i++)o(r[i]); return o } }()({ 1: [function (t, e, n) { "use strict"; e.exports = function (t, e, n, i, a, c) { if (!o(t) || !o(e) || n && !o(n)) throw new Error("Image data: Uint8Array, Uint8ClampedArray or Buffer expected."); if (t.length !== e.length || n && n.length !== t.length) throw new Error("Image sizes do not match."); if (t.length !== i * a * 4) throw new Error("Image data size does not match width/height."); c = Object.assign({}, r, c); const l = i * a, s = new Uint32Array(t.buffer, t.byteOffset, l), p = new Uint32Array(e.buffer, e.byteOffset, l); let m = !0; for (let t = 0; t < l; t++)if (s[t] !== p[t]) { m = !1; break } if (m) { if (n && !c.diffMask) for (let e = 0; e < l; e++)h(t, 4 * e, c.alpha, n); return 0 } const w = 35215 * c.threshold * c.threshold; let y = 0; const [M, g, x] = c.aaColor, [E, b, A] = c.diffColor; for (let r = 0; r < a; r++)for (let o = 0; o < i; o++) { const l = 4 * (r * i + o), s = u(t, e, l, l); s > w ? c.includeAA || !f(t, o, r, i, a, e) && !f(e, o, r, i, a, t) ? (n && d(n, l, E, b, A), y++) : n && !c.diffMask && d(n, l, M, g, x) : n && (c.diffMask || h(t, l, c.alpha, n)) } return y }; const r = { threshold: .1, includeAA: !1, alpha: .1, aaColor: [255, 255, 0], diffColor: [255, 0, 0], diffMask: !1 }; function o(t) { return ArrayBuffer.isView(t) && 1 === t.constructor.BYTES_PER_ELEMENT } function f(t, e, n, r, o, f) { const a = Math.max(e - 1, 0), c = Math.max(n - 1, 0), l = Math.min(e + 1, r - 1), s = Math.min(n + 1, o - 1), d = 4 * (n * r + e); let h, p, m, w, y = e === a || e === l || n === c || n === s ? 1 : 0, M = 0, g = 0; for (let o = a; o <= l; o++)for (let f = c; f <= s; f++) { if (o === e && f === n) continue; const i = u(t, t, d, 4 * (f * r + o), !0); if (0 === i) { if (++y > 2) return !1 } else i < M ? (M = i, h = o, p = f) : i > g && (g = i, m = o, w = f) } return 0 !== M && 0 !== g && (i(t, h, p, r, o) && i(f, h, p, r, o) || i(t, m, w, r, o) && i(f, m, w, r, o)) } function i(t, e, n, r, o) { const f = Math.max(e - 1, 0), i = Math.max(n - 1, 0), u = Math.min(e + 1, r - 1), a = Math.min(n + 1, o - 1), c = 4 * (n * r + e); let l = e === f || e === u || n === i || n === a ? 1 : 0; for (let o = f; o <= u; o++)for (let f = i; f <= a; f++) { if (o === e && f === n) continue; const i = 4 * (f * r + o); if (t[c] === t[i] && t[c + 1] === t[i + 1] && t[c + 2] === t[i + 2] && t[c + 3] === t[i + 3] && l++ , l > 2) return !0 } return !1 } function u(t, e, n, r, o) { let f = t[n + 0], i = t[n + 1], u = t[n + 2], d = t[n + 3], h = e[r + 0], p = e[r + 1], m = e[r + 2], w = e[r + 3]; if (d === w && f === h && i === p && u === m) return 0; d < 255 && (f = s(f, d /= 255), i = s(i, d), u = s(u, d)), w < 255 && (h = s(h, w /= 255), p = s(p, w), m = s(m, w)); const y = a(f, i, u) - a(h, p, m); if (o) return y; const M = c(f, i, u) - c(h, p, m), g = l(f, i, u) - l(h, p, m); return .5053 * y * y + .299 * M * M + .1957 * g * g } function a(t, e, n) { return .29889531 * t + .58662247 * e + .11448223 * n } function c(t, e, n) { return .59597799 * t - .2741761 * e - .32180189 * n } function l(t, e, n) { return .21147017 * t - .52261711 * e + .31114694 * n } function s(t, e) { return 255 + (t - 255) * e } function d(t, e, n, r, o) { t[e + 0] = n, t[e + 1] = r, t[e + 2] = o, t[e + 3] = 255 } function h(t, e, n, r) { const o = s(a(t[e + 0], t[e + 1], t[e + 2]), n * t[e + 3] / 255); d(r, e, o, o, o) } }, {}] }, {}, [1])(1) });
  52.  
  53.  
  54.  
  55.     function setMode(input, span) {
  56.         const pictures = document.querySelectorAll('.warpech-slider > *');
  57.  
  58.         switch (parseInt(input.value, 10)) {
  59.             case 3:
  60.                 span.innerHTML = 'Diff';
  61.                 pictures[0].style.display = 'none';
  62.                 pictures[1].style.display = 'none';
  63.                 pictures[2].style.display = 'block';
  64.                 break;
  65.  
  66.             case 2:
  67.                 span.innerHTML = 'Changed file';
  68.                 pictures[0].style.display = 'none';
  69.                 pictures[1].style.display = 'block';
  70.                 pictures[2].style.display = 'none';
  71.                 break;
  72.  
  73.             case 1:
  74.                 span.innerHTML = 'Original file';
  75.                 pictures[0].style.display = 'block';
  76.                 pictures[1].style.display = 'none';
  77.                 pictures[2].style.display = 'none';
  78.                 break;
  79.         }
  80.     }
  81.  
  82.     async function compareImages() {
  83.         const imgsMeta = document.querySelector("div[data-type='diff']");
  84.         const imgs = [
  85.             imgsMeta.getAttribute('data-file1'),
  86.             imgsMeta.getAttribute('data-file2')
  87.         ];
  88.         console.log("imgs", imgs);
  89.  
  90.         const label = document.createElement('label');
  91.         label.classList.add('warpech-sliderControl');
  92.         const input = document.createElement('input');
  93.         input.setAttribute('type', 'range');
  94.         input.setAttribute('min', '1');
  95.         input.setAttribute('max', '3');
  96.         input.setAttribute('value', '3');
  97.         input.addEventListener('input', (ev) => {
  98.             setMode(input, span);
  99.         });
  100.         const span = document.createElement('span');
  101.         label.appendChild(input);
  102.         label.appendChild(span);
  103.         document.body.appendChild(label);
  104.  
  105.         const sliderElem = document.createElement('div');
  106.         sliderElem.classList.add('warpech-slider');
  107.         document.body.appendChild(sliderElem);
  108.  
  109.         if (!imgs[0]) {
  110.             throw new Error("Too early! The image does not have the src attribute");
  111.         }
  112.  
  113.         const img1clone = document.createElement('img');
  114.         img1clone.setAttribute('src',imgs[0]);
  115.         sliderElem.appendChild(img1clone);
  116.  
  117.         const img2clone = document.createElement('img');
  118.         img2clone.setAttribute('src',imgs[1]);
  119.         sliderElem.appendChild(img2clone);
  120.  
  121.         const img1 = await fetchImage(imgs[0]);
  122.         const img2 = await fetchImage(imgs[1]);
  123.  
  124.         const { width: w, height: h } = img1;
  125.  
  126.         const ctx = context2d(w, h, 1);
  127.         ctx.drawImage(img1, 0, 0);
  128.         const data1 = ctx.getImageData(0, 0, w, h).data;
  129.         ctx.drawImage(img2, 0, 0);
  130.         const data2 = ctx.getImageData(0, 0, w, h).data;
  131.         const diff = ctx.createImageData(w, h);
  132.  
  133.         pixelmatch(data1, data2, diff.data, w, h, {});
  134.         ctx.putImageData(diff, 0, 0);
  135.  
  136.         sliderElem.appendChild(ctx.canvas)
  137.  
  138.         setMode(input, span);
  139.     }
  140.     function fetchImage(src) {
  141.         return new Promise((resolve, reject) => {
  142.             const image = new Image;
  143.             image.crossOrigin = "anonymous";
  144.             image.src = src;
  145.             image.onload = () => resolve(image);
  146.             image.onerror = reject;
  147.         });
  148.     }
  149.  
  150.     function context2d(width, height, dpi) {
  151.         if (dpi == null) dpi = devicePixelRatio;
  152.         var canvas = document.createElement("canvas");
  153.         canvas.width = width * dpi;
  154.         canvas.height = height * dpi;
  155.         // canvas.style.width = width + "px";
  156.         var context = canvas.getContext("2d");
  157.         context.scale(dpi, dpi);
  158.         return context;
  159.     }
  160.     const styleNode = document.createElement("style");
  161.     styleNode.innerHTML = `
  162. .render-shell {
  163. visibility: hidden;
  164. }
  165.  
  166. .warpech-sliderControl {
  167. display: flex;
  168. align-items: center;
  169. position: absolute;
  170. right: 0;
  171. z-index: 9;
  172. background: #eaf5ff;
  173. padding: 5px;
  174. border-radius: 0 0 0 5px;
  175. border-left: 1px solid rgba(27,31,35,.15);
  176. border-bottom: 1px solid rgba(27,31,35,.15);
  177. }
  178.  
  179. .warpech-sliderControl input {
  180. width: 100px;
  181. margin-right: 10px;
  182. }
  183.  
  184. .warpech-sliderControl span {
  185. width: 100px;
  186. overflow: hidden;
  187. }
  188.  
  189. .warpech-slider {
  190. position: relative;
  191. /*overflow: scroll;*/
  192. }
  193.  
  194. .warpech-slider img,
  195. .warpech-slider canvas {
  196. position: absolute;
  197. width: initial;
  198. max-height: 700px;
  199. }`;
  200.     document.head.appendChild(styleNode);
  201.  
  202.     setTimeout(() => {
  203.         compareImages();
  204.     }, 500);
  205.  
  206. })();