HTML5 - преоразмерете изображението и запазете EXIF ​​в преоразмереното изображение

Как мога да преоразмеря изображение (с помощта на HTML5 canvas елемент) и да запазя EXIF ​​информацията от оригиналното изображение? Мога да извлека EXIF ​​информация от оригиналното изображение, но не знам как да го копирам в преоразмереното изображение.

Ето как извличам преоразмерените данни за изображение, за да ги изпратя към кода от страната на сървъра:

canvas.toDataURL("image/jpeg", 0.7);

За извличане на EXIF ​​използвам библиотеката exif.js.


person Martin Perry    schedule 18.08.2013    source източник


Отговори (4)


Работещо решение: ExifRestorer.js

Употреба с преоразмеряване на HTML5 изображение:

function dataURItoBlob(dataURI) 
{
    var binary = atob(dataURI.split(',')[1]);
    var array = [];
    for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
}

И основен код, взет като част от HTML5 resizer от тази страница: https://github.com/josefrichter/resize/blob/master/public/preprocess.js (но леко модифициран)

var reader = new FileReader();

//reader.readAsArrayBuffer(file); //load data ... old version
reader.readAsDataURL(file);       //load data ... new version
reader.onload = function (event) {
// blob stuff
//var blob = new Blob([event.target.result]); // create blob... old version
var blob = dataURItoBlob(event.target.result); // create blob...new version
window.URL = window.URL || window.webkitURL;
var blobURL = window.URL.createObjectURL(blob); // and get it's URL

// helper Image object
var image = new Image();
image.src = blobURL;

image.onload = function() {

   // have to wait till it's loaded
   var resized = ResizeImage(image); // send it to canvas

   resized = ExifRestorer.restore(event.target.result, resized);  //<= EXIF  

   var newinput = document.createElement("input");
   newinput.type = 'hidden';
   newinput.name = 'html5_images[]';
   newinput.value = resized; // put result from canvas into new hidden input
   form.appendChild(newinput);
 };
};
person Martin Perry    schedule 18.08.2013
comment
Бихте ли създали репо GitHub за вашия файл ExifRestorer.js и бихте ли добавили лиценз, така че другите да могат да го използват? Или бихте изрично посочили условията, при които другите могат да използват кода във вашия отговор тук? - person Kenny Evitt; 16.10.2014
comment
@KennyEvitt Можете да използвате код, както желаете. Не съм го създал, просто съединих няколко части от различни кодове заедно. - person Martin Perry; 16.10.2014
comment
@MartinPerry - Работи идеално с моя код - правя някои манипулации на изображения на платно - след това мога да възстановя данни. Въпреки това бих искал да презапиша стойността на exif ориентация на изображението. След като завъртя изображение с платно - exif ориентацията остава неправилна. Има ли някакво решение за това? - person krystiangw; 01.07.2015
comment
Благодаря за ExifRestorer.js. Прекрасен сценарий! ‹3 - person larsemil; 13.12.2017
comment
За да накарате ExifRestorer.js да работи с типове файлове, различни от jpeg, е необходимо да замените срещанията на 'data:image/jpeg;base64,' в библиотеката с /data:image\/\w+;base64,/ - person whirmill; 29.06.2018

Изглежда моят код се използва в „ExifRestorer.js“...

Опитах да преоразмеря изображението по платно. И почувствах, че преоразмереното изображение е с лошо качество. Ако и вие се чувствате така, опитайте моя код. Моят код преоразмерява JPEG чрез билинейна интерполация. Разбира се, не губи exif.

https://github.com/hMatoba/JavaScript-MinifyJpegAsync

function post(data) {
    var req = new XMLHttpRequest();
    req.open("POST", "/jpeg", false);
    req.setRequestHeader('Content-Type', 'image/jpeg');
    req.send(data.buffer);
}

function handleFileSelect(evt) {
    var files = evt.target.files;

    for (var i = 0, f; f = files[i]; i++){
        var reader = new FileReader();
        reader.onloadend = function(e){
            MinifyJpegAsync.minify(e.target.result, 1280, post);
        };
    reader.readAsDataURL(f);
    }
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);
person hMatoba    schedule 19.02.2015

Можете да използвате copyExif.js.

Този модул е ​​по-ефективен от решението на Martin и използва само Blob и ArrayBuffer без Base64 енкодер/декодер.

Освен това не е необходимо да използвате exif.js, ако искате да запазите само EXIF . Просто копирайте целия маркер APP1 от оригиналния JPEG в целевия платнен обект и той просто ще работи. Това е и начина, по който copyExif.js.

Използване

демонстрация: https://codepen.io/tonytonyjan/project/editor/XEkOkv

<input type="file" id="file" accept="image/jpeg" />
import copyExif from "./copyExif.js";

document.getElementById("file").onchange = async ({ target: { files } }) => {
  const file = files[0],
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d");

  ctx.drawImage(await blobToImage(file), 0, 0, canvas.width, canvas.height);
  canvas.toBlob(
    async blob =>
      document.body.appendChild(await blobToImage(await copyExif(file, blob))),
    "image/jpeg"
  );
};

const blobToImage = blob => {
  return new Promise(resolve => {
    const reader = new FileReader(),
      image = new Image();
    image.onload = () => resolve(image);
    reader.onload = ({ target: { result: dataURL } }) => (image.src = dataURL);
    reader.readAsDataURL(blob);
  });
};
person Weihang Jian    schedule 23.09.2019
comment
Направих някои промени в горния код, както изисквах. Сега, когато изображението се върти, искам да задам Ориентация на 0, можете ли да ми помогнете? и не мога да използвам ctx.transform, защото искам Blob обект в края. - person mangeshbhuskute; 28.04.2021

Canvas генерира изображения със заглавка от 20 байта (преди да започнат сегментите с jpeg данни). Можете да изрежете глава с exif сегменти от оригиналния файл и да замените първите 20 байта в преоразмерен.

person Vitaly    schedule 21.09.2014