Jump to content

How to extract annotation information from Annotated Evernote(Skitch) Images ?


jocomoco

Recommended Posts

Hi,

 

Introduction:

 

I would like to write an app for Evernote that uses the annotation feature available for images.

 

As an example, the file below was annotated in Evernote and saved to disk.

 

If you open this image in Evernote or Skitch, you can modify the annotation, as if it was a vector file format (like SVG).

 

But the magic is that you can also open the same image file in any(!) image viewer as a normal PNG  and you can still see the annotated image (magic !) but and you cannot edit the annotation.

 

 

So the secret behind the magic - in my understanding - is that this is saved in Special PNG format (Skitch PNG format) which contains:

 

1) the original, un-annotated image

2) annotation information (text content, position, size, font color, etc..)

3) the flattened annotated PNG image (which is what gets displayed when you open this file in a "normal" image viewer). 

 

Now the questions:

 

How can I extract the annotation information from this Special PNG format ?

 

How is the annotation information stored in this image?

 

Is this described somewhere in detail ?

 

I have searched the web very throughly and did not find this information anywhere. I wonder - is this information some kind of secret or am I just the first one who wants to know how this works and use it to develop Evernote compatible software ?

 

Is it possible to get this information from Evernote so that I can develop an application that is compatible with Evernote's format and users of my application can benefit from exchanging information between my application and their Evernote accounts ?

 

Regards,

 

Jozsef

 

 post-269465-0-70688200-1442655592_thumb.

Link to comment
  • 3 weeks later...
  • 1 year later...

I can't reply to the topic in the developers forum, so I'll reply here. Sorry if necro-bumping is disapproved of, but this information might be useful to someone in the future.

The extra information is stored in two chunks as defined by the PNG format specification (it's also detailed in the wikipedia article). These chunks are "skMf" and "skRf". The content of the skMf chunk is a description of the annotation (colours, fonts, position, text, etc.) encoded in JSON and stored as an uncompressed string. If you're on linux you can easily see this chunk by just using the "strings" command to print out all the printable characters in the png file. I've included the JSON from the example file you provided below:

{
  "children": [
    {
      "children": [
        {
          "frame": {
            "height": 512, 
            "width": 512, 
            "x": 0, 
            "y": 0
          }, 
          "guid": "CFA3CD9F-25B8-4B05-A0DE-9FC329D8252E", 
          "imageProfile": 0, 
          "type": "Bitmap", 
          "uri": "skitch+uuid:///8a52cfa7-bd07-4fef-98ae-9440dd10b859"
        }
      ], 
      "guid": "DC69298F-E3A1-4E8F-8B97-DC311E50F0D5", 
      "layerId": "__background__", 
      "type": "Layer"
    }, 
    {
      "guid": "5B4F094F-7898-4652-803F-276BE349015C", 
      "layerId": "__annotation__", 
      "type": "Layer"
    }, 
    {
      "children": [
        {
          "alignment": "left", 
          "direction": "leftToRight", 
          "fillColor": {
            "alpha": 1, 
            "blue": 255, 
            "green": 255, 
            "red": 255
          }, 
          "font": {
            "name": "Helvetica-Bold", 
            "size": 24
          }, 
          "guid": "71E42721-ECC5-4F6E-BCAA-FF6753133A0F", 
          "lineWidth": 6.720000000000001, 
          "origin": {
            "x": 78.81640625, 
            "y": 101.13953125
          }, 
          "strokeColor": {
            "alpha": 1, 
            "blue": 0, 
            "green": 0, 
            "red": 0
          }, 
          "text": "how can I extract the position, size and content of this annotation?", 
          "textStyle": "bubbleText", 
          "type": "Text", 
          "wrapWidth": 363.11328125
        }
      ], 
      "guid": "05BFB592-7B5F-4902-8FD9-AEF45B860F2B", 
      "layerId": "__text__", 
      "type": "Layer"
    }
  ], 
  "contentScaleFactor": 1, 
  "deviceScale": 1, 
  "frame": {
    "height": 512, 
    "width": 512, 
    "x": 0, 
    "y": 0
  }, 
  "guid": "8622A429-00E2-446B-9744-027D77B5088F", 
  "metadata": {
    "creator": "skitch-mac", 
    "creatorVersion": "452118", 
    "version": "1.2"
  }, 
  "type": "Document"
}

The skRf chunk is much, much larger and I believe it contains the raw image without annotations. I haven't tried to decode it, but I'd guess that it's encoded in the same way as the IDAT chunks containing the standard image data. The size of the skRf chunk is very similar to the total size of all the IDAT chunks.

EDIT: It turns out the skRf chunk contains 16 bytes of unknown data, followed by an entire valid png file. If you dump the contents of the skRF chunk (minus those 16 bytes) to a file, it will open in any standard image viewer. This is the original un-annotated image.

Link to comment

dear @Transient Visitor

I an sure the Evernote programmers know where the Skitch annotations are stored in and how to extradite the original.

Anybody who needs the original should retain the original and work/annotate on a copy. Simple and proven method.

Unless you or any other programmer will more or less make the intended application freeware I'd say you are onto a looser.

Why? A doubleclick on the original picture file opens the designated editor on a desktop. Do you honestly believe that anybody with a minimum of editing knowledge regards Skitch-like editing as particularly desirable? Apps capable of layer-editing do the job much more neatly.

Write an viewing app for image formats supporting layers  within Evernote and you will be onto a winner. Goof Luck!

 Btw: 2 layers do the job, background and edited layer (editing layers can be flattened).

 

 

 

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...