Commit 89b12f49 authored by Яков's avatar Яков
Browse files

update fix issue

parent 7076d16f
{ {
"name": "react-ag-qeditor", "name": "react-ag-qeditor",
"version": "1.1.51", "version": "1.1.52",
"description": "WYSIWYG html editor", "description": "WYSIWYG html editor",
"author": "atma", "author": "atma",
"license": "MIT", "license": "MIT",
......
...@@ -37,35 +37,25 @@ function getExifOrientation(file) { ...@@ -37,35 +37,25 @@ function getExifOrientation(file) {
}) })
} }
// Поворачивает JPEG на canvas согласно EXIF-ориентации, возвращает исправленный File // Исправляет ориентацию JPEG перед загрузкой на сервер.
// Современные браузеры (Chrome 81+, Safari 13.1+) автоматически применяют
// EXIF-ориентацию при загрузке <img>. Поэтому достаточно нарисовать img
// на canvas без дополнительных трансформаций — браузер уже повернул пиксели
// правильно, а canvas зафиксирует их «физически», убрав EXIF-тег.
function fixImageOrientation(file) { function fixImageOrientation(file) {
if (!file.type.match(/^image\/(jpeg|jpg)/i)) return Promise.resolve(file) if (!file.type.match(/^image\/(jpeg|jpg)/i)) return Promise.resolve(file)
return getExifOrientation(file).then(orientation => { return getExifOrientation(file).then(orientation => {
if (orientation <= 1) return file if (orientation <= 1) return file // ориентация нормальная, файл не трогаем
return new Promise(resolve => { return new Promise(resolve => {
const img = new window.Image() const img = new window.Image()
img.onload = () => { img.onload = () => {
const { naturalWidth: w, naturalHeight: h } = img // naturalWidth/Height в современных браузерах уже учитывают EXIF
const canvas = document.createElement('canvas') const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d') canvas.width = img.naturalWidth
canvas.height = img.naturalHeight
// Для поворотов 5–8 меняем местами ширину и высоту canvas.getContext('2d').drawImage(img, 0, 0)
if (orientation >= 5) { canvas.width = h; canvas.height = w }
else { canvas.width = w; canvas.height = h }
const transforms = {
2: [-1, 0, 0, 1, w, 0],
3: [-1, 0, 0, -1, w, h],
4: [ 1, 0, 0, -1, 0, h],
5: [ 0, 1, 1, 0, 0, 0],
6: [ 0, 1,-1, 0, h, 0],
7: [ 0,-1,-1, 0, h, w],
8: [ 0,-1, 1, 0, 0, w],
}
if (transforms[orientation]) ctx.transform(...transforms[orientation])
ctx.drawImage(img, 0, 0)
URL.revokeObjectURL(img.src) URL.revokeObjectURL(img.src)
canvas.toBlob( canvas.toBlob(
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment