仅更改图像方向，保持其他头部不变

Question

是否可以仅通过改变方向来保留其他元数据？

我正在使用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>

Answer 1

LoadImage 提供了仅更改特定值的方法。

loadImage.writeExifData(data.imageHead, data, 'Orientation', 1);

仅更改图像方向，保持其他头部不变

Change only image orientation keeping other head as is

javascript

html

image

image-rotation