Canvas размером с тегом image

Question

Я передаю в модальное окно следующую разметку:

    <div class="imageContainer modal-content" >
        <div class="modal-header">
            <h5 class="modal-title">Подробный просмотр</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <div class="container-fluid">
                <img class="image" id="photo"  style="width:80%; height:100%;" src="{% static photo_path %}" alt="Cat03">
                <canvas id="myCanvas" width="1420" height="800" class="canvas" style="margin: 0 177.609;"></canvas>
            </div>
        </div>
    </div>

На картинке нужно отрисовать определенные вещи, и для этого используется канва. Проблема в том, что картинке в модальном окне bootstrap имеет rendered size, то есть она не отображается в исходном разрешении и это нормально, но canvas может принимать либо точно заданные размеры, либо исходные размеры фото.

Как подогнать канву под отображаемые размеры фото без ручного ввода их как в примере?

Answer 1

Используйте img.offsetWidth и img.offsetHeight.

Используйте эти свойства в событии загрузки окна window.onload() или, как в моем случае, модального окна.

$('#modal').on('shown.bs.modal', function () {
            var img = document.getElementById('photo');
            var canvasWidth = img.offsetWidth;
            var canvasHeight = img.offsetHeight;

            const canvas = document.getElementById('myCanvas');
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;

        });

БЛОГ НА HUSL

Canvas размером с тегом image

Ответы (1 шт):