仅更改图像方向,保持其他头部不变
Change only image orientation keeping other head as is
是否可以仅通过改变方向来保留其他元数据?
我正在使用https://github.com/blueimp/JavaScript-Load-Image
我创建了以下 jsbin,当我替换 head 时,它失去了方向。有办法解决这个问题吗?
https://jsbin.com/cemeqeniru/2/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdn.jsdelivr.net/npm/exifr/dist/lite.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/5.14.0/load-image.all.min.js" integrity="sha512-HZg0q8NV+VTxnU6hdkK0rL+fSmTGCbXZ3mHjqCCi87St5QRdvXENfRxkMK692inskRsCPee07d7VwcKNWaByCQ==" crossorigin="anonymous"></script>
<script>
function onCameraCapture(file) {
document.getElementById('original').src = window.URL.createObjectURL(file);
loadImage(
file,
function (img, data) {
if (data.imageHead) {
img.toBlob(function (blob) {
loadImage.replaceHead(blob, data.imageHead, function (newBlob) {
document.getElementById('converted').src = window.URL.createObjectURL(newBlob);
// do something with the new Blob object
})
}, 'image/jpeg')
}
},
{ meta: true, canvas: true, orientation: 1 }
);
}
</script>
</head>
<body>
File
<input type="file" accept="image/*" capture="camera" onchange="onCameraCapture(this.files[0])">
<br>
<br>
Take Photo
<input type="file" accept="image/*" capture="camera" onchange="onCameraCapture(this.files[0])">
<br>
<br>
Original
<img id="original" src="" width="100" height="100">
<br>
Converted
<img id="converted" src="" width="100" height="100">
</body>
</html>
LoadImage 提供了仅更改特定值的方法。
loadImage.writeExifData(data.imageHead, data, 'Orientation', 1);
是否可以仅通过改变方向来保留其他元数据?
我正在使用https://github.com/blueimp/JavaScript-Load-Image
我创建了以下 jsbin,当我替换 head 时,它失去了方向。有办法解决这个问题吗?
https://jsbin.com/cemeqeniru/2/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdn.jsdelivr.net/npm/exifr/dist/lite.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/5.14.0/load-image.all.min.js" integrity="sha512-HZg0q8NV+VTxnU6hdkK0rL+fSmTGCbXZ3mHjqCCi87St5QRdvXENfRxkMK692inskRsCPee07d7VwcKNWaByCQ==" crossorigin="anonymous"></script>
<script>
function onCameraCapture(file) {
document.getElementById('original').src = window.URL.createObjectURL(file);
loadImage(
file,
function (img, data) {
if (data.imageHead) {
img.toBlob(function (blob) {
loadImage.replaceHead(blob, data.imageHead, function (newBlob) {
document.getElementById('converted').src = window.URL.createObjectURL(newBlob);
// do something with the new Blob object
})
}, 'image/jpeg')
}
},
{ meta: true, canvas: true, orientation: 1 }
);
}
</script>
</head>
<body>
File
<input type="file" accept="image/*" capture="camera" onchange="onCameraCapture(this.files[0])">
<br>
<br>
Take Photo
<input type="file" accept="image/*" capture="camera" onchange="onCameraCapture(this.files[0])">
<br>
<br>
Original
<img id="original" src="" width="100" height="100">
<br>
Converted
<img id="converted" src="" width="100" height="100">
</body>
</html>
LoadImage 提供了仅更改特定值的方法。
loadImage.writeExifData(data.imageHead, data, 'Orientation', 1);