问题描述
是否可以仅通过改变方向来保留其他元数据?
我正在使用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);