☰

Visvaris rotate image

Allows to rotate uploaded image

// ==UserScript==
// @name        Visvaris rotate image
// @namespace   Visvaris
// @match       https://visvaris.zzdats.lv/Card/EditUser/*
// @grant       none
// @version     0.11
// @author      Zigmars
// @description Allows to rotate uploaded image
// @license     MIT
// ==/UserScript==

var pievienot_foto_objekts,imgtag;
setTimeout(pievienot_foto_poga, 100);
//aizvietojam pogu "Pievienot fotogrāfiju" ar savu, kas papildus izsauks rotēšanas pogas izveidi
function pievienot_foto_poga(){
    var dom_object = document.getElementById('userEditContent');
    dom_object = dom_object.children.item(0).children.item(2);
    dom_object = dom_object.getElementsByTagName('a')[0];
    dom_object = dom_object.parentNode;
    dom_object.children.item(0).style.display = "none";
    pievienot_foto_objekts = dom_object;
    var new_a = document.createElement('a');
    new_a.setAttribute('href', "#");
    new_a.innerHTML = "Pievienot fotogrāfiju";
    new_a.className = "link";
    new_a.onclick = pievienot_foto_poga_click;
    dom_object.appendChild(new_a);
    addGlobalStyle('.fa-rotate:before {content: "\\f01e";color: blue;}');
}
//simulējam klikšķi uz vecās pogas "Pievienot fotogrāfiju" un pēc 3 sekundēm uzsāksim rotēšanas pogas izveidi
function pievienot_foto_poga_click(){
    pievienot_foto_objekts.children.item(0).click();
    setTimeout(rotet_poga, 3000);
}
//izveidojam rotēšanas pogu ar identisku stilu jau esošajām 2 pogām
function rotet_poga(){
    var dom_object = document.getElementById('filesystPanel');
    dom_object=dom_object.getElementsByClassName('editButtonDiv')[0];
    dom_object = dom_object.getElementsByTagName('ul')[0];
    var new_li = document.createElement('li');
    dom_object.appendChild(new_li);
    var new_a = document.createElement('a');
    new_a.setAttribute('href', "");
    new_a.className = "link";
    new_a.title = "Rotēt";
    new_a.onclick = rotet_poga_click;
    new_li.appendChild(new_a);
    var new_i = document.createElement('i');
    new_i.className = "fa fa-rotate";
    new_a.appendChild(new_i);
}
//nolasām attēla datus un rotējam
function rotet_poga_click(){
    var dom_object = document.getElementById('uploadedPhotoEdit');
    imgtag = dom_object.getElementsByTagName('img')[1];
    var base64source = imgtag.src;
    rotet_attelu(base64source,90);
    return false;
}
//funkcija, kas pievieno "head" daļā stilu priekš jaunās pogas
function addGlobalStyle(css) {
    var head = document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}
//rotējam attēlu ap tā viduspunktu un pēc tam simulējam "drag" notikumu, lai attēls tiktu pārzīmēts
function rotet_attelu(srcBase64, degrees) {
  var image = new Image();
  image.onload = function (){
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext("2d");
      canvas.width = image.width;
      canvas.height = image.height;
      ctx.translate(canvas.width / 2, canvas.height / 2);
      ctx.rotate(degrees * Math.PI / 180);
      ctx.drawImage(image, image.width / -2, image.height / -2);
      imgtag.onload = function (){
          var dom_object=imgtag.parentNode.children.item(2);
          mouse_down_event=new Event('mousedown');
          mouse_down_event.clientX = 0;
          mouse_down_event.clientY = 0;
          dom_object.dispatchEvent(mouse_down_event);
          mouse_move_event=new Event('mousemove');
          mouse_move_event.clientX = 0;
          mouse_move_event.clientY = 0;
          document.dispatchEvent(mouse_move_event);
          mouse_up_event=new Event('mouseup');
          mouse_up_event.clientX = 0;
          mouse_up_event.clientY = 0;
          document.dispatchEvent(mouse_up_event);
      };
      imgtag.src = canvas.toDataURL();
  };
  image.src = srcBase64;
}