Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SUGGESTION: URI in the meta data of SVG.PNG files #212

Open
1 of 4 tasks
saxtron3000 opened this issue Apr 8, 2022 · 5 comments
Open
1 of 4 tasks

SUGGESTION: URI in the meta data of SVG.PNG files #212

saxtron3000 opened this issue Apr 8, 2022 · 5 comments

Comments

@saxtron3000
Copy link
Contributor

saxtron3000 commented Apr 8, 2022

This way, users can redraw/modify their character from a downloaded image.

  • Write SVG data
  • Read SVG data
  • Write PNG data
  • Read PNG data
@millette
Copy link
Collaborator

millette commented Apr 9, 2022

SVG already supports this (URL written to Copyright meta data).

For png, see https://sharp.pixelplumbing.com/api-output#withmetadata

https://exiftool.org https://www.npmjs.com/package/exiftool-vendored

Notes from https://exiftool.org/TagNames/EXIF.html:

ImageUniqueID string ExifIFD
ImageDescription string IFD0

For png, also add Copyright info:

Copyright string IFD0 (may contain copyright notices for photographer and editor, separated by a newline. As per the EXIF specification, the newline is replaced by a null byte when writing to file, but this may be avoided by disabling the print conversion)

This would take care of writing the data. Reading and interpreting would be the next task.

@millette
Copy link
Collaborator

millette commented Apr 9, 2022

After a few tries it looks like sharp doesn't support png metadata. We have the option to save jpeg instead of png (smaller file - although compressed, the svg is always available for pristine quality) or turn to an external tool to save png metadata.

@millette
Copy link
Collaborator

millette commented Apr 9, 2022

const ExifTool = require("exiftool-vendored").ExifTool
const exiftool = new ExifTool({ taskTimeoutMillis: 500 })

async function runner() {
  await exiftool
    .write("oyoy-6.png", {
      "PNG:SOURCE": "https://charactercreator.org/#skinColor=%235c3836&irisColor=%23552200&hairColor=%231a1a1a&pupils=round&sex=m&body_head=oblong&ears=outstretched&nose=syrid&emotion=omg&shirt=turtleneck&shirtColor=%23BEE9C5&pants=cargo&pantsColor=%23b19f92&belt=utility&hat=chinese_farmer&hatColor=%23b19f92&glasses=round&shoes=loafers&tie=neck&tieColor=%23b19f92"
    })
  exiftool.end()
}

runner().catch(console.error)

Et on trouve le output:

{
  SourceFile: '/home/millette/exif/oyoy-6.png',
  errors: [],
  ExifToolVersion: 12.4,
  FileName: 'oyoy-6.png',
  Directory: '/home/millette/exif',
  FileSize: '111 KiB',
  FileModifyDate: ExifDateTime {
    year: 2022,
    month: 4,
    day: 9,
    hour: 14,
    minute: 48,
    second: 55,
    millisecond: 0,
    tzoffsetMinutes: -240,
    rawValue: '2022:04:09 14:48:55-04:00',
    zoneName: 'UTC-4'
  },
  FileAccessDate: ExifDateTime {
    year: 2022,
    month: 4,
    day: 9,
    hour: 14,
    minute: 48,
    second: 55,
    millisecond: 0,
    tzoffsetMinutes: -240,
    rawValue: '2022:04:09 14:48:55-04:00',
    zoneName: 'UTC-4'
  },
  FileInodeChangeDate: ExifDateTime {
    year: 2022,
    month: 4,
    day: 9,
    hour: 14,
    minute: 48,
    second: 55,
    millisecond: 0,
    tzoffsetMinutes: -240,
    rawValue: '2022:04:09 14:48:55-04:00',
    zoneName: 'UTC-4'
  },
  FilePermissions: '-rw-rw-r--',
  FileType: 'PNG',
  FileTypeExtension: 'png',
  MIMEType: 'image/png',
  ImageWidth: 1000,
  ImageHeight: 1000,
  BitDepth: 8,
  ColorType: 'RGB with Alpha',
  Compression: 'Deflate/Inflate',
  Filter: 'Adaptive',
  Interlace: 'Noninterlaced',
  PixelsPerUnitX: 2835,
  PixelsPerUnitY: 2835,
  PixelUnits: 'meters',
  Source: 'https://charactercreator.org/#skinColor=%235c3836&irisColor=%23552200&hairColor=%231a1a1a&pupils=round&sex=m&body_head=oblong&ears=outstretched&nose=syrid&emotion=omg&shirt=turtleneck&shirtColor=%23BEE9C5&pants=cargo&pantsColor=%23b19f92&belt=utility&hat=chinese_farmer&hatColor=%23b19f92&glasses=round&shoes=loafers&tie=neck&tieColor=%23b19f92',
  CodedCharacterSet: 'UTF8',
  EnvelopeRecordVersion: 4,
  ImageSize: '1000x1000',
  Megapixels: 1
}

Voici l'exemple png:

oyoy-6

@millette
Copy link
Collaborator

millette commented Apr 9, 2022

One more thing: webp format (supports non-lossy compression, à la png) works with sharp and it also supports exif metadata. It's probably the best option, if we wish to change image format.

@saxtron3000
Copy link
Contributor Author

saxtron3000 commented Apr 18, 2022 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants