处理 Javascript 图像阴影、中间调和高光图像级别（Photoshop 功能）

Question

我想知道是否有可能创建一个 Javascript（浏览器，而不是 Node.js）脚本来处理图像的阴影、中间色调和高亮图像级别。此功能在 Photoshop 等图像编辑器中可用（见下文）。

我找到了https://github.com/oliver-moran/jimp 和另一个question，但我想不通。

我最后的希望是在带有 Node.js 并绑定到 imagemagick 的服务器上运行它，但是在浏览器上免费运行它要好得多。

Answer 1

你的意思是这样的？

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">

Answer 2

是的，您可以使用以下 scriptlistner 代码控制级别：

// 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 );
}

警告：您可能需要调整 gamma 值（输入可能在 0 和 1 之间，因为它尚未根据 Photoshop 值 9.99 和 0.10 进行调整）但是您应该能够将其添加到函数中.

Answer 3

使用 Imagemagick 你可以做到

convert image -level bp,wp,gamma result

其中 bp 是阴影（黑点）值，wp 是高光（白点）值，gamma 是中点值。请注意，bp 和 wp 值应该在 ImageMagick 编译的 Quantumrange 中，例如对于 Q16，值范围从 0 到 65535。对于 Q8，值范围从 0 到 255。但是，您可以为 bp 和 wp 使用百分比值，我觉得这更容易。伽玛值是一个 >0 的浮点数，其中 1 的值没有变化。见http://www.imagemagick.org/script/command-line-options.php#level