Skip to main content
marvin83997398
marvin83997398
Participant
February 5, 2019
Question

adding images to Script UI for photoshop

  • February 5, 2019
  • 3 replies
  • 2623 views

I would like to add images to my scripted UI's for Photoshop.

After allot of trail and error, I managed to get a few results working within ExtendScript.

But when I tried it in photoshop, it didn't work correctly.

What I found out was that for some reason I can only get an image to show in photoshop when it's a .png file, jpg's do not work, only in extendScript.

Also, the png images didn't scale at all, but again, it does work in extendScript.

Here is the code, with 5 different ways to add the same image...

var window = new Window ("dialog", "image test", undefined);
window.add('image', {x:100, y:50, width:50, height:50}, 'C://1.png');
window.add('image', undefined, 'C://1.png');
var imageFile = new File ("C://1.png");
var testImage = window.add("image", {x:25,y:0,width:50,height:50}, imageFile);
var imageFile = new File ("C://1.png");
var testImage = window.add("image", [0,0,200,200], imageFile);
var imageFile = new File ("C://1.png");
var testImage = window.add("image", undefined, imageFile);
testImage.size   =[200,200];
window.show();

When you run this script in extendScript, it shows 3 small images on top, and than 2 big ones, like I would expect.

But in Photoshop they are all small, so scaling doesn't work, but the dialog window does increase in size.

I believe here is also another way to place images, but I haven't been able to find an example, but it starts with..

var imageFile = new File ("C://1.png");
var testImage = ScriptUI.newImage (imageFile, imageFile, imageFile, imageFile)

and then a drawImage command, something like this...

ScriptUI.Graphics.drawImage (testImage, [0,0,50,50]);

But could not get it working, (undefined is not an object) also in extendscript, I'm missing simple examples here.

But I also would like to know if I can get jpg's to work in photoshop.

Any advice is highly appreciated!

    This topic has been closed for replies.

    3 replies

    L
    Lumigraphics
    Legend
    December 27, 2019

    You may want to do some reading of the ExtendScript/ScriptUI documentation. There are places where only PNG files are supported, not other formats.

      macedonian
      macedonian
      Participant
      December 27, 2019

      Hi, Marvin!

      I have the same error too when I trying to call the drawImage method before creating a window object. First of all, let's find out what is the graphics. Here in the manual say that the ScriptUIGraphics object can be used to customize the window’s appearance, in response to the onDraw event. Here is an example of how you can use it:

       

      if (BridgeTalk.appName == 'photoshop') {
    try {
        var imageFile = new File(File.encode('~/photoshop/cache/noimage.png'));
        var dialog = new Window('dialog', 'Image Test');
        dialog._group = dialog.add('group');
        dialog._group.image = dialog._group.add("image", undefined, imageFile);
        dialog._group.image.onDraw = function (state) {
            if (!this.hasOwnProperty('_bs')) {
                // this._bs = getResizedImageBounds(this.image.size, [300, 200]);
                this._bs = {x:0, y:0, width:300, height:200};
            }
            this.graphics.drawImage(this.image, this._bs.x, this._bs.y, this._bs.width, this._bs.height);
        }

        dialog.show();

    } catch (err) {
        $.writeln(err);
    }
}

       

      Or you can call onDraw method from another window object that has ScriptUIGraphics class:

       

      var imageFile = new File(File.encode('~/photoshop/cache/noimage.png'));
var dialog = new Window('dialog', 'Image Test');

dialog._group = dialog.add('group', [0, 0, 300, 200]);
dialog._group.image = ScriptUI.newImage(imageFile, imageFile, imageFile, imageFile);
dialog._group.onDraw = function (state) {
    this.graphics.drawImage(this.image, 0, 0, 300, 200);
}
dialog.show();

       

      Or like that:

       

      var dialog = new Window('dialog', 'Image Test');
dialog._group = dialog.add('group', [0, 0, 300, 200]);
dialog._group.onDraw = function (state) {
    var imageFile = ScriptUI.newImage('/C/1.png');
    this.graphics.drawImage(imageFile, 0, 0, 300, 200);
}
dialog.show();

       

      Also, please see the documentation of how to use paths, volumes and drive names in photoshop js scripting.

       

      Geppetto Luis
      Geppetto Luis
      Legend
      February 6, 2019

      I did not understand what you ask

      however this works correctly

      Place the icons on the desktop

      var window = new Window ("dialog", "image test", undefined);  
        
        
      window.add('image', {x:100, y:50, width:50, height:50}, '~/Desktop/1.png');  
        
      window.add('image', undefined,'~/Desktop/1.png');  
        
      var imageFile = new File ("~/Desktop/1.png");  
      var testImage = window.add("image", {x:25,y:0,width:50,height:50}, imageFile);  
        
      var imageFile = new File ("~/Desktop/2.png");  
      var testImage = window.add("image", [0,0,200,200], imageFile);  
        
      var imageFile = new File ("~/Desktop/2.png");  
      var testImage = window.add("image", undefined, imageFile);  
      testImage.size   =[200,200];  
        
        
      window.show(); 

      Schermata-2019-02-06-alle-11-55-20.png

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices