ブログパーツとか: 画像加工（JavaScript）

※Firefoxでは正常に動作しない

CSS

#filterRange {
    height:226px;
    font-size:12px;
    display:flex;
    flex-wrap:wrap;
    align-content:space-between;
    justify-content:space-between;
    margin-bottom:20px;
   }
#filterRange form{width:32%;}
form:nth-child(odd){background-color:#fde8d0;padding:3px;border:1px dotted;}
form:nth-child(even){background-color:#e0ebaf;padding:3px;border:1px dotted;}
form input[type="range"]{width:78%;}
#blurInput[type="range"],
#brightnessInput[type="range"],
#contrastInput[type="range"],
#grayscaleInput[type="range"],
#huerotateInput[type="range"],
#invertInput[type="range"],
#opacityInput[type="range"],
#saturateInput[type="range"],
#sepiaInput[type="range"] {
    appearance:none;
    -webkit-appearance:none;
    background-color:black;
    height:1px;
    outline:none;
   }
#blurInput[type="range"]::-webkit-slider-thumb,
#brightnessInput[type="range"]::-webkit-slider-thumb,
#contrastInput[type="range"]::-webkit-slider-thumb,
#grayscaleInput[type="range"]::-webkit-slider-thumb,
#huerotateInput[type="range"]::-webkit-slider-thumb,
#invertInput[type="range"]::-webkit-slider-thumb,
#opacityInput[type="range"]::-webkit-slider-thumb,
#saturateInput[type="range"]::-webkit-slider-thumb,
#sepiaInput[type="range"]::-webkit-slider-thumb {
    appearance:none;
    -webkit-appearance:none;
    width:12px;
    height:12px;
    border-radius:50%;
    background-color:dodgerblue;
    cursor:pointer;
   }
form output{
    display:inline-block;
    width:19%;
    text-align:right;
   }
form p{display:inline-block;width:80%;}
form input[type="reset"] {
    width:18%;
    padding:2px;
   }

HTML

<div id="filterRange">
<form onInput="rangeBlur();photoshop();">
<input type="range" id="blurInput" value="0" min="0" max="100" step="1">
<output id="blurOutput">0px</output>
<p>blur：ぼかし（0～）</p>
<input type="reset" value="初期値" onClick="reset();photoshop();">
</form>

<form onInput="rangeBrightness();photoshop();">
<input type="range" id="brightnessInput" value="100" min="0" max="300" step="1">
<output id="brightnessOutput">100%</output>
<p>brightness：明度（明るさ）（0～）</p>
<input type="reset" value="初期値" onClick="reset();photoshop();">
</form>

<form onInput="rangeContrast();photoshop();">
<input type="range" id="contrastInput" value="100" min="0" max="300" step="1">
<output id="contrastOutput">100%</output>
<p>contrast：明暗差（0～）</p>
<input type="reset" value="初期値" onClick="reset();photoshop();">
</form>

<form onInput="rangeGrayscale();photoshop();">
<input type="range" id="grayscaleInput" value="0" min="0" max="100" step="1">
<output id="grayscaleOutput">0%</output>
<p>grayscale：白黒度（0～100）</p>
<input type="reset" value="初期値" onClick="reset();photoshop();">
</form>

<form onInput="rangeHuerotate();photoshop();">
<input type="range" id="huerotateInput" value="0" min="-180" max="180" step="1">
<output id="huerotateOutput">0deg</output>
<p>hue-rotate：色相回転（0～±360）</p>
<input type="reset" value="初期値" onClick="reset();photoshop();">
</form>

<form onInput="rangeInvert();photoshop();">
<input type="range" id="invertInput" value="0" min="0" max="100" step="1">
<output id="invertOutput">0%</output>
<p>invert：階調反転（0～100）</p>
<input type="reset" value="初期値" onClick="reset();photoshop();">
</form>

<form onInput="rangeOpacity();photoshop();">
<input type="range" id="opacityInput" value="100" min="0" max="100" step="1">
<output id="opacityOutput">100%</output>
<p>opacity：不透明度（0～100）</p>
<input type="reset" value="初期値" onClick="reset();photoshop();">
</form>

<form onInput="rangeSaturate();photoshop();">
<input type="range" id="saturateInput" value="100" min="0" max="300" step="1">
<output id="saturateOutput">100%</output>
<p>saturate：彩度（鮮やかさ）（0～）</p>
<input type="reset" value="初期値" onClick="reset();photoshop();">
</form>

<form onInput="rangeSepia();photoshop();">
<input type="range" id="sepiaInput" value="0" min="0" max="100" step="1">
<output id="sepiaOutput">0%</output>
<p>sepia：セピア度（0～100）</p>
<input type="reset" value="初期値" onClick="reset();photoshop();">
</form>
</div>

<div id="filterDisplay">
🔷🔷🔷ここに画像や動画などを貼る🔷🔷🔷
</div>

JavaScript

<script>
var rangeBlur=function(){blurOutput.value=blurInput.value+"px";}
var rangeBrightness=function(){brightnessOutput.value=brightnessInput.value+"%";}
var rangeContrast=function(){contrastOutput.value=contrastInput.value+"%";}
var rangeGrayscale=function(){grayscaleOutput.value=grayscaleInput.value+"%";}
var rangeHuerotate=function(){huerotateOutput.value=huerotateInput.value+"deg";}
var rangeInvert=function(){invertOutput.value=invertInput.value+"%";}
var rangeOpacity=function(){opacityOutput.value=opacityInput.value+"%";}
var rangeSaturate=function(){saturateOutput.value=saturateInput.value+"%";}
var rangeSepia=function(){sepiaOutput.value=sepiaInput.value+"%";}
var photoshop=function(){
    var filterBlur=document.getElementById("blurOutput").value;
    var filterBrightness=document.getElementById("brightnessOutput").value;
    var filterContrast=document.getElementById("contrastOutput").value;
    var filterGrayscale=document.getElementById("grayscaleOutput").value;
    var filterHuerotate=document.getElementById("huerotateOutput").value;
    var filterInvert=document.getElementById("invertOutput").value;
    var filterOpacity=document.getElementById("opacityOutput").value;
    var filterSaturate=document.getElementById("saturateOutput").value;
    var filterSepia=document.getElementById("sepiaOutput").value;
    document.getElementById("filterDisplay").style.filter="blur("+filterBlur+") brightness("+filterBrightness+") contrast("+filterContrast+") grayscale("+filterGrayscale+") hue-rotate("+filterHuerotate+") invert("+filterInvert+") opacity("+filterOpacity+") saturate("+filterSaturate+") sepia("+filterSepia+")";
}
</script>

2020年3月12日木曜日

画像加工（JavaScript）