使用toDataURL在画布上绘制图像

Question

I have toDataURL which I want drawn on a new canvas, which is 300 by 300 in size. The image doesn't stretch over the full space provided. I want it to be stretched over the canvas fully. Even appending to a div is okay which I tried but didn't work out, it also didn't fully occupy the space.The orginal image is anyway less than 300 and 300.Also when I remove the alert code doesn't function at all.

   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

To resize the image you will have to use the following version of CanvasRenderingContext2D.drawImage()

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

• image : An element to draw into the context.
• sx : The x-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
• sy : The y-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
• sWidth : The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used.
• sHeight : The height of the sub-rectangle of the source image to draw into the destination context.
• dx : The x-axis coordinate in the destination canvas at which to place the top-left corner of the source image .
• dy : The y-axis coordinate in the destination canvas at which to place the top-left corner of the source image .
• dWidth : The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.
• dHeight : The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.

Also you will have to wait for the image to process the data uri before you can draw it onto the canvas. For this you can use the load event:

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

The input image in the example is 10x10 pixels wide and will be stretched to 300x300 pixels.

 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>