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

问题描述

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

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

相关问答

依赖报错 idea导入项目后依赖报错,解决方案:https://blog....
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
错误1:gradle项目控制台输出为乱码 # 解决方案:https://bl...
错误还原:在查询的过程中,传入的workType为0时,该条件不起...
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct...