操纵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 );
}

警告：你可能需要调整伽玛值（输入可能介于0和1之间，因为它没有从Photoshop的9.99和0.10值调整过）但你应该可以将其添加到功能。

Answer 3

使用Imagemagick可以做到

convert image -level bp,wp,gamma result

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