Adsenseリンクユニット

2019年9月1日日曜日

libpng warning: Image width is zero in IHDR

Pythonでcv2を使ってみたところ、
以下のエラーが発生しました。

エラーが発生するコード
  1. import cv2
  2. import numpy as np
  3.  
  4. im1 = cv2.imread('img/a1.png')
  5. im_v = cv2.vconcat([im1, im1])
  6. cv2.imwrite('a1_a1.png', im_v)


libpng warning: Image width is zero in IHDR
libpng warning: Image height is zero in IHDR
libpng error: Invalid IHDR data

画像が正しく読み込みせているかassertを追加し確認したところ、
読み込めていないことが分かりました。

  1. import cv2
  2. img = cv2.imread('imag\img.png')
  3. assert img is not None

ではイメージが読み込めないのはなぜかですが、
指定したパスのフォルダとイメージファイル名のバックスラッシュ1つで記述していたためでした。

バックスラッシュで書く場合は、エスケープシーケンスであるため、2つ書く必要があります。
  1. img = cv2.imread('imag\\img.png')

素直にスラッシュで書くの良いですね。これで解決です。
  1. img = cv2.imread('imag/img.png')
分かり難いのは、imwriteした際に表題のワーニングを含めエラーが発生する点です。
本来、imreadの呼び出しで読み込み失敗しているなら、その時点で例外発生してほしいところですが、noneを返却してくるため読み込みに失敗していることが分かりません。

そして、パスに日本語を使用している場合は、読み込みに失敗します。
アスキー文字にしか対応していないようです。
対応策はnp.fromfileとimdecodeに分解します。
  1. import numpy as np
  2. import cv2
  3. def imread(filename, flags=cv2.IMREAD_COLOR, dtype=np.uint8):
  4.     try:
  5.         n = np.fromfile(filename, dtype)
  6.         img = cv2.imdecode(n, flags)
  7.         return img
  8.     except Exception as e:
  9.         print(e)
  10.         return None
  11.  

プログラムコードをgoogle-code-prettifyでBloggerに表示する方法

google-code-prettify、Syntaxhighlighter、highlighter.jsなどやり方があるようです。

簡単で重くない方法としてgoogle-code-prettifyを選びました。
使い方は3ステップです。
1.headerに以下の1行を追加
  1. <script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert'/>

 CDN(Content Delivery Network)方式で読み込む方法で、CSSも1行で読み込みます。
 skin=desertの部分でテーマを指定しています。次のギャラリーから選び変更可能です。
 Gallery of themes for code prettify


Bloggerのheaderの設定は「テーマ」の「HTML修正」でheadタグ内に追加します。


2.CSSを追加
以下のCSSは全行に行番号を表示し、行番号の横にセパレータを表示します。また、1行が長い場合に横スクロールを表示します。テーマはdesertに対してCSSで変更しています。

  1. pre.prettyprint
  2. {
  3.     border: 1px solid #cccccc !important;
  4.     line-height: 1.5em;
  5.     overflow: auto;
  6.     padding: 2em !important;
  7. }
  8. pre.prettyprint > ol.linenums
  9. {
  10.     padding-left: 2em;
  11. }
  12. pre.prettyprint > ol.linenums > li
  13. {
  14.     border-left: 1px solid #cccccc;
  15.     margin-bottom: 0;
  16. }
  17. pre.prettyprint > ol.linenums > li.L0,
  18. pre.prettyprint > ol.linenums > li.L1,
  19. pre.prettyprint > ol.linenums > li.L2,
  20. pre.prettyprint > ol.linenums > li.L3,
  21. pre.prettyprint > ol.linenums > li.L4,
  22. pre.prettyprint > ol.linenums > li.L5,
  23. pre.prettyprint > ol.linenums > li.L6,
  24. pre.prettyprint > ol.linenums > li.L7,
  25. pre.prettyprint > ol.linenums > li.L8,
  26. pre.prettyprint > ol.linenums > li.L9
  27. {
  28.     list-style-type: decimal;
  29. }
  30. pre.prettyprint > ol.linenums > li span:first-child
  31. {
  32.     padding-left: 1em;
  33. }
  34. pre.prettyprint > ol.linenums > li span:last-child
  35. {
  36.     padding-right: 1em;
  37. }
  38.  

bloggerでは、「テーマ」の「カスタマイズ」からデータデザイナーを開き、


「上級者向け」の「CSSを追加」から「カスタムCSSを追加」の領域に上記のCSSの内容を貼り付け追加します。





3.記事を作成する際にHTMLモードで、Preタグにクラス名「prettyprint linenums」を指定して書きます。
  1. <pre class="prettyprint linenums”>
  2. ここにコードを書く
  3. </pre>

linenumsは行番号を表示するクラス属性です。

この記事は、ご紹介した方法でソースコードを埋め込んでいます。


スポンサードリンク