📅 最后修改于: 2023-12-03 15:31:37.132000 🧑 作者: Mango
在 JavaScript 中，使用 DOM（文档对象模型）操作 HTML 与 CSS，这种操作方式很常见。但是，你也可以使用 DOM 操作图像，包括创建、操纵、显示和下载图像。以下是通过 JavaScript DOM 操作图像的一些方法和技巧。
使用 DOM，可以通过创建图像元素来在 HTML 页面中展示一个图像。以下是创建 <img> 元素的方法：
const img = document.createElement('img');
img.src = 'image.png';
document.body.appendChild(img);
这将创建一个指向名为 image.png 的图像文件的 <img> 元素，并将其插入到 HTML 页面的 <body> 元素中。
要获取图像的大小，需要使用图像的 naturalWidth 和 naturalHeight 属性。以下是一个示例：
const img = document.querySelector('img');
console.log(`Image width: ${img.naturalWidth}`);
console.log(`Image height: ${img.naturalHeight}`);
这将输出图像的宽度和高度的值。
要裁剪图像，需要使用 <canvas> 元素。首先，将图像插入到 HTML 页面中：
const img = document.createElement('img');
img.src = 'image.png';
document.body.appendChild(img);
接着，使用 <canvas> 元素来创建一个绘画环境，并将其绘制到画布上，如下所示：
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 200;
canvas.height = 200;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
document.body.appendChild(canvas);
这段代码将创建一个 200x200 的画布，并将 image.png 图像裁剪到画布大小。最后，它将画布插入到 HTML 页面中。
要旋转图像，需要使用 <canvas> 元素和 rotate() 方法。以下是一个示例：
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 200;
canvas.height = 200;
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(Math.PI / 4);
ctx.translate(-canvas.width / 2, -canvas.height / 2);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
document.body.appendChild(canvas);
这段代码将创建一个 200x200 的画布，并将 image.png 图像旋转 45 度。最后，它将画布插入到 HTML 页面中。
要将画布转换为图像，可以使用 <canvas> 元素的 toDataURL() 方法。以下是一个示例：
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 200;
canvas.height = 200;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
const dataURL = canvas.toDataURL();
const img2 = document.createElement('img');
img2.src = dataURL;
document.body.appendChild(img2);
这段代码将创建一个 200x200 的画布，并将 image.png 图像绘制到画布上。然后，它将画布转换为数据 URL，并将其赋值给另一个 <img> 元素。最后，将新的 <img> 元素插入到 HTML 页面中。
以上是使用 JavaScript DOM 操作图像的一些方法和技巧。希望这对你有所帮助！