Photoshop Question posted in
The official user guide can be found here.

Manipulate Javascript image shadow, midtone and highlight image levels (Photoshop feature)

I was wondering if it is possible to create a Javascript (browser, not Node.js) script able to manipulate the shadow, midtone and highlight image levels of an image. This feature is available in image editors as Photoshop (see below).

wanted

I have found https://github.com/oliver-moran/jimp and this other question but I can’t figure it out.

My last hope is to run it on a server with Node.js and bindings to imagemagick, but running it for free on a browser is much better.

Tags:

3

Answers


  1. 0

    You mean something like this?

    var values = {
  hshadow: 0,
  vshadow: 0,
  blur: 0,
  spread: 0,
  color: '#000'
};

$('[name="hshadow"]').on('change', function() {
  values.hshadow = $(this).val() + 'px';
  
  $('.box').css('box-shadow', Object.values(values).join(' ') );
});

$('[name="vshadow"]').on('change', function() {
  values.vshadow = $(this).val() + 'px';
  
  $('.box').css('box-shadow', Object.values(values).join(' ') );
});


$('[name="blur"]').on('change', function() {
  values.blur = $(this).val() + 'px';
  
  $('.box').css('box-shadow', Object.values(values).join(' ') );
});

$('[name="spread"]').on('change', function() {
  values.spread = $(this).val() + 'px';
  
  $('.box').css('box-shadow', Object.values(values).join(' ') );
});
    .box {
  border: 1px solid #ccc;
  width: 100px;
  height: 100px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<input type="range" name="hshadow" min="-50" max="50">
<input type="range" name="vshadow" min="-50" max="50">
<input type="range" name="blur" min="-50" max="50">
<input type="range" name="spread" min="-50" max="50">
    Login or Signup to reply.
  2. 0

    Using Imagemagick you can do

    convert image -level bp,wp,gamma result

    where bp is the shadow (black point) value, wp is the highlight (white point) value and gamma is the midpoint value. Note that the bp and wp values should be in the Quantumrange of your ImageMagick compile, e.g. for Q16, values range from 0 to 65535. For Q8, values range from 0 to 255. However, you can use percent values for bp and wp, which I find much easier. The gamma value is a float >0 where a value of 1 is no change. see http://www.imagemagick.org/script/command-line-options.php#level

    Login or Signup to reply.
  3. 0

    Yes, you can control the levels with the following scriptlistner code:

    // usage
change_levels(21, 0.5, 255)


function change_levels(num1, num2, num3)
{
  // num1 integer 0 - 255
  // num2 double 0.0 - 1.0
  // num3 integer 0 - 255

  // =======================================================
  var id487 = charIDToTypeID( "Lvls" );
  var desc108 = new ActionDescriptor();
  var id488 = charIDToTypeID( "Adjs" );
  var list19 = new ActionList();
  var desc109 = new ActionDescriptor();
  var id489 = charIDToTypeID( "Chnl" );
  var ref72 = new ActionReference();
  var id490 = charIDToTypeID( "Chnl" );
  var id491 = charIDToTypeID( "Chnl" );
  var id492 = charIDToTypeID( "Cmps" );
  ref72.putEnumerated( id490, id491, id492 );
  desc109.putReference( id489, ref72 );
  var id493 = charIDToTypeID( "Inpt" );
  var list20 = new ActionList();
  list20.putInteger( num1 ); // num 1
  list20.putInteger( num3 ); // num 3
  desc109.putList( id493, list20 );
  var id494 = charIDToTypeID( "Gmm " );
  desc109.putDouble( id494, num2 ); //num 2
  var id495 = charIDToTypeID( "LvlA" );
  list19.putObject( id495, desc109 );
  desc108.putList( id488, list19 );
  executeAction( id487, desc108, DialogModes.NO );
}

    Word of warning: you may have to adjust the gamma value (the input maybe between 0 and 1 as it hasn’t been adjusted from the Photoshop values of 9.99 and 0.10) But you should be able to add that into the function.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search