トリミングとは
トリミングとはコンピューターで画像を加工するとき、画像の周囲や映像の前後を切り取って、必要な部分だけを抜き出し画面を整えることを言います。ここでは10種の動物を集めた1枚の画像から指定された動物をクローズアップします。合わせてタイマー管理を紐解きます。
画像トリミングとボタン操作 ©TacM,2019 Ver0.01
❼whale
クジラ
©TacM,2019 Ver0.01
トリミング実現方法
トリミングするには多くはclip:rectを用いますが、今回、position:relativeにoverflow:hiddenを指定し、合わせてposition absoluteを併用して必要な画像を切り抜いています。
一つのことを実現するに当たり様々な方法が存在します。いろいろな手法を身に着けることによって深みのある文書や作品を作成することができます。
HTMLとJavaScriptサンプルコード
<html>
<body>
<img id="uenozoo" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/06/animals10.png" width="385px" height="160px">
<DIV style="font-size:24px;">
<button onclick="if(v==0)setClip();">開始</button><span id="num1" style="color:red">❼whale</span>
<span id="num2" style="color:blue">クジラ</span>
</DIV>
<DIV style="position:relative; width:300px; height:300px; overflow:hidden; border:0px solid green;">
<div id="sample" style="position:absolute; left:-300px; top:-150px; width:750px; height:300px; zoom:2.0;">
<img id="animal" src="https://aidesign.lolipop.jp/wp-content/uploads/2015/08/animal10.png">
</div>
</DIV>
<div style="font-size:12px;">©TacM,2019 Ver0.01</div>
<script type="text/javascript" charset="utf-8">
const animal_10=['squirrel', 'bear', 'racoon-dog', 'lion', 'fox', 'giraffe', 'elephant', 'whale', 'koala', 'hippopotamus'];
const animalName = ["リス", "クマ", "タヌキ", "ライオン", "キツネ", "キリン", "ゾウ", "クジラ", "コアラ", "カバ"];
var v=0;
function setClip(){ //animal10.png original-size : 750*300
document.getElementById( "sample" ).style.left = (- v % 5 * 150) + 'px';
document.getElementById( "sample" ).style.top = (-Math.floor(v / 5) * 150) + 'px';
document.getElementById("num1").innerHTML ="\u24ff\u2776\u2777\u2778\u2779\u277a\u277b\u277c\u277d\u277e".substr(v, 1) + animal_10[v];
document.getElementById("num2").innerHTML = animalName[v];
if(++v < 10) setTimeout(setClip, 2000);
else v = 0;
}
</script>
</body>
</html>
