image src dataUrl некорректно работает jQuery.rotate.js

153

18 декабря 2018, 10:50

Всем привет! вот codePen. Есть картинка, src dataUrl. Для поворота (клик по body) используется плагин jQuery.rotate.js (зашит в codePen). Первый поворот проходит нормально, последующие - некорректно. Между поворотами у картинки берется dataUrl и присваивается image.origin (там собственно хранится картинка, так нужно), после чего происходит обновление image.refresh(). Если не использовать промежуточное сохранение, то все работает корректно (создается canvas и вращается нормально). В чем может быть проблема? Суть задачи в том, чтобы после каждого поворота получать в image.origin.src новый blob. Потом перезагрузить картинку (в моем случае это image.refresh()), и потом, при необходимости снова повернуть в ту же сторону (возникает проблема поворота). Мне нужно сделать так, чтобы такая система работала. Повернуть используя класс CSS - не выход, ведь он не изменяет blob. т.е. получение blob - не проблема. Проблема в том, что следующий поворот работает некорректно.

Answer 1

Тут не столько JS сколько CSS надо, на Sass еще в разы короче будет темболее если будет auto-prefixer.

const 
  url = 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg', 
  container = document.querySelector('#container'), 
  img = container.querySelector('img'), 
  btn = document.querySelectorAll('.button') 
     
setAngle(270) // ставит начальный угол 
setBase64() // устанавливает src как base64 используя url 
 
// каждой кнопке дает слушатель нажатия в котором изменяется угол исходя от значения data-angle атрибута 
;[...btn].forEach(i => 
  i.onclick = () => setAngle(img.angle + +i.dataset.angle) 
) 
 
// ставит угол 
function setAngle (angle) { 
  const oldAngle = img.angle 
  angle = angle % 360 
   
  if (angle < 0) 
    angle = 360 - angle 
  if (angle === 450) 
    angle = 270 
     
  img.angle = angle  
  container.classList.remove('rotate' + oldAngle) // удаялет прошлый класс 
  container.classList.add('rotate' + img.angle) // ставит класс исходя от угла 
} 
 
// получает из картинки base64 и ставит его 
function setBase64 () { 
  toDataURL(url) 
  .then(base64 => { 
    img.src = base64 
  }) 
} 
 
// получает из картинки base64 
function toDataURL (url) {  
  return fetch(url) 
    .then(response => response.blob()) // переводит в blob 
    .then(blob => new Promise((resolve, reject) => { 
      const reader = new FileReader() // blob умеет читать FileReader 
      reader.onloadend = () => resolve(reader.result) // когда считало 
      reader.onerror = reject // если вдруг ошибка 
      reader.readAsDataURL(blob) // читает как base64 
    })) 
}

img { 
  width: 100px; 
  transform-origin: top left; 
  /* IE 10+, Firefox, и т.п. */ 
  -webkit-transform-origin: top left; 
  /* Chrome */ 
  -ms-transform-origin: top left; 
  /* IE 9 */ 
} 
 
 
 
#container.rotate90 img { 
  transform: rotate(90deg) translateY(-100%); 
  -webkit-transform: rotate(90deg) translateY(-100%); 
  -ms-transform: rotate(90deg) translateY(-100%); 
} 
#container.rotate180 img { 
  transform: rotate(180deg) translate(-100%, -100%); 
  -webkit-transform: rotate(180deg) translate(-100%, -100%); 
  -ms-transform: rotate(180deg) translateX(-100%, -100%); 
} 
#container.rotate270 img { 
  transform: rotate(270deg) translateX(-100%); 
  -webkit-transform: rotate(270deg) translateX(-100%); 
  -ms-transform: rotate(270deg) translateX(-100%); 
}

<div style="width: 250px; text-align: center;"> 
  <button class="button" data-angle="+90">◄ Повернуть </button> 
  <button class="button" data-angle="-90">Повернуть ►</button> 
  <div id="container"> 
    <img /> 
  </div> 
</div>