
[code]

     function addMessage (value,color,size) {
    
        var canvas = document.getElementById("picture");
        var ctx = canvas.getContext("2d");
        var image = new Image();
        var image.src  = " &quot;data:image/jpg;base64," + window.btoa(value) + "&quot;";
        image.onload = function(){
          ctx.drawImage(image, 0, 0);
        }
        var msg = value.replace( /[!@$%<>'"&|]/g, '' );
        $("#msg_list").prepend("<div class='msg'>"  + msg + "</div>");
      } 
    
[/code]

Android から画像をサーバー経由で送り、ブラウザで表示したいのですがうまくいきません。

Android 側ではイメージをバイナリデータにして、ブラウザ側で処理しやすいようにと思い、 string にして送っています。 Android
側、ブラウザ側ともに表示される string は同じなのでサーバー側には問題はないように思います。

JavaScript 側のコードしかのせていませんが、どなたかご存知の方、書き方が正しいかどうか見ていただけないでしょうか。


CC BY-SA 3.0
2015-02-20T02:51:26.100
6811
2015-02-20T07:44:52.713
2015-02-20T03:08:41.897
4978
8422
question
javascript 画像 html5-canvas
JavaScript で Base64 エンコードをして Canvas に画像を表示


`value` の中身が正しいかどうか分からないので、他にもあるかもしれませんが、 `&quot;` が必要ないのと、 `onload`
を登録している行の位置が心配です。

具体的には

[code]

    var image.src  = " &quot;data:image/jpg;base64," + window.btoa(value) + "&quot;";
    
[/code]

の行を

[code]

    var image.src  = "data:image/jpg;base64," + window.btoa(value);
    
[/code]

とし、 `onload` の行は `image.src`
の設定前に移動する感じです。（[関連](https://ja.stackoverflow.com/q/6206/4978)）


CC BY-SA 3.0
2015-02-20T03:17:20.237
6812
2015-02-20T03:17:20.237
2017-04-13T12:52:38.920
-1
4978
6811
answer


`var image.src`としているため、エラーとなっていませんか？  
未検証ですがこれで動くと思います。

[code]

    function addMessage (value,color,size) {
    
        var canvas = document.getElementById("picture");
        var ctx = canvas.getContext("2d");
        var image = new Image();
        image.onload = function(){
          ctx.drawImage(image, 0, 0);
        }
        image.src  = "data:image/jpg;base64," + window.btoa(value);
    
        var msg = value.replace( /[!@$%<>'"&|]/g, '' );
        $("#msg_list").prepend("<div class='msg'>"  + msg + "</div>");
    } 
    
[/code]

参考(Pierreさんの回答)：  
[Convert and insert Base64 data to Canvas in
Javascript](https://stackoverflow.com/questions/8473205/convert-and-insert-
base64-data-to-canvas-in-javascript)


CC BY-SA 3.0
2015-02-20T06:35:48.600
6826
2015-02-20T07:44:52.713
2017-05-23T12:38:55.307
-1
7214
6811
answer