We have a custom datatype in v6.0.5 that is based on the ImageCropper (https://our.umbraco.org/projects/backoffice-extensions/image-cropper/).

The data for it is stored in cmsPropertyData in the following format:

<crops date="2016-08-23T17:02:21">
<crop name="1x1" x="0" y="0" x2="255" y2="255" url="/media/8069/wellington-3_1x1.jpg" />
<crop name="1x2" x="0" y="0" x2="255" y2="522" url="/media/8069/wellington-3_1x2.jpg" />
<crop name="2x1" x="0" y="0" x2="522" y2="255" url="/media/8069/wellington-3_2x1.jpg" />
<crop name="2x2" x="0" y="0" x2="522" y2="522" url="/media/8069/wellington-3_2x2.jpg" />
</crops>

and the source file url is stored against a different property field.

We need to upgrade the site to Umbraco v7.5.3. How do we handle the migration of the hundreds of media items that were using the old ImageCropper?

The v7.5.3 ImageCropper stores data in the following format:

{
  "focalPoint": {
    "left": 0.5,
    "top": 0.5
  },
  "src": "/media/8109/storytelling_memory_2009.jpg",
  "crops": [
    {
      "alias": "1x1",
      "width": 255,
      "height": 255,
      "coordinates": {
        "x1": 0,
        "y1": 0,
        "x2": 0,
        "y2": 0
      }
    },
    {
      "alias": "1x2",
      "width": 255,
      "height": 522,
      "coordinates": {
        "x1": 0.45149305555555552,
        "y1": 1.2631870857957334E-16,
        "x2": 0.060001197318007869,
        "y2": 0
      }
    },
    {
      "alias": "2x1",
      "width": 522,
      "height": 255,
      "coordinates": {
        "x1": 0,
        "y1": 0.026209548706717042,
        "x2": 0.342514749585784,
        "y2": 0.652605127815074
      }
    },
    {
      "alias": "2x2",
      "width": 522,
      "height": 522,
      "coordinates": {
        "x1": 0.35328397077724727,
        "y1": 0.054955284343127353,
        "x2": 0.14202464239811383,
        "y2": 0.44035332883223371
      }
    }
  ]
}