js 缩小图片宽高
时间: 2023-07-08 22:24:11 浏览: 43
你可以使用HTML5中的canvas元素和JavaScript来缩小图片的宽高。下面是一个简单的示例代码:
```html
<!-- HTML代码 -->
<img id="myImage" src="example.jpg">
<canvas id="myCanvas" style="display:none;"></canvas>
```
```javascript
// JavaScript代码
var img = document.getElementById("myImage");
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 设置缩小后的宽高
var width = 100;
var height = 100;
// 在canvas上绘制缩小后的图片
ctx.drawImage(img, 0, 0, width, height);
// 将canvas转换为缩小后的图片
var dataURL = canvas.toDataURL("image/jpeg");
// 将缩小后的图片显示出来
img.src = dataURL;
```
这段代码的作用是将id为"myImage"的图片缩小为100x100像素,并将缩小后的图片显示出来。你可以根据需要修改代码中的宽高参数。注意,缩小图片会导致图片失真,因此需要根据实际需求进行权衡。
相关问题
js new image 调整宽高
在 JavaScript 中使用 `new Image()` 创建图片对象后,可以通过设置 `width` 和 `height` 属性来调整图片的宽度和高度。例如:
```javascript
var img = new Image();
img.src = 'image.jpg';
img.width = 300; // 设置宽度为300像素
img.height = 200; // 设置高度为200像素
document.body.appendChild(img); // 将图片添加到页面中
```
需要注意的是,设置图片的宽度和高度可能会导致图片变形,因此最好按比例缩放。可以通过计算图片的宽高比来保持比例不变。例如:
```javascript
var img = new Image();
img.src = 'image.jpg';
img.onload = function() {
var aspectRatio = img.width / img.height; // 计算宽高比
img.width = 300; // 设置宽度为300像素
img.height = 300 / aspectRatio; // 根据宽高比计算高度
document.body.appendChild(img); // 将图片添加到页面中
};
```
js中根据指定高度对图片进行等比例缩放
根据指定高度对图片进行等比例缩放可以通过计算图片的宽高比来实现。
假设我们要把一张图片缩放到指定高度 `height`,可以按照以下步骤进行操作:
1. 创建一个图片对象并加载图片:
```javascript
var img = new Image();
img.src = 'image.jpg';
```
2. 等待图片加载完成:
```javascript
img.onload = function() {
// 在这里进行缩放操作
};
```
3. 计算图片的宽高比:
```javascript
var aspectRatio = img.width / img.height;
```
4. 根据宽高比计算图片的新宽度:
```javascript
var newWidth = height * aspectRatio;
```
5. 设置图片的新宽度和高度:
```javascript
img.width = newWidth;
img.height = height;
```
完整的代码如下:
```javascript
var img = new Image();
img.src = 'image.jpg';
img.onload = function() {
var height = 200; // 指定缩放后的高度
var aspectRatio = img.width / img.height; // 计算宽高比
var newWidth = height * aspectRatio; // 计算新宽度
img.width = newWidth; // 设置新宽度
img.height = height; // 设置新高度
document.body.appendChild(img); // 将缩放后的图片添加到页面中
};
```
需要注意的是,如果图片的宽度小于计算得到的新宽度,那么图片的宽度就不会被放大,仍然保持原始宽度。如果需要强制放大图片,可以在计算新宽度时增加一个放大系数,例如 `var newWidth = height * aspectRatio * 1.5;`。