Home > Web Front-end > H5 Tutorial > body text

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

黄舟
Release: 2018-05-26 16:09:14
Original
7978 people have browsed it

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>
Copy after login

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);
Copy after login

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)
Copy after login
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);
Copy after login

Image cropping

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

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

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template