Web上の画像サイズ（ピクセル×ピクセル）を取得するには？

クラスInlineImage のメソッド、getWidth()、getHeight() を用いても取得することができません。

エラーメッセージ

TypeError: オブジェクト Blob で関数 getWidth が見つかりません。（行 7、ファイル「コード」）

Google
1function testFunc() {
2
3   var image_URL = 'http://kinocolog.com/wp-content/uploads/2016/05/d301a87d37e512ecc42156f02a980f6a-300x250.jpg';
4   var response = UrlFetchApp.fetch(image_URL);
5   var image = response.getBlob();
6    
7   var w = image.getWidth();  // 幅
8   var h = image.getHeight(); // 高さ
9   
10   Logger.log([w, h]);
11}

行動規範の内容に同意します

回答2件

ベストアンサー

Google Apps Scriptのみでダウンロードした画像データの幅、高さを取得したい場合は、残念ながらblobから直接取得するためのメソッドは用意されておりません。そこで、Google Apps Script用のライブラリを使用するのはいかがでしょうか。このライブラリは、バイナリデータから直接画像データの幅、高さを取得することができます。

スクリプトを使用する前にライブラリをインストールしてください。英語で恐縮なのですが、インストール方法はこちらでご確認頂けます。

修正したスクリプト

ライブラリを使って修正したスクリプトは下記の通りです。

javascript
1function testFunc() {
2  var image_URL = 'http://kinocolog.com/wp-content/uploads/2016/05/d301a87d37e512ecc42156f02a980f6a-300x250.jpg';
3  var response = UrlFetchApp.fetch(image_URL);
4  var image = response.getBlob();
5  
6  var res = ImgApp.getSize(image);
7  var w = res.width;  // 幅
8  var h = res.height;  // 高さ
9  
10  Logger.log([w, h]); // <--- [300,250]
11}

実際に上記のスクリプトを実行すると、ログへ[300,250]が確認できます。

参考

ImgApp

投稿2019/11/24 07:36

kisojin

総合スコア899

退会済みユーザー

2019/11/24 07:46

あなた優しいし凄いね。あなたみたいな人を救世主と呼ぶね。

kisojin

2019/11/25 01:41

ご返事ありがとうございます。問題解決のための参考になれば幸いです。

行動規範の内容に同意します

canvasでわかるようです。
引用元

以下引用

HTMl
1
2<!DOCTYPE html>
3<html>
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6  <title></title>
7  <meta charset="utf-8" />
8
9  <script type="text/javascript">
10    function draw() {
11      var canvas = document.getElementById('SimpleCanvas');
12
13      if (!canvas || !canvas.getContext) {
14        return false;
15      }
16      var context = canvas.getContext('2d');
17
18      var img = new Image();
19
20      img.onload = function onImageLoad() {
21        context.drawImage(img, 0, 0);
22        var imageData = context.getImageData(64, 64, 1, 1);
23        var outFrame = document.getElementById('output');
24        outFrame.innerText = "(R,G,B,a) = (" + imageData.data[0] + "," + imageData.data[1] + "," + imageData.data[2] + "," + imageData.data[3] + ")";
25      }
26
27      img.src = 'resource/img03.png'; //相対URLの場合
28      //img.src = 'http://www.ipentec.com/demo/canvas/resource/img03.png';
29    }
30  </script>
31
32</head>
33<body onload="draw()" style="background-color:#D0D0D0;">
34  <canvas id="SimpleCanvas" width="640" height="360" style="background-color:#FFFFFF;"></canvas>
35  <div>Canvas Demo</div>
36  <div id="output"></div>
37</body>
38</html>
39