Javascriptの画像の影、中間調、ハイライトの画像レベルを調整する（Photoshopの機能）

Question

シャドウ、中間調、ハイライトの画像レベルを操作できるJavascript（ブラウザ、Node.jsではない）スクリプトを作成できるかどうかは疑問でした。画像。この機能はPhotoshopなどのイメージエディタで使用できます（下記参照）。

私はhttps://github.com/oliver-moran/jimpと、この他のquestionを発見したが、私はそれを把握することはできません。

私の最後の希望は、Node.jsを持つサーバーとimagemagickへのバインディングを実行することですが、ブラウザで無料で実行する方がはるかに優れています。

Answer 1

このような意味ですか？あなたはBPがシャドー（黒点）値であり、WPがハイライト（白色点）値とガンマは中間点です

convert image -level bp,wp,gamma result 

を行うことができますImageMagickのを使用して

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

値。 bpとwpの値は、あなたのImageMagickコンパイルのQuantumrangeでなければならないことに注意してください。 Q16の場合、0〜65535の範囲です.Q8の場合、値の範囲は0〜255です。ただし、bpとwpのパーセント値を使用することができます。ガンマ値はfloat> 0で、値1は変更されません。はい、あなたは以下のscriptlistnerコードでレベルを制御することができますhttp://www.imagemagick.org/script/command-line-options.php#level

Answer 3

を参照してください。警告の

// 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の間の入力それはhasnとしてPhotoshopの値9.99と0.10から調整されています）しかし、それを関数に追加できるはずです。