ajaxでbase64な感じ

アバター
大白定義
記事: 14
登録日時: 14年前
住所: 三重県

ajaxでbase64な感じ

投稿記事 by 大白定義 » 12年前

C言語交流フォーラムでこういうの書くのってどうなのって突っ込みがきそうですが、気にせず今日も色々とー。

前回サーバーからデータを取ってくる処理を作ったんだけど、ぶっちゃけXML処理すんのめんどくせーなーと思った訳です。
で、パーフェクトjavascriptをぱらぱらーっとめくってみたら、JSONでやったほうが楽じゃね？みたいな記述を発見。
というわけで、さくっと書き換え。

そうするとえらく処理を書くのが楽になったので、今日はさらに突っ込んでサーバー側で画像ファイルをbase64エンコードして、クライアント側でデコードする所までやってみました。

まずサーバー側。

CODE: 

use JSON;

use lib "./module";
use ResourceTranslator;

my $app = sub {
    my $output_data = ResourceTranslator->get_image_data();

    my $json_data = JSON->new->encode($output_data);

    return [
        200,
        [ContentType => "text/plain"],
        [$json_data],
    ];
}
base64化は別モジュールに切り分けたのでそっちも貼り付け。

CODE: 

package ResourceTranslator;
use strict;
use warnings;

use MIME::Base64;

sub get_image_data {
    my $file = "画像ファイル";
    my $mime_type = "gif";

    my $file_size = -s $file;
    my $binary;

    {
        open my $IN, " "data:image/" . $mime_type . ";base64," . $result,
    };
}

1;

そしてクライアント側がこんな感じ

CODE: 

var button = document.getElementById('ajax');
button.onclick = function() {
    var xmr = new XMLHttpRequest();
    xmr.onreadystatechange = function() {
        if (xmr.readyState == 4 && xmr.status == 200) {
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');

            var response = JSON.parse(xmr.responseText);
            var image = new Image();
            image.onload = function() {
                ctx.drawImage(image, 0, 0);
            }
            image.src = response.image;
        }
    };
    xmr.open('GET', 'サーバーのアドレス');
    xmr.send(null);
};
一応HTMLも。

CODE: 


    
        Test
わざわざサーバからbase64エンコードした文字列引っ張ってきて何がやりたいの？と思われるかもしれませんが、
やりたいのはjavascriptゲームで画像ファイルの隠蔽です。

まあ、こんなことやってもサーバーに直接アクセスしたら文字列データは取ってくることができるんで、あんまり意味ないんですけどね。
最後に編集したユーザー 大白定義 on 2013年9月12日(木) 22:38 [ 編集 2 回目 ]
ページトップ
コメントはまだありません。