Embedded image data inside a JSON string.

Report · Jan 02, 2016

Hello everyone!

I would like to put "stringified" image data into a JSON string so that I can use these in ScriptUI, and pull them from a JSON object.

An example is this:

"image":"\u0089PNG\r\n\x1A\n\x00\x00\x00\rIHDR\x00\x00\x00F\x00\x00\x00\x1E\b\x02\x00\x00\x00\x1E\u0091\u00FFI\x00\x00\x00\x19tEXtSoftware\x00Adobe ImageReadyq\u00C9e<\x00\x00\x03\u0099IDATx\u00DA\u00EC\u0098\u00CDK\x14a\x1C\u00C7\u009DZ\u00EC\u00D0\u00AE\x07\x13\u00D4\u00C4\u00C2\u0097\u00D8,\u00D8\x12\u0094\u00A0\b\u00A2 \n\x02o\u00DD:t\u00EC\u00D6\u00BDK\u00E7\u00AE]\u00FA\x03\u00BAu\bO\u0082\u0081\u0087\u00C4 \x14,\u0083PR\u00935S!]h\u00D7C\u00B3\u0097>\u00E3\u00D7~>\u00CC\u00AC\u00B3\u00B9\u00BB\u00A2\u00C8>\f\x0F\u00CF<\u00FB{\x7F\u009F\u00F5\u00DE\u008F\u00CE4\x1C\u00AFu\u00A2\u00E1\u00D8\u00AD\u00BAJu\u0095\u008E\u008AJk\u00EB?\u00E7\x17\u00E6\u008E\u009B\u0097\n[\u00F9Z1\u00C0@\u009Ff\u00A6\u00D8c`\x00\u00D8/\u00D9\x18\u0094DT\u0082o\x0B\u00B3\u0086\u00B6\u00BA\u00B6\u00D2\u00DE\u00D6\u00A1\u00D7\u00E4\u00E9T[\u00EB\u00D9\u00F9\u00C5\x1D\x07^\u00CD\f\u0084\u00A8\u00F7v\u00A7\u0093\u00C9\u0094\u00CE\u00F8Yv\u0081Z\x7Ff\u0090\u00BDP\u00C8\u009B\u00A5\f\u00D7\u00E5\b\u00FD\u00DE\u009E\u00B4K\u00D0n\u00C0\x15_ndq\u00A1\u00B8\x1Cm\u009D|\u00FC\u00E8\u0089\u00FB\x0E\u00C4\u00F9\u00CE\u00AE\\n\x03\u00E9y.\u00F4\\\x1C\u00FF0v\u00E7\u00D6=\u00CE~\u00D1\u00FF85q\u00F3\u00FAm\u00CE\u0090\u00CE./57\u00B7Hm]~\u009D\u00FD\u00C2.:\u00D9\x1FK\u00C8\u00CD\u00EB\u0099\u00E6\x16\u00DF\u00F7\u00A13=3\x19\u00C25\u008E\u00C5\u00A2\x0F\u00B0n \b\u00C0\u00A5\u00BE\u008C8\"=\x00P\x165n6s\x1B\u009C\u0085\u00D2\u00D8x\u00AA\u0092\u00F2\u00804:@q\u00D7c\u00C9\u0094L\x0E{\u00D9\u00C9u/+_\u00F8m\u0096f\u00C7.\u00E8\x13\u00C2-\u00B9 \"\u00CF\u0088\u00A3\"\u00D6\u00A8\u00C9\"\u00F1\x02'\u00AAL\x15\u00E4Km5aZ\u00B9T\u0097(@\u00A8\u00B0\u00A7\u0092M\n\u00B3\u00D5\u00F5\x15\u008BX\u00D3\u00B3D\x0E\x17\u00F2\u00FC\u00E4\u00E6\u0089\u00DC\u00AE`\x11\u0080\u0099f\x07>\x12x\u0089\u00EA\u00B3\u00DF\x12C^\"\u008B\u00D0\u0084\u00FCq\u0099q\u00E3\u00E6\u00CF^\u00C9\u008D\u00DA\x04B\bR\u00BE2M\\\u0087\x03\u00EF\x02\u00C7\x05\x1E\u00E9af0\u00A7\u00EFu6\u00DD\x14$\x04\x15?\u00C1\x18i\u00EC!\u008FM\u008Dh\u0087\u00B0\x00\u0093\x03\u00ED\f\x11yi\u00FA\u00F3\u00A4\u00F1mo\u00ED\u0088\u00B7\u00B2\x17\x1A[\u00AD\u00B6\u00B8\u009C\u00940%\u00CF\u00C4\u00BDdU\u0094\u0083\u008B\u00F4!\u00E3\u0089\u00A6\u00EE\x05iUd\u00D7?\u00DB\x15RXf\x1D+hv\x13\u00AA\u0081%Iy\x071\u0089\u008F\u008C\x0E\u00DF\u00BF;d\u00AF\x18;\x14\u0087\x07\u00BA\u00CA\u00AB$\x0B\u0099y*h\u0085%\u00BB\u00C7\u00A1\u00CDxA\x7F,\x04\u00F1\u00F0\u00F2\u00D5\u008B}\u00D1\x05\u00C5\u009E\u00FF\u00D7\u00E7\u00D9\u00F3\u00A7e\u00ED[\u0095\u0097\u00E4\x1Fl\x1C\u00EC=\u00E9P\u00F8\u00CAu\u00AA\x07\u00FC\x14\u00F5\u00A1\u00CA@\u0090c\u00FFT2\u0082\u0096\u008D\u00C18\u00B20\u00C7\u00AB\u00E5\u00AD\x11\u00D7Y\u009DW\u00DCU\u00E2\u00CA\u00C6K\u009C\u0097\u00A0H]\u0096\x1A\u00F0\u00A0\u00FD+}\u00DF\u00BC}\u00BD#\u00CD\u00E2\u00DC\u00C8\u00BBa\u00E3\x1D\n<)/`%\u0098\u00BC\u00A7\u00B1\x18\u00C9T\x15\u00A5CP\x1E\u00B6[\u0099)\u00CF\x19\\\u00F4\x07\u0080\u00B3\u00AC\u0080<\u00D1zPf \n-\u009B;\u0090\u00FE\u00DA\u00C0\r\u009B\u00984\u00FB\u00F0l\u00E6~]\u00EE\u00CB\u00F0\n3\x0E\u00AE\u0087\u00CFuv\u0081\u00E8y\u009E\\\u00C1\u00AF\x1Ay\u0098\u00AA\u00FC\u00E2\x1F\u00BA'\u00C4\u00E51$\u00E6\u00A6\u00FF\u00CA 7\u0092\u0098=\u00BB\u00FC}\u00E8\u00C1C(\u00F0\u00C0\x11\u00E5\u0099\u0092\x00\u0080l\u00ED\u00A7\u0087P\x0F\u0095\x04\b\x17\u00AD{\u00F4M\u0089\u00A8Q\u00CD&,\u00B3\u00B4.\u00B9\u0089\u00C6\u0092\r_\u0087\u00F3\t\u00E8&\u008C\u00A2\x0E\u00DFR\u00C7\u00D9\u00E9\u0092\u00A1\u009C\u008EJ\u00BF\u00AFZZ\u00B2YW\u00AB\x12\"\u0096\rhe3\u008B\u00E1\u0085\u00B3;\x1F(\u00CB\u00CBr\u00B1\t&\u00CA1\u00FEs.\x11o\f2\u0084\u00E9&\b\u008C\u00EE\u00B4\u008D\u00A1\u0096\u00E5\u00FC\u00BAW\u00CBr\u0085VQq?\x04\u0083I\u00C2!n\x15\u00C2\u00BD!\u00F0\u00A2\x1FN\u00F6\u00F5QU\u00AB=\u00AC\u00A5\u00E8\u00AD\x001qd\u00F5\x19\u009F\x18\u00ABl\u00F2\u00F0\u00EA\u00FF\u00B6\u00D6U\u00AA\u00ABT\u0093\u00F5W\u0080\x01\x00H@\u00A4W\u009F\u008F\u00E9\u009D\x00\x00\x00\x00IEND\u00AEB`\u0082"

As you can see, this site did not like all of the stuff that's highlighted in red

https://jsonformatter.curiousconcept.com/

The JSON parse did not work in parsing this data, and of course this image did not show up in my ScriptUI dialog.

Any suggestions on how to format this to comply with JSON syntax, if possible?

Report · Jan 03, 2016

hi,

format does look odd.

Have you tried using a tool like (found randomly via Google search):

Base64 Image Encoder

Report · Jan 03, 2016

I don't think that kind can be displayed by ScriptUI:

function test(){
  var w = new Window('dialog');
  var p = w.add("panel");
  var imgStr = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAeCAIAAAAekf9JAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA5lJREFUeNrsmM1LFGEcx51a7NCuBxPUxMKX2CzYEpSgCKIgCgJv3Tp07Na9S+euXfoDunUIT4KBh8QgFCyDUFKTNVMhXWjXQ7OXPuPXfj7MrLO5u6LIPgwPzzz7e3+f9d6PzjQcr3Wi4ditukp1lY6KSmvrP+cX5o6blwpb+VoxwECfZqbYY2AA2C/ZGJREVIJvC7OGtrq20t7Wodfk6VRb69n5xR0HXs0MhKj3dqeTyZTO+Fl2gVp/ZpC9UMibpQzX5Qj93p60S9BuwBVfbmRxobgcbZ18/OiJ+w7E+c6uXG4D6Xku9Fwc/zB259Y9zn7R/zg1cfP6bc6Qzi4vNTe3SG1dfp39wi462R9LyM3rmeYW3/ehMz0zGcI1jsWiD7BuIAjApb6MOCI9AFAWNW42cxuchdLYeKqS8oA0OkBx12PJlEwOe9nJdS8rX/htlmbHLugTwi25ICLPiKMi1qjJIvECJ6pMFeRLbTVhWrlUlyhAqLCnkk0Ks9X1FYtY07NEDhfy/OTmidyuYBGAmWYHPhJ4ieqz3xJDXiKL0IT8cZlx4+bPXsmN2gRCCFK+Mk1chwPvAscFHulhZjCn73U23RQkBBU/wRhp7CGPTY1oh7AAkwPtDBF5afrzpPFtb+2It7IXGluttriclDAlz8S9ZFWUg4v0IeOJpu4FaVVk1z/bFVJYZh0raHYTqoElSXkHMYmPjA7fvztkrxg7FIcHusqrJAuZeSpohSW7x6HNeEF/LATx8PLVi33RBcWe/9fn2fOnZe1blZfkH2wc7D3pUPjKdaoH/BT1ocpAkGP/VDKClo3BOLIwx6vlrRHXWZ1X3FXiysZLnJegSF2WGvCg/St937x9vSPN4tzIu2HjHQo8KS9gJZi8p7EYyVQVpUNQHrZbmSnPGVz0B4CzrIA80XpQZiAKLZs7kP7awA2bmDT78Gzmfl3uy/AKMw6uh891doHoeZ5cwa8aeZiq/OIfuifE5TEk5qb/yiA3kpg9u/x96MFDKPDAEeWZkgCAbO2nh1APlQQIF6179E2JqFHNJiyztC65icaSDV+H8wnoJoyiDt9Sx9npkqGcjkq/r1pasllXqxIilg1oZTOL4YWzOx8oy8tysQkmyjH+cy4RbwwyhOkmCIzutI2hluX8ulfLcoVWUXE/BINJwiFuFcK9IfCiH0729VFVqz2speitADFxZPUZnxirbPLw6v+21lWqq1ST9VeAAQBIQKRXn4/pnQAAAABJRU5ErkJggg==";
  var img = p.add("image", undefined, ScriptUI.newImage(imgStr));
  w.show();
};
test();

Report · Jan 03, 2016

But this will work:

function test(){
  var w = new Window('dialog');
  var p = w.add("panel");
  var imgStr = "\u0089PNG\r\n\x1A\n\x00\x00\x00\rIHDR\x00\x00\x00F\x00\x00\x00\x1E\b\x02\x00\x00\x00\x1E\u0091\u00FFI\x00\x00\x00\x19tEXtSoftware\x00Adobe ImageReadyq\u00C9e<\x00\x00\x03\u0099IDATx\u00DA\u00EC\u0098\u00CDK\x14a\x1C\u00C7\u009DZ\u00EC\u00D0\u00AE\x07\x13\u00D4\u00C4\u00C2\u0097\u00D8,\u00D8\x12\u0094\u00A0\b\u00A2 \n\x02o\u00DD:t\u00EC\u00D6\u00BDK\u00E7\u00AE]\u00FA\x03\u00BAu\bO\u0082\u0081\u0087\u00C4 \x14,\u0083PR\u00935S!]h\u00D7C\u00B3\u0097>\u00E3\u00D7~>\u00CC\u00AC\u00B3\u00B9\u00BB\u00A2\u00C8>\f\x0F\u00CF<\u00FB{\x7F\u009F\u00F5\u00DE\u008F\u00CE4\x1C\u00AFu\u00A2\u00E1\u00D8\u00AD\u00BAJu\u0095\u008E\u008AJk\u00EB?\u00E7\x17\u00E6\u008E\u009B\u0097\n[\u00F9Z1\u00C0@\u009Ff\u00A6\u00D8c`\x00\u00D8/\u00D9\x18\u0094DT\u0082o\x0B\u00B3\u0086\u00B6\u00BA\u00B6\u00D2\u00DE\u00D6\u00A1\u00D7\u00E4\u00E9T[\u00EB\u00D9\u00F9\u00C5\x1D\x07^\u00CD\f\u0084\u00A8\u00F7v\u00A7\u0093\u00C9\u0094\u00CE\u00F8Yv\u0081Z\x7Ff\u0090\u00BDP\u00C8\u009B\u00A5\f\u00D7\u00E5\b\u00FD\u00DE\u009E\u00B4K\u00D0n\u00C0\x15_ndq\u00A1\u00B8\x1Cm\u009D|\u00FC\u00E8\u0089\u00FB\x0E\u00C4\u00F9\u00CE\u00AE\\n\x03\u00E9y.\u00F4\\\x1C\u00FF0v\u00E7\u00D6=\u00CE~\u00D1\u00FF85q\u00F3\u00FAm\u00CE\u0090\u00CE./57\u00B7Hm]~\u009D\u00FD\u00C2.:\u00D9\x1FK\u00C8\u00CD\u00EB\u0099\u00E6\x16\u00DF\u00F7\u00A13=3\x19\u00C25\u008E\u00C5\u00A2\x0F\u00B0n \b\u00C0\u00A5\u00BE\u008C8\"=\x00P\x165n6s\x1B\u009C\u0085\u00D2\u00D8x\u00AA\u0092\u00F2\u00804:@q\u00D7c\u00C9\u0094L\x0E{\u00D9\u00C9u/+_\u00F8m\u0096f\u00C7.\u00E8\x13\u00C2-\u00B9 \"\u00CF\u0088\u00A3\"\u00D6\u00A8\u00C9\"\u00F1\x02'\u00AAL\x15\u00E4Km5aZ\u00B9T\u0097(@\u00A8\u00B0\u00A7\u0092M\n\u00B3\u00D5\u00F5\x15\u008BX\u00D3\u00B3D\x0E\x17\u00F2\u00FC\u00E4\u00E6\u0089\u00DC\u00AE`\x11\u0080\u0099f\x07>\x12x\u0089\u00EA\u00B3\u00DF\x12C^\"\u008B\u00D0\u0084\u00FCq\u0099q\u00E3\u00E6\u00CF^\u00C9\u008D\u00DA\x04B\bR\u00BE2M\\\u0087\x03\u00EF\x02\u00C7\x05\x1E\u00E9af0\u00A7\u00EFu6\u00DD\x14$\x04\x15?\u00C1\x18i\u00EC!\u008FM\u008Dh\u0087\u00B0\x00\u0093\x03\u00ED\f\x11yi\u00FA\u00F3\u00A4\u00F1mo\u00ED\u0088\u00B7\u00B2\x17\x1A[\u00AD\u00B6\u00B8\u009C\u00940%\u00CF\u00C4\u00BDdU\u0094\u0083\u008B\u00F4!\u00E3\u0089\u00A6\u00EE\x05iUd\u00D7?\u00DB\x15RXf\x1D+hv\x13\u00AA\u0081%Iy\x071\u0089\u008F\u008C\x0E\u00DF\u00BF;d\u00AF\x18;\x14\u0087\x07\u00BA\u00CA\u00AB$\x0B\u0099y*h\u0085%\u00BB\u00C7\u00A1\u00CDxA\x7F,\x04\u00F1\u00F0\u00F2\u00D5\u008B}\u00D1\x05\u00C5\u009E\u00FF\u00D7\u00E7\u00D9\u00F3\u00A7e\u00ED[\u0095\u0097\u00E4\x1Fl\x1C\u00EC=\u00E9P\u00F8\u00CAu\u00AA\x07\u00FC\x14\u00F5\u00A1\u00CA@\u0090c\u00FFT2\u0082\u0096\u008D\u00C18\u00B20\u00C7\u00AB\u00E5\u00AD\x11\u00D7Y\u009DW\u00DCU\u00E2\u00CA\u00C6K\u009C\u0097\u00A0H]\u0096\x1A\u00F0\u00A0\u00FD+}\u00DF\u00BC}\u00BD#\u00CD\u00E2\u00DC\u00C8\u00BBa\u00E3\x1D\n<)/`%\u0098\u00BC\u00A7\u00B1\x18\u00C9T\x15\u00A5CP\x1E\u00B6[\u0099)\u00CF\x19\\\u00F4\x07\u0080\u00B3\u00AC\u0080<\u00D1zPf \n-\u009B;\u0090\u00FE\u00DA\u00C0\r\u009B\u00984\u00FB\u00F0l\u00E6~]\u00EE\u00CB\u00F0\n3\x0E\u00AE\u0087\u00CFuv\u0081\u00E8y\u009E\\\u00C1\u00AF\x1Ay\u0098\u00AA\u00FC\u00E2\x1F\u00BA'\u00C4\u00E51$\u00E6\u00A6\u00FF\u00CA 7\u0092\u0098=\u00BB\u00FC}\u00E8\u00C1C(\u00F0\u00C0\x11\u00E5\u0099\u0092\x00\u0080l\u00ED\u00A7\u0087P\x0F\u0095\x04\b\x17\u00AD{\u00F4M\u0089\u00A8Q\u00CD&,\u00B3\u00B4.\u00B9\u0089\u00C6\u0092\r_\u0087\u00F3\t\u00E8&\u008C\u00A2\x0E\u00DFR\u00C7\u00D9\u00E9\u0092\u00A1\u009C\u008EJ\u00BF\u00AFZZ\u00B2YW\u00AB\x12\"\u0096\rhe3\u008B\u00E1\u0085\u00B3;\x1F(\u00CB\u00CBr\u00B1\t&\u00CA1\u00FEs.\x11o\f2\u0084\u00E9&\b\u008C\u00EE\u00B4\u008D\u00A1\u0096\u00E5\u00FC\u00BAW\u00CBr\u0085VQq?\x04\u0083I\u00C2!n\x15\u00C2\u00BD!\u00F0\u00A2\x1FN\u00F6\u00F5QU\u00AB=\u00AC\u00A5\u00E8\u00AD\x001qd\u00F5\x19\u009F\x18\u00ABl\u00F2\u00F0\u00EA\u00FF\u00B6\u00D6U\u00AA\u00ABT\u0093\u00F5W\u0080\x01\x00H@\u00A4W\u009F\u008F\u00E9\u009D\x00\x00\x00\x00IEND\u00AEB`\u0082";
  var img = p.add("image", undefined, ScriptUI.newImage(imgStr));
  w.show();
};
test();

Report · Jan 03, 2016

Interesting. ESTK crashes when it doesn't like the image string.

So, I took your javascript unicode-escaped image string and ran it through:

Escape for JSON and Javascript online tool‌

Then validated the below test JSON here:

JSONLint PRO - The JSON Validator

[

{

"image": "\\u0089PNG\\r\\n\\x1A\\n\\x00\\x00\\x00\\rIHDR\\x00\\x00\\x00F\\x00\\x00\\x00\\x1E\\b\\x02\\x00\\x00\\x00\\x1E\\u0091\\u00FFI\\x00\\x00\\x00\\x19tEXtSoftware\\x00Adobe ImageReadyq\\u00C9e<\\x00\\x00\\x03\\u0099IDATx\\u00DA\\u00EC\\u0098\\u00CDK\\x14a\\x1C\\u00C7\\u009DZ\\u00EC\\u00D0\\u00AE\\x07\\x13\\u00D4\\u00C4\\u00C2\\u0097\\u00D8,\\u00D8\\x12\\u0094\\u00A0\\b\\u00A2 \\n\\x02o\\u00DD:t\\u00EC\\u00D6\\u00BDK\\u00E7\\u00AE]\\u00FA\\x03\\u00BAu\\bO\\u0082\\u0081\\u0087\\u00C4 \\x14,\\u0083PR\\u00935S!]h\\u00D7C\\u00B3\\u0097>\\u00E3\\u00D7~>\\u00CC\\u00AC\\u00B3\\u00B9\\u00BB\\u00A2\\u00C8>\\f\\x0F\\u00CF<\\u00FB{\\x7F\\u009F\\u00F5\\u00DE\\u008F\\u00CE4\\x1C\\u00AFu\\u00A2\\u00E1\\u00D8\\u00AD\\u00BAJu\\u0095\\u008E\\u008AJk\\u00EB?\\u00E7\\x17\\u00E6\\u008E\\u009B\\u0097\\n[\\u00F9Z1\\u00C0@\\u009Ff\\u00A6\\u00D8c`\\x00\\u00D8/\\u00D9\\x18\\u0094DT\\u0082o\\x0B\\u00B3\\u0086\\u00B6\\u00BA\\u00B6\\u00D2\\u00DE\\u00D6\\u00A1\\u00D7\\u00E4\\u00E9T[\\u00EB\\u00D9\\u00F9\\u00C5\\x1D\\x07^\\u00CD\\f\\u0084\\u00A8\\u00F7v\\u00A7\\u0093\\u00C9\\u0094\\u00CE\\u00F8Yv\\u0081Z\\x7Ff\\u0090\\u00BDP\\u00C8\\u009B\\u00A5\\f\\u00D7\\u00E5\\b\\u00FD\\u00DE\\u009E\\u00B4K\\u00D0n\\u00C0\\x15_ndq\\u00A1\\u00B8\\x1Cm\\u009D|\\u00FC\\u00E8\\u0089\\u00FB\\x0E\\u00C4\\u00F9\\u00CE\\u00AE\\\\n\\x03\\u00E9y.\\u00F4\\\\\\x1C\\u00FF0v\\u00E7\\u00D6=\\u00CE~\\u00D1\\u00FF85q\\u00F3\\u00FAm\\u00CE\\u0090\\u00CE./57\\u00B7Hm]~\\u009D\\u00FD\\u00C2.:\\u00D9\\x1FK\\u00C8\\u00CD\\u00EB\\u0099\\u00E6\\x16\\u00DF\\u00F7\\u00A13=3\\x19\\u00C25\\u008E\\u00C5\\u00A2\\x0F\\u00B0n \\b\\u00C0\\u00A5\\u00BE\\u008C8\\\"=\\x00P\\x165n6s\\x1B\\u009C\\u0085\\u00D2\\u00D8x\\u00AA\\u0092\\u00F2\\u00804:@q\\u00D7c\\u00C9\\u0094L\\x0E{\\u00D9\\u00C9u/+_\\u00F8m\\u0096f\\u00C7.\\u00E8\\x13\\u00C2-\\u00B9 \\\"\\u00CF\\u0088\\u00A3\\\"\\u00D6\\u00A8\\u00C9\\\"\\u00F1\\x02'\\u00AAL\\x15\\u00E4Km5aZ\\u00B9T\\u0097(@\\u00A8\\u00B0\\u00A7\\u0092M\\n\\u00B3\\u00D5\\u00F5\\x15\\u008BX\\u00D3\\u00B3D\\x0E\\x17\\u00F2\\u00FC\\u00E4\\u00E6\\u0089\\u00DC\\u00AE`\\x11\\u0080\\u0099f\\x07>\\x12x\\u0089\\u00EA\\u00B3\\u00DF\\x12C^\\\"\\u008B\\u00D0\\u0084\\u00FCq\\u0099q\\u00E3\\u00E6\\u00CF^\\u00C9\\u008D\\u00DA\\x04B\\bR\\u00BE2M\\\\\\u0087\\x03\\u00EF\\x02\\u00C7\\x05\\x1E\\u00E9af0\\u00A7\\u00EFu6\\u00DD\\x14$\\x04\\x15?\\u00C1\\x18i\\u00EC!\\u008FM\\u008Dh\\u0087\\u00B0\\x00\\u0093\\x03\\u00ED\\f\\x11yi\\u00FA\\u00F3\\u00A4\\u00F1mo\\u00ED\\u0088\\u00B7\\u00B2\\x17\\x1A[\\u00AD\\u00B6\\u00B8\\u009C\\u00940%\\u00CF\\u00C4\\u00BDdU\\u0094\\u0083\\u008B\\u00F4!\\u00E3\\u0089\\u00A6\\u00EE\\x05iUd\\u00D7?\\u00DB\\x15RXf\\x1D+hv\\x13\\u00AA\\u0081%Iy\\x071\\u0089\\u008F\\u008C\\x0E\\u00DF\\u00BF;d\\u00AF\\x18;\\x14\\u0087\\x07\\u00BA\\u00CA\\u00AB$\\x0B\\u0099y*h\\u0085%\\u00BB\\u00C7\\u00A1\\u00CDxA\\x7F,\\x04\\u00F1\\u00F0\\u00F2\\u00D5\\u008B}\\u00D1\\x05\\u00C5\\u009E\\u00FF\\u00D7\\u00E7\\u00D9\\u00F3\\u00A7e\\u00ED[\\u0095\\u0097\\u00E4\\x1Fl\\x1C\\u00EC=\\u00E9P\\u00F8\\u00CAu\\u00AA\\x07\\u00FC\\x14\\u00F5\\u00A1\\u00CA@\\u0090c\\u00FFT2\\u0082\\u0096\\u008D\\u00C18\\u00B20\\u00C7\\u00AB\\u00E5\\u00AD\\x11\\u00D7Y\\u009DW\\u00DCU\\u00E2\\u00CA\\u00C6K\\u009C\\u0097\\u00A0H]\\u0096\\x1A\\u00F0\\u00A0\\u00FD+}\\u00DF\\u00BC}\\u00BD#\\u00CD\\u00E2\\u00DC\\u00C8\\u00BBa\\u00E3\\x1D\\n<)/`%\\u0098\\u00BC\\u00A7\\u00B1\\x18\\u00C9T\\x15\\u00A5CP\\x1E\\u00B6[\\u0099)\\u00CF\\x19\\\\\\u00F4\\x07\\u0080\\u00B3\\u00AC\\u0080<\\u00D1zPf \\n-\\u009B;\\u0090\\u00FE\\u00DA\\u00C0\\r\\u009B\\u00984\\u00FB\\u00F0l\\u00E6~]\\u00EE\\u00CB\\u00F0\\n3\\x0E\\u00AE\\u0087\\u00CFuv\\u0081\\u00E8y\\u009E\\\\\\u00C1\\u00AF\\x1Ay\\u0098\\u00AA\\u00FC\\u00E2\\x1F\\u00BA'\\u00C4\\u00E51$\\u00E6\\u00A6\\u00FF\\u00CA 7\\u0092\\u0098=\\u00BB\\u00FC}\\u00E8\\u00C1C(\\u00F0\\u00C0\\x11\\u00E5\\u0099\\u0092\\x00\\u0080l\\u00ED\\u00A7\\u0087P\\x0F\\u0095\\x04\\b\\x17\\u00AD{\\u00F4M\\u0089\\u00A8Q\\u00CD&,\\u00B3\\u00B4.\\u00B9\\u0089\\u00C6\\u0092\\r_\\u0087\\u00F3\\t\\u00E8&\\u008C\\u00A2\\x0E\\u00DFR\\u00C7\\u00D9\\u00E9\\u0092\\u00A1\\u009C\\u008EJ\\u00BF\\u00AFZZ\\u00B2YW\\u00AB\\x12\\\"\\u0096\\rhe3\\u008B\\u00E1\\u0085\\u00B3;\\x1F(\\u00CB\\u00CBr\\u00B1\\t&\\u00CA1\\u00FEs.\\x11o\\f2\\u0084\\u00E9&\\b\\u008C\\u00EE\\u00B4\\u008D\\u00A1\\u0096\\u00E5\\u00FC\\u00BAW\\u00CBr\\u0085VQq?\\x04\\u0083I\\u00C2!n\\x15\\u00C2\\u00BD!\\u00F0\\u00A2\\x1FN\\u00F6\\u00F5QU\\u00AB=\\u00AC\\u00A5\\u00E8\\u00AD\\x001qd\\u00F5\\x19\\u009F\\x18\\u00ABl\\u00F2\\u00F0\\u00EA\\u00FF\\u00B6\\u00D6U\\u00AA\\u00ABT\\u0093\\u00F5W\\u0080\\x01\\x00H@\\u00A4W\\u009F\\u008F\\u00E9\\u009D\\x00\\x00\\x00\\x00IEND\\u00AEB`\\u0082"

}

]

Validates as JSON. You'd just need to unescape before calling it in a dialog window.

Not sure if that's headed in the right direction, but that's probably the route I would head.

Report · Jan 03, 2016

Thanks Micky, it looked like the escaping via the means you listed had somehow changed some of the actual characters, so it did not end up working out in the actual code. However, I also noticed that the site I listed myself was less than optimal for figuring out my issue: had I used this one instead (http://codebeautify.org/jsonvalidate), I would have quickly noticed the issue of blackslashes because it uses better syntax highlighting!

Now I decided to use encodeURI() to turn this image data string into a valid JSON string. This seems to work when turning such a string directly into a ScriptUI.newImage(), but now I have to figure a couple other things out to make sure that it's gotten via JSON parse inside of my script I'm working on.

Report · Jan 04, 2016

Okay, looks like it is working. I'll explain real quick the simple reason why I wanted to get this working: my script panel uses embedded metadata inside comments of individual scripts for instructions on how to display these scripts as buttons inside the panel, and I wanted to add onto the existing function of referencing an image file with ability to use embedded image data so there wouldn't even need to be any external image files. After successfully embedding the image data as JSON, I've still come to the non-great reality that my imagined function for this wasn't so easily implemented - doing File() on a string which is a long glob of weird characters which is the image data string (with or without having it gone through encodeURI()), crashes the application. My ideal function would have made File objects out of whatever was in the "image" property of the metadata comment and first looked for the image file before continuing to try & make a ScriptUI.newImage from this property, except since it crashes, it's not possible. Therefore I am gonna make it my own wacky convention to use "_embedded" if I want to put in an image that's meant to be interpreted as such. Now my function will look for the "image" property and try to act on a File, and then look for the "image_embedded" property and will use decodeURI() on whatever is written there to make an image out of.

    var btn;
    var scriptImage = "";
    var imageProp = VIEWMODES.imageDisplayModes.buttons.kind;
    if(thisScript.hasOwnProperty(imageProp) && thisScript[imageProp] != ""){
      try {
        if(File(thisScript[imageProp]).exists){
          scriptImage = File(thisScript[imageProp]);
        } else if(File(File(thisScript.path).parent + "/" + thisScript[imageProp]).exists){
          scriptImage = File(File(thisScript.path).parent + "/" + thisScript[imageProp]);
        }
      } catch (e) {
        scriptImage = "";
      }
    } else if(thisScript.hasOwnProperty(imageProp + "_embedded") && thisScript[imageProp + "_embedded"] != ""){
      try {
        ScriptUI.newImage(decodeURI(thisScript[imageProp + "_embedded"]));
        scriptImage = decodeURI(thisScript[imageProp + "_embedded"]);
      } catch(e) {
        scriptImage = "";
      }
    }


    if(scriptImage != ""){
      btn = g.add("iconbutton", undefined, ScriptUI.newImage(scriptImage));
      btn.size = [BUTTONIMAGESIZES[imageProp].width, BUTTONIMAGESIZES[imageProp].height];
    } else {
      btn = g.add("button", undefined, buttonText);
      btn.size = [BUTTONSIZES.width, BUTTONSIZES.height];
    }

Report · Jan 05, 2016

Wow, that's interesting!!!! Thanks for sharing Silly-V‌. I've learned so much from your informative posts.

Glad you got it figured out.

So, let's put on our Illy-scripting wish-list:

Embedded image support
Animated gif support (totally off topic, but I ran into this recently and now seemed like a good time to mention it)

Report · Jan 05, 2016

mickyhulse wrote:

So, let's put on our Illy-scripting wish-list:

Embedded image support

Animated gif support (totally off topic, but I ran into this recently and now seemed like a good time to mention it)

You can try posting those over here:

Illustrator scripting bug list.

Report · Jan 05, 2016

Good call! And ... done.

Thanks W_J_T!

Report · Jan 06, 2016

Hi Silly-V‌,

only for interest, what is the reason for embedding the PNG in the code itself? (I think in this case you doesn't need an additional file, is this right?)

And one question: how do you get the image data string (\u0089PNG\r\n\x1A\n\x00\x00\x00\rIHDR\x00 …) from your PNG file?

Kindly regards

pixxxel schubser

Report · Jan 06, 2016

Yes, the purpose for embedding the image is so that no external file would be needed.

In my case here I not only embed the image, but also place it into a JSON string inside a comment for the purpose of being parsed by another script which is a script panel.

I use this function which there are some threads about - where, I forget - so let me just paste it here:

function test(){

var chosenFile = File.openDialog("Choose file");

if(chosenFile != null){

var infile = File(chosenFile.fsName.replace('file://', ''));

var outfile = File (chosenFile.path+"/"+chosenFile.name+".txt");

infile.open ("r");

infile.encoding = "binary";

var temp = infile.read();

infile.close();

outfile.open ("w");

outfile.write (temp.toSource ());

outfile.close ();

}

test();

Since I'm using this more, and now need to put it into encodeURI() format, I'm going to improve it by making it into a ScriptUI dialog to show the text.

Report · Jan 06, 2016

Thanx.

I just found this similar example in the last minutes:

Re: How can I let the png images pack into .jsx files?

I'll give you a response later.

regards

Report · Jan 06, 2016

I tried your method and it works with png as well. But not with PNG saved with PS normally and not with PNG saved for web and legacy. Only with PNG save with Quick export. The code of the other kinds of PNG is very very longer and with to much additional informations.

Again, Thank you for sharing.

Report · Jan 06, 2016

OK.

But what is this:

I get this message in all of my posts.

Report · Jan 06, 2016

They apparently screen all posts for spam and most messages now get randomly selected for manual checking by humans, according to the great CarlosCanto‌

Yes, I noticed that not all png formats work and I only stick to Save-for-Web PNG from Illustrator.

Report · Jan 06, 2016

Okay, here's my improved function for this:

function test(){
  var chosenFile = File.openDialog("Choose file");
  if(chosenFile == null){
    return;
  }
  var infile = File(chosenFile.fsName.replace('file://', ''));
  infile.open ("r");
  infile.encoding = "binary";
  var temp = infile.read();
  infile.close();


  var encodedImageData = temp.toSource().replace('(new String("', "").replace('"))', "");
  var encodedImageDataURI = encodeURI(temp);


  var w = new Window("dialog", "Image Data");
  w.margins = [4,4,4,4];
  w.spacing = 4;
  var g0 = w.add("tabbedpanel");
  g0.spacing = 2;


  var t1 = g0.add("tab", undefined, "Encoded");
  var disp_imageData = t1.add("edittext", undefined, encodedImageData, {multiline : true});
  disp_imageData.size = [400, 400];


  var t2 = g0.add("tab", undefined, "URI Encoded");
  var disp_imageDataURI = t2.add("edittext", undefined, encodedImageDataURI, {multiline : true});
  disp_imageDataURI.size = [400, 400];


  var t3 = g0.add("tab", undefined, "How well the image shows up");
  try {
    var uiImg = ScriptUI.newImage(decodeURI(encodedImageDataURI));
    t3.add("image", undefined, uiImg);
  } catch(e){
    t3.add("statictext", undefined, "Sorry, this image data could not be made into ScriptUI newImage() for some reason.", {multiline : true});
  }


  var g_btn = w.add("group");
  var btn_ok = g_btn.add("button", undefined, "Oookay");
  w.defaultElement = btn_ok;
  btn_ok.size = [400, 26];


  w.show();
}
test();

Note that if the image data is not to it's liking, this script will likely just crash Illustrator, so take care. I only stick to PNG24 exported from AI save for web.

Just did a test with some more formats from AI's Save for Web, JPG seems to work, but not GIF.

Did one test with AI's export raster format BMP (OS2 24bit) and also crash on this.

So it looks like just Save for Web JPG and PNG24

Embedded image data inside a JSON string.

1 Correct answer

Explore related tutorials & articles