☰

imageresize

图片放缩

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.cn-greasyfork.org/scripts/534390/1580075/imageresize.js 

  1. //revised from https://gist.github.com/p1coderblog/24cdae9fa923193f45f3583c2265161d
  2. ;
  3.  
  4. function enableImageResizeInDiv(editor) {
  5.     if (!editor) {
  6.         return
  7.     }
  8.     // firefox valid
  9.     /*if (!(/chrome/i.test(navigator.userAgent) && /google/i.test(window.navigator.vendor))) {
  10.         return;
  11.     }*/
  12.     //const editor = document.getElementById(id);
  13.     let resizing = false;
  14.     let currentImage;
  15.     const createDOM = function (elementType, className, styles) {
  16.         let ele = document.createElement(elementType);
  17.         ele.className = className;
  18.         setStyle(ele, styles);
  19.         return ele;
  20.     };
  21.     const setStyle = function (ele, styles) {
  22.         for (let key in styles) {
  23.             ele.style[key] = styles[key];
  24.         }
  25.         return ele;
  26.     };
  27.     const removeResizeFrame = function () {
  28.         document.querySelectorAll(".resize-frame,.resizer").forEach((item) => item.parentNode.removeChild(item));
  29.     };
  30.     const offset = function offset(el) {
  31.         const rect = el.getBoundingClientRect(),
  32.             scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
  33.             scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  34.         return {top: rect.top + scrollTop, left: rect.left + scrollLeft}
  35.     };
  36.     const append = (img, dom) => {
  37.         const next = img.nextElementSibling;
  38.         next ? img.parentElement.insertBefore(dom, next) : img.parentElement.append(dom)
  39.     }
  40.     const clickImage = function (img) {
  41.         removeResizeFrame();
  42.         currentImage = img;
  43.         const imgHeight = img.offsetHeight;
  44.         const imgWidth = img.offsetWidth;
  45.         const imgPosition = {top: img.offsetTop, left: img.offsetLeft};
  46.         const editorScrollTop = img.parentElement.scrollTop;
  47.         const editorScrollLeft = img.parentElement.scrollLeft;
  48.         const top = imgPosition.top - editorScrollTop - 1;
  49.         const left = imgPosition.left - editorScrollLeft - 1;
  50.  
  51.  
  52.         append(currentImage, createDOM('span', 'resize-frame', {
  53.             margin: '10px',
  54.             position: 'absolute',
  55.             top: (top + imgHeight - 10) + 'px',
  56.             left: (left + imgWidth - 10) + 'px',
  57.             border: 'solid 3px blue',
  58.             width: '6px',
  59.             height: '6px',
  60.             cursor: 'se-resize',
  61.             zIndex: 1
  62.         }));
  63.  
  64.         append(currentImage, createDOM('span', 'resizer top-border', {
  65.             position: 'absolute',
  66.             top: (top) + 'px',
  67.             left: (left) + 'px',
  68.             border: 'dashed 1px grey',
  69.             width: imgWidth + 'px',
  70.             height: '0px'
  71.         }));
  72.  
  73.         append(currentImage, createDOM('span', 'resizer left-border', {
  74.             position: 'absolute',
  75.             top: (top) + 'px',
  76.             left: (left) + 'px',
  77.             border: 'dashed 1px grey',
  78.             width: '0px',
  79.             height: imgHeight + 'px'
  80.         }));
  81.  
  82.         append(currentImage, createDOM('span', 'resizer right-border', {
  83.             position: 'absolute',
  84.             top: (top) + 'px',
  85.             left: (left + imgWidth) + 'px',
  86.             border: 'dashed 1px grey',
  87.             width: '0px',
  88.             height: imgHeight + 'px'
  89.         }));
  90.  
  91.         append(currentImage, createDOM('span', 'resizer bottom-border', {
  92.             position: 'absolute',
  93.             top: (top + imgHeight) + 'px',
  94.             left: (left) + 'px',
  95.             border: 'dashed 1px grey',
  96.             width: imgWidth + 'px',
  97.             height: '0px'
  98.         }));
  99.  
  100.         document.querySelector('.resize-frame').onmousedown = () => {
  101.             resizing = true;
  102.             return false;
  103.         };
  104.  
  105.         editor.onmouseup = () => {
  106.             if (resizing) {
  107.                 //const newHeight = document.querySelector('.left-border').offsetHeight;
  108.                 //resize equal ratio
  109.                 const width = document.querySelector('.top-border').offsetWidth;
  110.                 if (currentImage.parentElement.style.width !== 'auto' && currentImage.parentElement.style.width < width + 'px') {
  111.                     currentImage.parentElement.style.width = 'auto'
  112.                 }
  113.                 currentImage.style.width = width + 'px';
  114.                 //currentImage.style.height = 'auto';
  115.                 refresh();
  116.                 currentImage.click();
  117.                 resizing = false;
  118.             }
  119.         };
  120.  
  121.         editor.onmousemove = (e) => {
  122.             if (currentImage && resizing) {
  123.                 let height = e.pageY - offset(currentImage).top;
  124.                 let width = e.pageX - offset(currentImage).left;
  125.                 height = height < 1 ? 1 : height;
  126.                 width = width < 1 ? 1 : width;
  127.                 const top = imgPosition.top - editorScrollTop - 1;
  128.                 const left = imgPosition.left - editorScrollLeft - 1;
  129.                 setStyle(document.querySelector('.resize-frame'), {
  130.                     top: (top + height - 10) + 'px',
  131.                     left: (left + width - 10) + "px"
  132.                 });
  133.  
  134.                 setStyle(document.querySelector('.top-border'), {width: width + "px"});
  135.                 setStyle(document.querySelector('.left-border'), {height: height + "px"});
  136.                 setStyle(document.querySelector('.right-border'), {
  137.                     left: (left + width) + 'px',
  138.                     height: height + "px"
  139.                 });
  140.                 setStyle(document.querySelector('.bottom-border'), {
  141.                     top: (top + height) + 'px',
  142.                     width: width + "px"
  143.                 });
  144.             }
  145.             return false;
  146.         };
  147.     };
  148.     const bindClickListener = function () {
  149.         editor.querySelectorAll('img').forEach((img) => {
  150.             img.onclick = (e) => {
  151.                 if (e.target === img) {
  152.                     clickImage(img);
  153.                 }
  154.             };
  155.         });
  156.     };
  157.     const refresh = function () {
  158.         bindClickListener();
  159.         removeResizeFrame();
  160.         if (!currentImage) {
  161.             return;
  162.         }
  163.         const img = currentImage;
  164.         const imgHeight = img.offsetHeight;
  165.         const imgWidth = img.offsetWidth;
  166.         const imgPosition = {top: img.offsetTop, left: img.offsetLeft};
  167.         const editorScrollTop = img.parentElement.scrollTop;
  168.         const editorScrollLeft = img.parentElement.scrollLeft;
  169.         const top = imgPosition.top - editorScrollTop - 1;
  170.         const left = imgPosition.left - editorScrollLeft - 1;
  171.  
  172.         append(img, createDOM('span', 'resize-frame', {
  173.             position: 'absolute',
  174.             top: (top + imgHeight) + 'px',
  175.             left: (left + imgWidth) + 'px',
  176.             border: 'solid 2px red',
  177.             width: '6px',
  178.             height: '6px',
  179.             cursor: 'se-resize',
  180.             zIndex: 1
  181.         }));
  182.  
  183.         append(img, createDOM('span', 'resizer', {
  184.             position: 'absolute',
  185.             top: (top) + 'px',
  186.             left: (left) + 'px',
  187.             border: 'dashed 1px grey',
  188.             width: imgWidth + 'px',
  189.             height: '0px'
  190.         }));
  191.  
  192.         append(img, createDOM('span', 'resizer', {
  193.             position: 'absolute',
  194.             top: (top) + 'px',
  195.             left: (left + imgWidth) + 'px',
  196.             border: 'dashed 1px grey',
  197.             width: '0px',
  198.             height: imgHeight + 'px'
  199.         }));
  200.  
  201.         append(img, createDOM('span', 'resizer', {
  202.             position: 'absolute',
  203.             top: (top + imgHeight) + 'px',
  204.             left: (left) + 'px',
  205.             border: 'dashed 1px grey',
  206.             width: imgWidth + 'px',
  207.             height: '0px'
  208.         }));
  209.     };
  210.     const reset = function () {
  211.         if (currentImage != null) {
  212.             currentImage = null;
  213.             resizing = false;
  214.             removeResizeFrame();
  215.         }
  216.         bindClickListener();
  217.     };
  218.  
  219.     editor.addEventListener('scroll', function () {
  220.         reset();
  221.     }, false);
  222.     editor.addEventListener('mouseup', function (e) {
  223.         if (!resizing) {
  224.             const x = (e.x) ? e.x : e.clientX;
  225.             const y = (e.y) ? e.y : e.clientY;
  226.             let mouseUpElement = document.elementFromPoint(x, y);
  227.             if (mouseUpElement) {
  228.                 let matchingElement = null;
  229.                 if (mouseUpElement.tagName === 'IMG') {
  230.                     matchingElement = mouseUpElement;
  231.                 }
  232.                 if (!matchingElement) {
  233.                     reset();
  234.                 } else {
  235.                     clickImage(matchingElement);
  236.                 }
  237.             }
  238.         }
  239.     });
  240. }