How to extract images from adobe illustrator using extended javascript

[Guest]

hi,

I am working on adobe extended javascript , and I need to extract all the images from artboard(adobe illustrator).and save co-ordinates of the images in the artboard to a text file.

Thanks

[SlowMotion-RQfUB8]

The ExportOption objects in the Illustrator Javascript reference have a property called artboardClipping. Set it to 'true' to export to the size of a placedItem.

The coordinates of an image are stored in an array called position (e.g. placedItem.position).

If you want to save them to a file use the File object as described in the bottom of the Extension SDK doc under 'File I/O'

Cheers

[Guest]

yes , I am tried this , but it is giving me screen shot of art board as it is .

but I need some thing different. like

let us suppose one I am opened one artboard in illustrator ,

it contains 5 different images, so I need to extract them to a folder in harddisk.

[SlowMotion-RQfUB8]

The document object has a property called placedItems (document.placedItems). It's an array of all of the images in the document. Hope that helps!

[Guest]

in my case images are stored as path Items , but not able to figure it out how to access them and extract them in to a folder in harddisk

[CarlosCanto]

please show us

[Guest]

var doc=app.activeDocument;

var placedItems=doc.placedItems;

var placedItemURL;
//as you told me images are in placed items , so i tried to count howmany placed items are in my document , and count came as 0
for(i=0;i<placedItems.length;i++)
{
    placedItemURL=placedItems.uRL;
    $.writeln (i+"th placedItemURL is :"+placedItemURL);
   
}

// and i checked for pathItems , so they are about 30 and all are images , i need to capture them individually and store them independently as 30 files
var pathItems=app.activeDocument.PathItems;
var pathitemposition=0;
for(i=0;i<app.activeDocument.pathItems.length;i++)
{
    pathItems=app.activeDocument.pathItems.selected;
    pathitemposition=app.activeDocument.pathItems.position;
    $.writeln (i+"   path item url is :"+app.activeDocument.pathItems.URL+"x position:"+pathitemposition[0]+"y position:"+pathitemposition[1]);
   
   
}

//when i am running below line all the images are removing from illustrator artboard

app.activeDocument.pathItems.removeAll();

so my question is how to capture images in art board to independent files

[Qwertyfly___]

Are the pictures you want to extract embedded pixel art such as jpegs?

or are you talking about collections of vector paths making up a picture?

CCarlos is referring to pixel art.

iif it vector try putting each picture on an art board and then extract art boards to jpg

[Guest]

ya I am extracted in a new document , but how to resize artboard as exact as newly extracted image using extended javascript

[Qwertyfly___]

need a better explanation of what you want.

try screen shots so we can see what you want to achieve

[Guest]

From existing art board , I am duplicating a image which is in path item, to a new document as below

rounded rectangular box is extracted to a new document.

now I need to resize art board , exact best fit of single image .

after that artboard should look like below

I am find difficulty in resizing artboard ,           as     CarlosCanto  suggested ,

	var artboards=newDoc.artboards;
	var rect=artboards[0].artboardRect;
	$.writeln ("rect[0]   :"+rect[0]+"rect[1]   :"+rect[1]+"rect[2]   :"+rect[2]+"rect[3]   :"+rect[3]);
	rec[0]=newItem.position[0];
	rec[3]=newItem.position[1];
	rec[1]=newItem.width;
	rec[2]=newItem.height;
	app.redraw();

but artboard size is not changed, remained as its original size

[CarlosCanto · Accepted solution]

in your sample, rect refers to a variable in memory, not to the actual artboardRect values

this sample resizes the artboard to the size of the selected object

var idoc = app.activeDocument;
var sel = idoc.selection[0];


var ab = idoc.artboards[0];


ab.artboardRect = sel.geometricBounds;

[Guest]

great ! awesome , worked..

[CarlosCanto]

I don't know exactly what you're trying to do, I'll take a chance, if you want to create 1 document per "image" (I think you're referring to pathItems), create 1 artboard per pathItem, resize the bounds of the Artboard to the bounds of the pathItem (using artboardRect property). Once you have as many Arboards as pathItems, export or save and use "artboardRange" and "saveMultipleArtboards" properties.

[Guest]

Hi Rider01,

            I have same requirement to extract images(more than one in same page), Could you please share the code at sri33519@gmail.com

Regards

Srikanth.

[gpicher]

Left this info here in case it is useful to anyone. Not to try to answer the original question, but I have been struggling with modifying artboards as well, but in JavaScript. It got a lot easier when I realized that the document and the artboard have different coordinate systems. See Adobe's docs for Document's convertCoordinate() method and the app's coordinateSystem property. You can create a new Point to convert with syntax like "var newLeftTopPoint = Point(leftValue, topValue);" I did not find a way to create a new rect for changing the artboard dimensions, but found that you can make a copy of the existing artboard's rect to modify with converted coordinates, setting it back to the artboard in one operation (you can't change the array elements one at a time directly). There's something about the artboard rect object that is more involved than simply being an array of four numbers; the reflection API tells you there are properties named 0, 1, 2 and 3, which lets you access the object as if it was an array, but there is more to the object than that.

(Oh, and to add to the fun, the artboard coordinate system I think has a positive-down vertical axis but the document coordinate system is positive-up.) Also, the array order of the rect object does seem to be left, top, right, bottom (not sure why Adobe's docs couldn't have mentioned that somewhere).

[gpicher]

(Sorry, I spoke too soon about up and down. I was confused by a negative value in converted artboard coords I saw for the doc origin of 0,0, which had a negative value in the doc I was looking at.)

[Guest]

Hi,

In image extraction I am getting following problem.

I am extracting above image from illustrator file, using adobe extended javascript.and pasting extracted

image in another illustrator new document. and resetting new document size to extracted image size.

then exporting new new document as PNG File

the above image is perfect circle, but extracted image top bottom left right is coming with some what of cut.

but I need image as it is from original document.

code I am using

var newDoc;

               newDoc[=app.documents.add();
              

                newItem = docSelectedPageItems.duplicate( newDoc,  ElementPlacement.PLACEATBEGINNING );
               
                //my image is in doc

 
var myVisibleBounds = newDoc.visibleBounds; //Rect, which is an array;

 
myVisibleBounds[0] -= 2*mm; //left coordinate (use negative values to add artboard) 
myVisibleBounds[1] += 2*mm; //ltop coordinate 
myVisibleBounds[2] += 2*mm; //right coordinate 
myVisibleBounds[3] -= 2*mm; //bottom coordinate (use negative values to add artboard) 
 
newDoc.artboards[0].artboardRect = myVisibleBounds;

newDoc.selectObjectsOnActiveArtboard();

var item=newDoc.selectObjectsOnActiveArtboard();

var sel =  newDoc.selection[0];

var ab =  newDoc.artboards[0];

ab.artboardRect = sel.geometricBounds;

then I have some code to export newly created artboard with extracted image to PNG

but in image extraction , image is coming with somewhat of cutting on all sides

[Qwertyfly___]

what happens if you switch neg and pos for left and top?

myVisibleBounds[0] += 2*mm; //left coordinate (use negative values to add artboard) 

myVisibleBounds[1] -= 2*mm; //ltop coordinate 

[Guest]

myVisibleBounds[0] += 2*mm; //left coordinate (use negative values to add artboard) 

myVisibleBounds[1] -= 2*mm; //ltop coordinate 

changing  them will not affecting extracted image.

these values are for image external boundary i think

if I replace 2*mm with 20*mm in above code transparent boundary around image is increasing ,

these values are for boundary of image, but not associated with imagewidth or height

[Qwertyfly___]

Going by the image you have provided it almost looks like the exported image is set to the geometric bounds while the the circle is placed top left to visible bounds.

so cutting off the stroke, if that makes sense.

What if you go with a filled circle rather then an outline?

[Guest]

i am not getting you, will you explain by above code

[Qwertyfly___]

try replacing geometricBounds with visibleBounds

ab.artboardRect = sel.geometricBounds;

take a circle that is 100pt x 100pt with a stroke of 10pt

half the stroke is on the fill, and half extends outside that.

that adds a total of 10pt to its width.

so its geometric Width is measured from the points seen when the circle is selected.

and its visible Width is measured from the outer edge of the stroke.

so your "ab.artboardRect" is set smaller then the visible size of the selection...

[Guest]

This below code is solving problem

var rec=sel.geometricBounds;

var rec1=[];

rec1[0]=rec[0]-1;//-1 incresing left margin

rec1[1]=rec[1]+1;//+10 increasing top margin

rec1[2]=rec[2]+1;//+10 increasing right margin

rec1[3]=rec[3]-1;//+10 decreasing bottom margin

ab.artboardRect = rec1;