我想在web中处理tiff类型图片。我从GitHub上下载了tiff.min.js https://github.com/seikichi/tiff.js
但是我的网页报错
我的网页也无法处理tiff类型图片。以下是我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SAM</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="tiff.min.js"></script> <!-- 确保路径正确 -->
<style>
img, canvas { max-width: 300px; }
</style>
</head>
<body>
<div>
<img src="" alt="">
</div>
<input type="file" id="upload" accept="image/*">
<button id="processButton">处理图片</button>
<!-- 新增一个div元素用于展示选择的图片 -->
<div id="originalImageContainer"></div>
<!-- 去掉原先的输出区域 -->
<script>
$('#upload').on('change', function (e) {
var curFile = this.files[0];
displaySelectedImage(curFile); // 显示选择的图片
});
$('#processButton').on('click', function() {
var curFile = $('#upload')[0].files[0];
if (curFile) {
processImage(curFile); // 处理图像
} else {
alert('请选择图片');
}
});
function displaySelectedImage(file) {
if (file.type === 'image/tiff' || file.type === 'image/tif') {
var reader = new FileReader();
reader.readAsArrayBuffer(file); // 读取文件数据
reader.onload = function (e) {
var buffer = e.target.result;
var tiff = new Tiff({ buffer: buffer });
var canvas = tiff.toCanvas();
displayOriginalImage(canvas); // 显示选择的图片
};
} else {
var reader = new FileReader();
reader.readAsDataURL(file); // 读取文件数据
reader.onload = function () {
var img = new Image();
img.src = reader.result;
img.onload = function () {
// 显示选择的图片
displayOriginalImage(img);
};
};
}
}
function processImage(file) {
if (file.type === 'image/tiff' || file.type === 'image/tif') {
var reader = new FileReader();
reader.readAsArrayBuffer(file); // 读取文件数据
reader.onload = function (e) {
var buffer = e.target.result;
var tiff = new Tiff({ buffer: buffer });
var canvas = tiff.toCanvas();
// 将图片放大两倍
var processedCanvas = document.createElement('canvas');
var ctx = processedCanvas.getContext('2d');
processedCanvas.width = canvas.width * 2;
processedCanvas.height = canvas.height * 2;
ctx.drawImage(canvas, 0, 0, canvas.width * 2, canvas.height * 2);
// 显示处理后的图像
displayProcessedImage(processedCanvas);
};
} else {
var reader = new FileReader();
reader.readAsDataURL(file); // 读取文件数据
reader.onload = function () {
var img = new Image();
img.src = reader.result;
img.onload = function () {
// 将图片放大两倍
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = img.width * 2;
canvas.height = img.height * 2;
ctx.drawImage(img, 0, 0, img.width * 2, img.height * 2);
// 显示处理后的图像
displayProcessedImage(canvas);
};
};
}
}
function displayOriginalImage(img) {
$('#originalImageContainer').empty().append(img);
}
function displayProcessedImage(img) {
$('#originalImageContainer').append('<br>'); // 添加一个换行符以区分原始和处理后的图片
$('#originalImageContainer').append(img); // 在同一位置追加处理后的图片
}
</script>
</body>
</html>
请大家帮我看看怎么回事
