canvas 加载图像

在这里插入图片描述

加载图片需要3步:
1.建立image对象.
2.设置image的src
3.image的onload事件，并切在回调中绘制我们的图像。
例如:

var canvas=document.getElementById('canvas');
			var context=canvas.getContext('2d');
			var image=new Image();
			
			image.src='https://raw.githubusercontent.com/AbdullA-Ababakre/BlogImage/master/Normalization%20process.png';			
			
			image.οnlοad=function(){
				context.drawImage(image,50,50,50,50);
			};

图像裁剪

前面我们讲到如何在 Canvas 中加载各种帅气酷炫的图像。但是有时候我们并不需要使用完整的图像，而只是图像的一部分内容，这个时候我们就需要使用图像裁剪。图像裁剪是图片 PS 中经常使用到的一种技术，目的是为了突出我们图片的某个特定的区域。接下来，让我们学习如何使用 Canvas 来裁剪我们的图像。

还是 context.drawImage()
没错，你没看错，我们还是使用 drawImage 的方法。裁剪是 drawImage 方法的最后一种用法。

context.drawImage(image, source_x, source_y, source_width, source_height, x, y, width, heigh);
它总共涉及9个参数，具体如下：

image：源图像对象
source_x：源图像的裁剪区原点横坐标
source_y：源图像的裁剪区原点纵坐标
source_width：源图像的裁剪区宽度
source_height：源图像的裁剪区高度
x：在画布上绘制图像的原点横坐标
y：在画布上绘制图像的原点纵坐标
width：在画布上绘制图像的宽度
heigh：在画布上绘制图像的高度
上面所有参数的看起来可能比较抽象，可以通过结合下面说明图进行理解：
在这里插入图片描述

实例
接下来让我们尝试截取图片的中间部分，如下图：
在这里插入图片描述

相关代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>物体移动</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');

      var image = new Image();
      image.src = 'http://coding.imweb.io/img/p3/retina-pixel.jpg';
      image.onload = function () {
        // 加载图片后，边截取图片且缩放展示在画布左上角
        context.drawImage(image, 260, 260, 480, 480, 0, 0, 240, 240);
      }
    </script>
</body>
</html>

Abudula__

发布了83 篇原创文章 · 获赞 18 · 访问量 5万+

私信关注