Shulou(Shulou.com)06/01 Report--

This article is about how to use the drawImage method in canvas. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

I have to say, canvas in html5 is really very powerful, from image processing, to video processing, and then to game development, you can see canvas. However, on this tag, the function is so powerful, which is mainly due to the powerful API of canvas. It is precisely because there are so many API that many people are prohibitive to canvas.

Drawing pictures with drawImage

DrawImage is a method provided by canvas, through which we can draw a picture into canvas. First, take a look at the declaration of this method:

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

Let's first explain a few parameters:

Image: the picture to be drawn supports many forms, such as CSSImageValue,HTMLImageElement,SVGImageElement,HTMLVideoElement,HTMLCanvasElement,ImageBitmap or OffscreenCanvas

Dx:d stands for destination, which is the x-axis of the starting point on canvas.

Y axis of the start point on dy:canvas

Width drawn on dWidth:canvas

Height drawn on dHeight:canvas

Sx:s stands for the original (source), which is the x-axis of the starting point of the original picture.

Sy: y-axis of the starting point of the original picture

SWidth: the width of the original image captured

SHeight: the height of the original image captured

With so many parameters, let me summarize the function of this function in one sentence: take a picture of a specified size from anywhere and draw it anywhere on the canvas with the specified size. The size intercepted here is set by sWidth and sHeight, and the size is drawn by dHeight and dWidth.

Having said so much, let's actually do it:

Var c = document.getElementById ('c1'); var ctx = c.getContext (' 2d'); var img = new Image (); img.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599994255228&di=2f8ea231d1f1b557a73b0f1733bb71cf&imgtype=0&src=http%3A%2F%2Ff.01ny.cn%2Fforum%2F201206%2F28%2F143206f8u8ruk6eeqr7x3u.jpg";img.onload = function (e) {drawImg (this);}; function drawImg (img) {ctx.clearRect (0L0, c.width, c.height) Ctx.drawImage (img, 0J. 0200, c.height);}

Here I use five parameters, let's try a few other parameters, here I want the profile picture of a beautiful woman and draw it in the middle:

Ctx.drawImage (img, 20050,160,180,70,60,160,180)

Make a picture amplifier

The idea is very simple, first get the pixel of the mouse position, and then draw it into a larger area, to achieve magnification. Without much to say, first put on the effect picture:

The code is also simple:

It should be noted here that image resources cannot be cross-domain, such as:

/ / change the picture to Baidu's img.src = https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599994255228&di=2f8ea231d1f1b557a73b0f1733bb71cf&imgtype=0&src=http%3A%2F%2Ff.01ny.cn%2Fforum%2F201206%2F28%2F143206f8u8ruk6eeqr7x3u.jpg;

In getImageData, it will report an error, saying that it is cross-domain:

Index.html:47 Uncaught DOMException: Failed to execute 'getImageData' on

'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Anti-aliasing in canvas

The so-called anti-aliasing means that when the image is enlarged to a large size, whether you can see a pixel, it means that you are not anti-aliasing. Anti-aliasing is enabled by default in canvas, that is, the attribute of imageSmoothingEnabled is true. Enabling anti-aliasing will destroy the original pixels, and there is a smooth transition between pixels, which is generally invisible to the naked eye. Let's make a comparison:

/ / turn off anti-aliasing ctx.imageSmoothingEnabled = false

In obvious contrast, after turning off anti-aliasing, the enlarged area looks like a mosaic, and you can clearly see each pixel. When anti-aliasing is turned on, the gradient between each pixel is very smooth, and the human eye looks blurred. But from the whole picture, after turning off anti-aliasing, the picture is blurred a lot.

Use canvas to render video

As I said at the beginning, canvas can handle video, and now we use drawImage to render a video.

First of all, the idea is to capture the current frame of the video from time to time and draw it. It's that simple. Go to the code:

Var v=document.getElementById ("video1"); var c3=document.getElementById ("c2"); ctx3=c3.getContext ('2d'); var I = null;// intercepts video frames per 20ms v.addEventListener (' play',function () {I = window.setInterval (function () {ctx3.drawImage (vPower0,180,320)}, 20);}, false); v.addEventListener ('pause',function () {window.clearInterval (I)) I = null;}, false); v.addEventListener ('ended', function () {clearInterval (I); I = null;}, false); Thank you for reading! This is the end of this article on "how to use the drawImage method in canvas". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.