【第4章图像与视频】4.2 图像的缩放

文章目录

前言
示例-图像的缩放
在 Canvas 边界之外绘制图像

前言

在上节中读者已经学会了如何使用 drawImage() 方法将一幅未经缩放的图像绘制到 canvas 之中。现在我们就来看看如何用该方法在绘制图像的时候进行缩放

示例-图像的缩放

未缩放的图像，显示图形原有大小。

在这里插入图片描述

缩放后的图像，将图形的宽高放到到和 canvas 大小一致。

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><title>4-2-图像的缩放</title><style>body {background: #eeeeee;}#canvas {background: #ffffff;margin-top: 5px;margin-left: 10px;-webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);border: 1px solid rgba(0, 0, 0, 0.2);}</style></head><body><div id="controls"><input id="scaleCheckbox" type="checkbox" />缩放图片</div><canvas id="canvas" width="1000" height="600">canvas not supports</canvas><script>'use strict'let canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),image = new Image(),scaleCheckbox = document.getElementById('scaleCheckbox')let drawImage = () => {context.clearRect(0, 0, canvas.width, canvas.height)if (scaleCheckbox.checked) {context.drawImage(image, 0, 0, canvas.width, canvas.height)} else {context.drawImage(image, 0, 0)}context.restore()}scaleCheckbox.onchange = (e) => {drawImage()}image.src = './waterfall.png'image.onload = () => {context.drawImage(image, 0, 0)}</script></body>
</html>

在 Canvas 边界之外绘制图像

图像可以绘制在 canvas 之内，也可以通过指定坐标值将图像绘制在它之外。在应用程序放大倍数大于 1.0 的情况下，就会把图像的绘制点指定到 canvas 外面去。

如果你向 canvas 之中绘制的图像有一部分会落在 canvas 的范围之外，那么浏览器就会将 canvas 范围外的那部分图像忽略。

可以在 canvas 范围之外进行绘制，这是一项重要的功能。我们把图像绘制在 canvas 范围外，并且通过平移 canvas 的坐标系来让背景中的某一部分内容显示在当前视窗范围内。

示例：将缩放后的图片绘制于Canvas中央

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>4-4-图像的缩放</title><style>/* 设置页面背景颜色 */body {background: rgba(100, 145, 250, 0.3);}/* 调整滑动条的对齐和大小 */#scaleSlider {vertical-align: 10px;width: 100px;margin-left: 90px;}/* 设置画布的边距、边框和光标样式 */#canvas {margin: 10px 20px 0px 20px;border: thin solid #aaa;cursor: crosshair;}/* 调整控制面板的边距和内边距 */#controls {margin-left: 15px;padding: 0;}/* 设置缩放比例显示框的位置、大小和样式 */#scaleOutput {position: absolute;width: 60px;height: 30px;margin-left: 10px;vertical-align: center;text-align: center;color: blue;font: 18px Arial;text-shadow: 2px 2px 4px rgba(100, 140, 250, 0.8);}</style></head><body><div id="controls"><div id="scaleOutput">1.0</div><input type="range" id="scaleSlider" min="1" max="3.0" step="0.1" value="1.0" /></div><canvas id="canvas" width="800" height="520"> canvas not supports </canvas><script>// 获取HTML元素const canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),scaleSlider = document.getElementById('scaleSlider'),scaleOutput = document.getElementById('scaleOutput'),MIN_SCALE = 1.0,MAX_SCALE = 3.0let scale = 1.0const image = new Image()// 绘制图像的函数function drawImage() {const w = canvas.width,h = canvas.height,sw = w * scale,sh = h * scalecontext.clearRect(0, 0, w, h)context.drawImage(image, w / 2 - sw / 2, h / 2 - sh / 2, sw, sh)}// 更新缩放比例文本的函数function drawScaleText(value) {const text = parseFloat(value).toFixed(1)let percent = parseFloat(value - MIN_SCALE) / parseFloat(MAX_SCALE - MIN_SCALE)scaleOutput.textContent = textpercent = percent < 0.35 ? 0.35 : percentscaleOutput.style.fontSize = (percent * MAX_SCALE) / 1.5 + 'em'}// 滑动条的事件处理函数scaleSlider.onchange = (e) => {scale = e.target.valueif (scale < MIN_SCALE) {scale = MIN_SCALE} else if (scale > MAX_SCALE) {scale = MAX_SCALE}drawScaleText(scale)drawImage()}// 初始化画布样式context.fillStyle = 'rgba(100, 140, 250, 0.5)'context.strokeStyle = 'yellow'context.shadowColor = 'rgba(50, 50, 50, 1.0)'context.shadowOffsetX = 5context.shadowOffsetY = 5context.shadowBlur = 10// 设置图像源image.src = 'waterfall.png'// 图像加载完成后的事件处理函数image.onload = () => {drawImage()drawScaleText(scaleSlider.value)}</script></body>
</html>