@Gorlaks
начинающий front-end разработчик

Как вытащить обрезанное изображение с холста Canvas?

В общем, есть изображение, которое я обрезал при помощи Canvas и полученное изображение я вставляю на страницу, но проблема в том что на страницу летит не только сама картинка, но и холст вместе с ней, что вызывает трудности с изменение размеров картинки (хочу растянуть на 100% в блоке предке, но размер меняет холст и картинка остается мелкой а холст растягивается).
Вот код:
function cutImage(imageObj, coordinates) {
    var canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');

    const sourceX = coordinates["originCoordinates"][0] * imageWidth;
    const sourceY = coordinates["boxTop"];
    const sourceWidth = coordinates["boxWidth"];
    const sourceHeight = coordinates["boxHeight"];
    const destWidth = sourceWidth;
    const destHeight = sourceHeight;
    var destX = canvas.width / 2 - destWidth / 2;
    var destY = canvas.height / 2 - destHeight / 2;

    context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);

    return canvas.toDataURL();
  }


В общем возможно ли как-то вытянуть картинку из холста и вставлять только её или как растянуть картинку на весь холст? Спасибо.
  • Вопрос задан
  • 131 просмотр
Решения вопроса 1
smilingcheater
@smilingcheater
Дмитрий, Вы созданному канвасу после создания не задаёте размеры
canvas.setAttribute('width', ....);
canvas.setAttribute('height', ....);
Пропишите сюда размеры результирующего изображения
И рисуйте изображение на канвасе от точки 0:0
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы