Detailed explanation of examples of how to insert pictures into canvas in html5

canvas loading...

Displaying images in canvas is very simple. You can add a stamp to the image, stretch the image, or modify the image through the correction layer, and the image will usually become the focus on the canvas. You can easily add image content to canvas with a few simple commands built into the HTML5 Canvas API.

However, pictures increase the complexity of canvas operations: you must wait until the picture is fully loaded before you can operate it. Browsers usually load images asynchronously while the page script is executing. If you try to render the image to the canvas before it has fully loaded, the canvas will not display any image. Therefore, developers should pay special attention to ensure that the image has been loaded before rendering.

To ensure that the image is fully loaded before rendering, we provide a callback, that is, subsequent code will only be executed when the image is loaded, as shown in the code listing below.

<script type="text/javascript">
function drawBeauty(beauty){
var mycv = document.getElementById("cv");  
var myctx = mycv.getContext("2d");
myctx.drawImage(beauty, 0, 0);
}
function load(){
var beauty = new Image();  
beauty.src = "http://images.cnblogs.com/cnblogs_com/html5test/359114/r_test.jpg"; 
if(beauty.complete){
   drawBeauty(beauty);
}else{
   beauty.onload = function(){
     drawBeauty(beauty);
   };
   beauty.onerror = function(){
     window.alert(&#39;美女加载失败，请重试&#39;);
   };
};   
}//load
if (document.all) {
  window.attachEvent(&#39;onload&#39;, load);  
  }else {  
  window.addEventListener(&#39;load&#39;, load, false);
  }
</script>

Basic Drawing

In the most basic drawing operation, all you need is the position (x and y coordinates) where you want the image to appear. The image's position is judged relative to its upper left corner. Using this method, the image can simply be painted on the canvas in its original size.

drawImage(image, x, y)
var canvas = document.getElementById(‘myCanvas’);
var ctx = canvas.getContext(’2d’);
ctx.drawImage(myImage, 50, 50);
ctx.drawImage(myImage, 125, 125);
ctx.drawImage(myImage, 210, 210);

Scaling and resizing

To change the size of an image, you need to use the overloaded drawImage function and provide it with the desired width and height parameters.

drawImage(image, x, y, width, height)

var canvas = document.getElementById(‘myCanvas’);
var ctx = canvas.getContext(’2d’);ctx.drawImage(myImage, 50, 50, 100, 100);
ctx.drawImage(myImage, 125, 125, 200, 50);
ctx.drawImage(myImage, 210, 210, 500, 500);

Image cropping

The function of the last drawImage method is to crop the image.

drawImage(image,
sourceX,
sourceY,
sourceWidth,
sourceHeight,
destX,
destY,
destWidth,
destHeight)

There are many parameters, but basically you can think of it as taking a rectangular area from the original image, and then drawing it to the target area on the canvas.

The above is the detailed content of Detailed explanation of examples of how to insert pictures into canvas in html5. For more information, please follow other related articles on the PHP Chinese website!