javascript - 仅更改图像方向,保持其他头部不变
问题描述
是否可以仅通过更改方向来保留其他元数据?
我正在使用https://github.com/blueimp/JavaScript-Load-Image
我创建了以下 jsbin,当我替换 head 时,它失去了方向。有没有办法来解决这个问题?
https://jsbin.com/cemeqeniru/2/edit?html,输出
<!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);
推荐阅读
- blazor - 如何在 Blazor 中使用 Substring 方法处理父子关系?
- php - 断言响应对象包含特定成功消息的最简单方法是什么?
- vue.js - Vuejs 不会在 Vuex 突变时更新 DOM
- html - 图像目标丢失后保留3D模型
- task - 整形手术对身体安全吗?
- c# - 无论如何要提高没有字段的属性的“INotifyPropertyChanged”接口?
- datetime - 是否有停用 Python 中的 %d (整数占位符)的选项?我想使用 %d 进行从字符串到日期时间的时间转换
- android - 如何在颤动的下拉菜单中创建单选按钮?
- typescript - JEST 存根转换
- docker - 如何覆盖docker容器中的文件