Всем привет!
вот codePen.
Есть картинка, src dataUrl.
Для поворота (клик по body) используется плагин jQuery.rotate.js (зашит в codePen).
Первый поворот проходит нормально, последующие - некорректно.
Между поворотами у картинки берется dataUrl
и присваивается image.origin
(там собственно хранится картинка, так нужно), после чего происходит обновление image.refresh()
.
Если не использовать промежуточное сохранение, то все работает корректно (создается canvas и вращается нормально).
В чем может быть проблема?
Суть задачи в том, чтобы после каждого поворота получать в image.origin.src новый blob. Потом перезагрузить картинку (в моем случае это image.refresh()), и потом, при необходимости снова повернуть в ту же сторону (возникает проблема поворота). Мне нужно сделать так, чтобы такая система работала. Повернуть используя класс CSS - не выход, ведь он не изменяет blob.
т.е. получение blob - не проблема. Проблема в том, что следующий поворот работает некорректно.
Тут не столько 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>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Постараюсь задать вопрос максимально понятно, так как не очень разбираюсь
Подскажите,пожалуйста,как реализовать вот такую штуку c использованием dropdown: есть выпадающий список с моделями машин,когда выбираешь какую-то...