画像トリミング3
画像部分表示の第3弾です。少しずつ、高級化を図れるようになりました。これまで述べた正常動作条件が必ずしもすべて正しいとは限らないようです。
あとの記事がより信憑性が高いといえます。サイズ不ぞろいの集合画像から必要なものだけ抽出して表示する例を示します。
今回はJavaScriptコードに頼らず、HTMLコードだけで実現しています。
HTMLコード
<html> <img src="https://aidesign.lolipop.jp/wp-content/uploads/2016/08/0727.png" width="600" height="400"> <hr width="600px" align="left" style="border:0;border-top:4px solid green;"> <DIV style="position:relative; width:600px; height:135px; height:135px; border:1px orange solid; overflow:hidden;"> <img src="https://aidesign.lolipop.jp/wp-content/uploads/2016/08/0727.png" width="600" height="400" style="float:left; position:absolute; left:-496px; top:-169px; clip:rect(169px 586px 303px 496px);"> <img src="https://aidesign.lolipop.jp/wp-content/uploads/2016/08/0727.png" width="600" height="400" style="float:left; position:absolute; left:-50px; top:-320px; clip:rect(320px 230px 390px 140px);"> <img src="https://aidesign.lolipop.jp/wp-content/uploads/2016/08/0727.png" width="600" height="400" style="float:left; position:absolute; left:-235px; top:-125px; clip:rect(125px 510px 180px 415px);"> </DIV> </html>
杞憂
HTMLコードを見ていただくと、同一画像イメージを4ヶ所で指定しています。恐らく、言語処理系はすでに読み込んだ画像イメージがあれば、重ねて読み込みが行われないように最適化していると信じたいです。もしそうでなければ、このサンプルコードは最悪の見本となるでしょう。その節は反面教師にして決して参考にしないでください。
資源を有効利用するにはJavascriptにおいて var img4=new image();のように読み込んだデータを確保しておいて、他の3ヶ所でも再利用して描画したいものです。