Я делаю простой инструмент для преобразования изображений и видео из одного выбранного соотношения сторон в другое.
Моей первой попыткой было дважды использовать один и тот же тег img:
1st: opacity 0.5
2nd : Я рассчитал и применил клип-путь. (Таким образом, пользователь может видеть все изображение и какой прямоугольник будет после обрезки.)
Помимо неправильного способа загрузки одного и того же изображения дважды, мне также нужно сделать это для видео. Наличие одного и того же видео дважды сделает вещи действительно перегруженными, и мне бы очень хотелось этого избежать (не считая всей проблемы, заключающейся в том, что оба воспроизводят один и тот же кадр, пауза / воспроизведение в одно и то же мгновение и т. Д. c.).
Я немного прочитал о SVG, как вы можете их использовать. SVG кажется правильным инструментом для использования. Мне нужна только поддержка последних версий браузера, поэтому мне не нужна поддержка IE 8.
Чтобы еще больше усложнить ситуацию, изображения bootstrap 4 реагируют, а изображения и видео имеют различный аспект *. 1052 * (и может быть повернут), поэтому фиксированная ширина / высота в SVG не будет работать.
Например, у меня есть изображение.
Оно имеет соотношение сторон 4: 1.
Пользователь хочет преобразовать его в 1: 1.
Затем я вычисляю, что фактор обрезки является вставным (0% 33,33%) (2/3 нужно go, и я хочу, чтобы он был отцентрирован).
Для этого примера SVG должен быть 100% изображения. Белый везде, кроме одного черного прямоугольника с левой стороны и одного с правой стороны, имеющих высоту 33% и ширину 100%.
(См. Фрагмент ниже, если текст не имеет смысла)
Я никогда не действительно использовал SVG, так что я немного запутался. Мне нужно, чтобы он был встроенным, так как мне нужно изменить ширину и высоту 4 квадратов с помощью javascript, и мои попытки пока никуда не делись.
Пример, показывающий это с SVG, используя изображение один раз и маскировки с использованием 4 квадратов (2 - это ширина / высота, а два - 33,33% / 100%) для этого точного примера вполне достаточно, я смогу добавить JS, управляющий размерами квадратов.
Вот суть / способ, которым я сейчас об этом говорю:
.overlay-image {
height: 100%;
position: absolute;
margin-left: -8px;
margin-top: -3px;
opacity: 0.5;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="col mx-auto" >
<div class="row h-100" style="background: #ff0000;">
<div class="row h-100"style="background: #00ff00;">
<div class="mx-auto my-auto col-6"style="background: #0000ff;">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/57/UNICEF_Logo.png" class="img-responsive fit-image img-fluid overlay-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/57/UNICEF_Logo.png" class="img-responsive fit-image img-fluid " style="clip-path: inset(0% 33.33%);">
</div>
</div>
</div>
</div>
Редактировать Это шаг в нужном мне направлении. Делая маскировку, я притворяюсь выше с двумя изображениями вместо SVG. Я понимаю, что изображение, которое я выбрал для показа, не так уж и велико, просто выбрал достаточно маленькое изображение с CC лицензией.
Что я ищу в ответе, основанном на следующем фрагменте:
- Заставьте изображение заполнить ширину содержащего элемента div и получите необходимую высоту, чтобы не нарушать пропорции изображения, и масштабируйте SVG, чтобы он содержал его содержимое.
- Использование bootstrap центрирует изображение по горизонтали и вертикали
- Любые мысли в атрибутах ширины и высоты изображения, если это то, что я должен установить на 100 100, и с фиксированной первой точкой, не думая об этом, или если это что-то (вместе с прямоугольник маски) Мне нужно отрегулировать в зависимости от размера изображения и соотношения сторон
Надеюсь, это прояснит мой вопрос.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="col mx-auto" >
<div class="row" style="background: #ff0000;">
<div class="row "style="background: #00ff00;">
<div class="mx-auto my-auto col-6"style="background: #0000ff;">
<svg viewBox="0 0 100 100" style="outline: 1px solid red" class=" ">
<defs>
<mask id="image-mask" x="0" y="0" width="100" height="50">
<rect x="0" y="0" width="100" height="50" fill="#00F0FF" />
<rect x="33" y="0" width="33" height="50" fill="white" />
</mask>
</defs>
<image width="100" height="50" preserveAspectRatio="xMidYMid meet" class=" " xlink:href="https://upload.wikimedia.org/wikipedia/commons/5/57/UNICEF_Logo.png" mask="url(#image-mask)" />
</svg>
</div>
</div>
</div>
</div>