Monacaでの画像処理について（初心者）

monacaでのカメラアプリ開発を進めています。現時点では、カメラを起動→撮影→写真をNCMBサーバーへアップロード→サーバーからダウンロード→アプリ画面上に表示、というような機能を実装しました。さて、撮影した写真に何らかの簡単な処理（グレースケールを考えて居ます）を施してからサーバーにアップロードしたいと考えて居るのですが、なかなかうまくいきません。コードを載せているのでどのあたりに、どのような処理を加えれば良いのかアドバイスをいただきたいです。よろしくお願いします。

（初期化設定）
var appKey    = "YOUR_APP_KEY";
var clientKey = "YOUR_CLIENT_KEY";
var fileName = "uploaded.jpg"; //保存File名
///// Called when app launch
$(function() {
  NCMB.initialize(appKey, clientKey);
});

（カメラ設定）
function snapPicture () {
         navigator.camera.getPicture (onSuccess, onFail,
             { quality: 50, destinationType: Camera.DestinationType.DATA_URL});

         //成功した際に呼ばれるコールバック関数
         function onSuccess (imageData) {
             var byteCharacters = toBlob(imageData);
             var NCMBFile = new NCMB.File(fileName, byteCharacters, "image/png");
             NCMBFile.save().then(function() {
               //NCMBサーバーからファイルをダウンロード
               var getFile =  new NCMB.File(fileName);
               var image_canvas = document.getElementById("showImage");
               getFile.fetchImgSource(image_canvas);
             },
             function(error) {
             　// The file either could not be read, or could not be saved to NCMB.
               alert(JSON.stringify(error));
             });
         }

         //失敗した場合に呼ばれるコールバック関数
         function onFail (message) {
             alert ('エラーです: ' + message);
         }
　　 }

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

回答1件

ベストアンサー

写真撮ってグレースケールにしてアップするところつくったので、参考になれば

canvasから生データを取る参考URL
https://oar.st40.xyz/article/133

写真からイメージ参考URL
https://cordova.apache.org/docs/ja/3.1.0/cordova/camera/camera.getPicture.html

※写真サイズは考慮してないのでもうちょっと作り込みは必要だけどサンプルとしては十分と思います

html
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <link rel="stylesheet" href="components/loader.css">
9  <link rel="stylesheet" href="css/style.css">
10  <script>
11    var appKey    = "";
12    var clientKey = "";
13    var downFileName = "uploaded.jpg"; //保存File名
14    var upFileName = "up.jpg"; //保存File名
15    var ncmb = null;
16
17    ///// Called when app launch
18    $(function() {
19      document.getElementById("top").style.display = "none";
20      
21      ncmb = new NCMB(appKey, clientKey);
22      // ボタンクリックで時刻を更新
23      $('#btn').click(function(e) {
24        snapPicture();
25      });
26    });
27
28    // Base64データをBlobデータに変換
29    function Base64toBlob(base64) {
30      // カンマで分割して以下のようにデータを分ける
31      // tmp[0] : データ形式（data:image/png;base64）
32      // tmp[1] : base64データ（iVBORw0k～）
33      var tmp = base64.split(',');
34      // base64データの文字列をデコード
35      var data = atob(tmp[1]);
36      // tmp[0]の文字列（data:image/png;base64）からコンテンツタイプ（image/png）部分を取得
37      var mime = tmp[0].split(':')[1].split(';')[0];
38      //  1文字ごとにUTF-16コードを表す 0から65535 の整数を取得
39      var buf = new Uint8Array(data.length);
40      for (var i = 0; i < data.length; i++) {
41        buf[i] = data.charCodeAt(i);
42      }
43        // blobデータを作成
44      var blob = new Blob([buf], { type: mime });
45      return blob;
46    }
47
48    // （カメラ設定）
49    function snapPicture () {
50      navigator.camera.getPicture(onSuccess, onFail,
51      { quality: 50, destinationType: Camera.DestinationType.DATA_URL});
52      //成功した際に呼ばれるコールバック関数
53      function onSuccess (imageData) {
54        var img = new Image();
55        img.src = "data:image/jpeg;base64," + imageData;
56        img.onload = function() {
57          // キャンパスに描画
58          var image_canvas = document.getElementById("showImage");
59          var ctx = image_canvas.getContext('2d');
60          ctx.drawImage(img, 0, 0, 800, 800);
61
62          // グレースケールに
63          var src = ctx.getImageData(0, 0, image_canvas.width, image_canvas.height);
64          var dst = ctx.createImageData(image_canvas.width, image_canvas.height);
65          for (var i = 0; i < src.data.length; i = i + 4) {
66            var pixel = (src.data[i] + src.data[i + 1] + src.data[i + 2]) / 3;
67            dst.data[i] = dst.data[i + 1] = dst.data[i + 2] = pixel;
68            dst.data[i + 3] = src.data[i + 3];
69          }
70          ctx.putImageData(dst, 0, 0);
71
72          // canvasから画像生データを作成する
73          var jpgData = image_canvas.toDataURL('image/jpeg');
74          var blob = Base64toBlob(jpgData);
75
76          //NCMBサーバーからファイルをダウンロード
77          var getFile = ncmb.File.upload(upFileName, blob)
78          .then(function(blob) {
79          });
80        }
81      }
82      //失敗した場合に呼ばれるコールバック関数
83      function onFail (message) {
84        alert ('エラーです: ' + message);
85      }
86    }
87  </script>
88</head>
89<body>
90  <button id="btn" type="button">写真</button>
91  <div id="top">
92    <canvas id="showImage" width="500" height="500" />
93  </div>
94</body>
95</html>