Нанесение изображения на холст с помощью toDataURL

Question

У меня есть toDataURL, который я хочу нарисовать на новом холсте размером 300 на 300. Изображение не растягивается на все предоставленное пространство. Я хочу, чтобы он полностью растянулся на холсте. Даже добавление в div - это нормально, что я пробовал, но не получилось, оно также не полностью заняло пространство. Оригинальное изображение в любом случае меньше 300 и 300. Также, когда я удаляю код предупреждения, он не работает в все.

   var c4 =  document.getElementById("area_c4");
   var ctx4 = c4.getContext("2d");

   var dataURL = c2.toDataURL();

   var myImg = new Image;

   myImg.src = dataURL;

   myImg.width = c4.width; // c4.width is 300px
   myImg.height = c4.height; //c4.height is 300px
   alert(c4.width);  // when I remove this alert code doesn't work
   ctx4.drawImage(myImg,0, 0 ,c4.width,c4.height); // the image doesnt strtch over 300px 300px region. It is displayed in its original size

Answer 1

Чтобы изменить размер изображения, вам нужно использовать следующую версию CanvasRenderingContext2D.drawImage()

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

• image: элемент для рисования в контексте.
• sx: координата оси X левого верхнего угла суб-прямоугольника источника image для рисования в контексте назначения.
• sy: Координата оси Y верхнего левого угла вложенного прямоугольника источника image для рисования в контексте назначения.
• sWidth: Ширина под прямоугольника источника image для рисования в контексте назначения.Если не указан, используется весь прямоугольник от координат, заданных sx и sy до правого нижнего угла изображения.
• sHeight: высотавложенный прямоугольник источника image для рисования в контексте назначения.
• dx: координата оси X на целевом холсте, на которой нужно разместить верхний левый уголугол источника image.
• dy: координата оси Y на целевом холсте, в которую нужно поместить верхний левый угол источника image.
• dWidth: ширина для рисования image на целевом холсте.Это позволяет масштабировать нарисованное изображение.Если не указано, при рисовании изображение не масштабируется по ширине.
• dHeight: высота для рисования image на целевом холсте.Это позволяет масштабировать нарисованное изображение.Если не указано, при рисовании изображение не масштабируется по высоте.

Также вам придется подождать, пока изображение обработает данные URI, прежде чем вы сможете нарисовать его на холсте.Для этого вы можете использовать событие load:

myImg.onload = function() {
    // here you can draw the image on the canvas
}

Входное изображение в примере имеет ширину 10x10 пикселей и будет растянуто до 300x300 пикселей.

const c4 = document.getElementById("area_c4");
var ctx4 = c4.getContext("2d");

var dataURL = "data:image/bmp;base64,Qk26AQAAAAAAAHoAAABsAAAACgAAAAoAAAABABgAAAAAAEABAAATCwAAEwsAAAAAAAAAAAAAQkdScwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAABUVPxUVPxUVPxUVPxUVPz/AAD/AAD/AAD/AAD/AAAAAFRU/FRU/FRU/FRU/FRU/P8AAP8AAP8AAP8AAP8AAAAAVFT8VFT8VFT8VFT8VFT8/wAA/wAA/wAA/wAA/wAAAABUVPxUVPxUVPxUVPxUVPz/AAD/AAD/AAD/AAD/AAAAAFRU/FRU/FRU/FRU/FRU/P8AAP8AAP8AAP8AAP8AAAAAVFT8VFT8VFT8VFT8VFT8/wAA/wAA/wAA/wAA/wAAAABUVPxUVPxUVPxUVPxUVPz/AAD/AAD/AAD/AAD/AAAAAFRU/FRU/FRU/FRU/FRU/P8AAP8AAP8AAP8AAP8AAAAAVFT8VFT8VFT8VFT8VFT8/wAA/wAA/wAA/wAA/wAAAABUVPxUVPxUVPxUVPxUVPz/AAD/AAD/AAD/AAD/AAAAAA==";

var myImg = new Image();
// wait until the data uri has been processed
myImg.onload = function() {
  // draw the image and scale it to the size of the canvas
  ctx4.drawImage(this,
                 0, 0, this.width, this.height, /* source */
                 0, 0, c4.width, c4.height);    /* destination */
}
myImg.src = dataURL;

/* not necessary for the solution, just to show the size of the input image */
document.getElementById("showcase").src = dataURL;

canvas {
  width: 300px;
  height: 300px;
}

<p>
  <!-- not necessary for the solution, just to show the size of the input image -->
  Input:<br /><img id="showcase" />
</p>
<p>
  Output:<br /><canvas id="area_c4" width="300px" height="300px"></canvas>
</p>