图片格式转换在JavaScript中可以通过多种方式实现,以下是一些基础概念和相关信息:
以下是一个简单的示例,展示如何使用JavaScript和Canvas API将JPEG图片转换为PNG格式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Format Conversion</title>
</head>
<body>
<input type="file" id="inputImage" accept="image/*">
<canvas id="myCanvas" style="display:none;"></canvas>
<img id="outputImage" alt="Converted Image">
<script>
document.getElementById('inputImage').addEventListener('change', function(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.onload = function() {
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const dataURL = canvas.toDataURL('image/png');
document.getElementById('outputImage').src = dataURL;
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
});
</script>
</body>
</html>
toDataURL
方法的第二个参数来控制质量,例如canvas.toDataURL('image/jpeg', 0.9)
。通过以上方法,你可以在JavaScript中实现图片格式的转换,并根据具体需求进行调整和优化。
没有搜到相关的文章