ブログパーツとか: ブラウザで画像加工

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

テキスト（テスト用サンプル）

<span style="font-size:50px;">😀😁😂😄😃🤣😅😆😉😎😋😊😍😘🥰😚😙😗🙂🤗🤨🤔🤩😐😑😶😣😏🙄😥😮🤐😫😪😯🥱😴😌😝😜😛🤤😒😓🙃😕😔😲😞😖🙁😟😤😢😧😦😭😨😩😱😰😬😳🥴😵🤪😠😷🤒🤕😇🥳🥺🤥🤫🤭🧐🤓</span>

画像（テスト用サンプル）

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXDER64enkVC4I7DNOTznjoxQm0GDgZrCILyTruerAMy4y38FZ5WA8AkLqJc5MRKb1eJ6ApG86dQ2afvzpqkzjr9lh1ZzQvdmw7xYgvHHUQK29uQmv7pG7i377PE7NaCip-_4re2PN_6cp/s1600/EH7OiW4UUAENqOz.jpg" style="max-width:50%;height:auto;"><a href="https://twitter.com/MPD_keiji/status/1188616013077549057" target="_blank">出典：警視庁公安第一課</a>

YouTube（テスト用サンプル）

<iframe width="560" height="315" src="https://www.youtube.com/embed/rAqBkQJKaVA?start=78" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Flickr（テスト用サンプル）

<a data-flickr-embed="true" href="https://www.flickr.com/photos/dromana/5383130291/" title="Girl Eats Banana"><img src="https://live.staticflickr.com/5164/5383130291_41166cdde2_o.jpg" width="2000" height="1329" alt="Girl Eats Banana"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

Twitter（テスト用サンプル）

<blockquote class="twitter-tweet">
<p lang="ja" dir="ltr">
【学生・社会人の皆さまへ】
電車や職場、学校など、人が集まるところでは、感染症対策のため <a href="https://twitter.com/hashtag/%E5%92%B3%E3%82%A8%E3%83%81%E3%82%B1%E3%83%83%E3%83%88?src=hash&ref_src=twsrc%5Etfw">#咳エチケット</a> の徹底を！ <a href="https://t.co/jlzD8LY58R">pic.twitter.com/jlzD8LY58R</a></p>
— 厚生労働省 (@MHLWitter) <a href="https://twitter.com/MHLWitter/status/1238013692735664128?ref_src=twsrc%5Etfw">March 12, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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;
    }
 #filterDisplay img{max-width:100%;height:auto;} #textareaData{width:99%;}

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>

<⚠textarea style="height:300px;" id="textareaData" onInput="display();">
使い方
①ここに画像や動画などのタグを貼る
②スクリプトは貼れない
③TwitterとFlickrは貼れる
<⚠/textarea><!--⚠は削除する-->
<script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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+")";
   }
var display=function(){
    document.getElementById("filterDisplay").innerHTML=document.getElementById("textareaData").value;
    var scriptFlickr=document.createElement("script");
    scriptFlickr.src="//embedr.flickr.com/assets/client-code.js";
    var headlistFlickr=document.getElementsByTagName("head");
    headlistFlickr[0].appendChild(scriptFlickr);
    var scriptTwitter=document.createElement("script");
    scriptTwitter.src="https://platform.twitter.com/widgets.js";
    var headlistTwitter=document.getElementsByTagName("head");
    headlistTwitter[0].appendChild(scriptTwitter);
   }
</script>

2020年3月13日金曜日

ブラウザで画像加工