Как склеить текст (стилизованный css) и картинку средствами JS (пример в приложении)

#javascript #svg #png #gif #jpg

                    
Задача такая, на сайте хочу добавить возможность менять картинку, точнее добавлять
текст для гравировки на кольцо, для этого необходимо чтобы создавалась картинка с превью
в виде png,svg,jpg. Текст вводит клиент, выбирает шрифт, а уже с применением css и
эффектов это c прозрачным фоном добавляется на существующее кольцо (становится одной
картинкой) и ее уже можно отправлять мне как образец для работы над продуктом... как
такое можно сделать?


    

Ответы

Ответ 1

document.addEventListener('input', function (e) {
  document.querySelector('textPath').textContent = e.target.value;
})
path { fill: none; stroke: black; stroke-width: 1px; }
text { font-size: 15px; }

Неправильная ориентация .JPG в браузере

#html #jpg

Проблема: обнаружено, что картинки в формате .JPG (именно прописными буквами, с обычным
.jpg - всё в порядке) в браузере меняют свою ориентацию.




https://jsfiddle.net/vzLgay5a/1/

То есть одна картинка может быть отражена по вертикали, а другая повёрнута на 90°.
Чем и как в таком случае повернуть её в ту ориентацию, в какой она отображается локально
на машине.

Был бы также признателен, если кто-нибудь объяснил бы, почему вообще это происходит.
    

Ответы

Ответ 1

Дело в EXIF. 

При просмотре в теле страницы показывает перевернутой, а при "открыть картинку в
новой вкладке" показывает картинку повернутой правильно. Т.е. современные браузеры
когда показывают только картинку берут ее (в моем случае повернутую набок) смотрят
на EXIF и поворачивают как надо.

Первый вариант - при загрузке фото удалять все данные EXIF
Второй вариант - при загрузке фото если есть данные EXIF - повернуть фото согласно
данных.

2 вариант

$img = new Imagick($uploaded_img);
$orientation = $img->getImageOrientation();
switch($orientation) { 
        case imagick::ORIENTATION_BOTTOMRIGHT: 
                $img->rotateimage("#000", 180); // rotate 180 degrees 
        break; 
        case imagick::ORIENTATION_RIGHTTOP: 
                $img->rotateimage("#000", 90); // rotate 90 degrees CW 
        break; 
        case imagick::ORIENTATION_LEFTBOTTOM: 
                $img->rotateimage("#000", -90); // rotate 90 degrees CCW 
        break; 
}
$img->setImageOrientation(imagick::ORIENTATION_TOPLEFT);
$img->writeImage($uploaded_img);
$img->clear();
$img->destroy();


Первый вариант был бы примерно так:

$img = new Imagick($uploaded_img);
$img->stripImage();
$img->writeImage($uploaded_img);
$img->clear();
$img->destroy();


https://toster.ru/q/267428

Оптимизация png и jpg [закрыт]

Какими сервисом вы пользуетесь , что бы максимально сжать , но без потери качества JPG и PNG файлы ? И главное , чтобы файлы оставались в исходных папках.

Ответ

Довольно неплохой инструмент - FileOptimizer. Последовательно применяет к файлам несколько плагинов оптимизации. Более подробно про схему работы и дополнительные настройки на русском можно прочитать тут
Ну, а при первоначальном сохранении PNG в Photoshop, можно использовать плагин SuperPNG. Сохраняет изображения, удаляя meta-данные + можно качество при сохранении выбирать.

Неправильная ориентация .JPG в браузере

Проблема: обнаружено, что картинки в формате .JPG (именно прописными буквами, с обычным .jpg - всё в порядке) в браузере меняют свою ориентацию.

https://jsfiddle.net/vzLgay5a/1/
То есть одна картинка может быть отражена по вертикали, а другая повёрнута на 90°. Чем и как в таком случае повернуть её в ту ориентацию, в какой она отображается локально на машине.
Был бы также признателен, если кто-нибудь объяснил бы, почему вообще это происходит.

Ответ

Дело в EXIF.
При просмотре в теле страницы показывает перевернутой, а при "открыть картинку в новой вкладке" показывает картинку повернутой правильно. Т.е. современные браузеры когда показывают только картинку берут ее (в моем случае повернутую набок) смотрят на EXIF и поворачивают как надо.
Первый вариант - при загрузке фото удалять все данные EXIF Второй вариант - при загрузке фото если есть данные EXIF - повернуть фото согласно данных.
2 вариант
$img = new Imagick($uploaded_img); $orientation = $img->getImageOrientation(); switch($orientation) { case imagick::ORIENTATION_BOTTOMRIGHT: $img->rotateimage("#000", 180); // rotate 180 degrees break; case imagick::ORIENTATION_RIGHTTOP: $img->rotateimage("#000", 90); // rotate 90 degrees CW break; case imagick::ORIENTATION_LEFTBOTTOM: $img->rotateimage("#000", -90); // rotate 90 degrees CCW break; } $img->setImageOrientation(imagick::ORIENTATION_TOPLEFT); $img->writeImage($uploaded_img); $img->clear(); $img->destroy();
Первый вариант был бы примерно так:
$img = new Imagick($uploaded_img); $img->stripImage(); $img->writeImage($uploaded_img); $img->clear(); $img->destroy();
https://toster.ru/q/267428