I was trying to modify the dpi header of an image in the exif data. I know it can be done in native iOS/Android scenario. But is it possible to do in Javascript for the images retrieved from Canvas. Please suggest. Thanks

I was trying to modify the dpi header of an image in the exif data. I know it can be done in native iOS/Android scenario. But is it possible to do in Javascript for the images retrieved from Canvas. Please suggest. Thanks

• javascript
• image-processing
• canvas
• html5-canvas
• dpi

2 Answers 2

Try canvas sample in piexifjs.

1. Get exif binary.
2. Get jpeg from canvas.

3. Insert exif binary into jpeg.

   // make exif data
   var zerothIfd = {};
   var exifIfd = {};
   var gpsIfd = {};
   zerothIfd[piexif.ImageIFD.Make] = "Maker Name";
   zerothIfd[piexif.ImageIFD.XResolution] = [777, 1];
   zerothIfd[piexif.ImageIFD.YResolution] = [777, 1];
   zerothIfd[piexif.ImageIFD.Software] = "Piexifjs";
   exifIfd[piexif.ExifIFD.DateTimeOriginal] = "2010:10:10 10:10:10";
   exifIfd[piexif.ExifIFD.LensMake] = "Lens Maker";
   exifIfd[piexif.ExifIFD.Sharpness] = 777;
   exifIfd[piexif.ExifIFD.LensSpecification] = [[1, 1], [1, 1], [1, 1], [1, 1]];
   gpsIfd[piexif.GPSIFD.GPSVersionID] = [7, 7, 7, 7];
   gpsIfd[piexif.GPSIFD.GPSDateStamp] = "1999:99:99 99:99:99";
   var exifObj = {"0th":zerothIfd, "Exif":exifIfd, "GPS":gpsIfd};
   
   // get exif binary as "string" type
   var exifBytes = piexif.dump(exifObj);
   
   // get JPEG image from canvas
   var jpegData = document.getElementById("canvas").toDataURL("image/jpeg", 1.0);
   
   // insert exif binary into JPEG binary(DataURL)
   var exifModified = piexif.insert(exifBytes, jpegData);
   

Yes it is passible,

1. You need to convert canvas to blob (file)
2. You need to convert blob to DataView
3. You need to find exif data in dataview, and exif tag position in dataview (offset)
4. You need to replace data in dataview by dataView.setUint8(offset, value, bigEndian);
5. convert dataview to base64 or image or blob

Exif is a binary data so, you will convert your dpi to binary and put it to dataview

You can use or see code in ExifRestorer.js and exif.js. First link is for insert exif data, second is for parse exif data