A lot of information around regarding Image Cropper and Archetype, but not a lot on how to use both at the same time. Some pages even suggested to forget it and try another approach... I almost did...

It may not be the cleanest, but this is my solution and may save a developer a few hours of trouble and strife...

The try/catch is very important!

@inherits Umbraco.Web.Macros.PartialViewMacroPage
@using Archetype.Models;
@using Archetype.Extensions;
@using Newtonsoft.Json;
@using Newtonsoft.Json.Linq;

@{
    foreach (var fieldset in CurrentPage.GetPropertyValue<ArchetypeModel>("docTypeProperty"))
    {
        JObject json = JObject.Parse(fieldset.GetValue("ArchetypeProperty"));
        string img = json["src"].ToString();
        string coords = "";
        foreach (JObject itm in json["crops"])
        {
            if (itm["alias"].ToString() == "requiredCrop")
            {
                coords = " " + itm["coordinates"];
                coords = coords.TrimStart(" {").TrimEnd("}");
                try
                {
                    string[] dict = coords.Split(',');
                    string x1 = dict[0].Trim();
                    string x2 = (string)dict[1].Trim();
                    string y1 = (string)dict[2].Trim();
                    string y2 = (string)dict[3].Trim();

                    x1 = x1.Substring(x1.IndexOf(':') + 1).Trim();
                    x2 = x2.Substring(x2.IndexOf(':') + 1).Trim();
                    y1 = y1.Substring(y1.IndexOf(':') + 1).Trim();
                    y2 = y2.Substring(y2.IndexOf(':') + 1).Trim();

                    img = img + "?crop=" + x1 + "," + x2 + "," + y1 + "," + y2 + "&cropMode=percentage&width=" + itm["width"] + "&height=" + itm["height"];                     

                }
                catch
                {

                }
            }
        }
        <img src="@img" style="border: 2px solid #fff;" />
    }
}