2

データ URI を使用してキャンバス要素内に画像を描画しようとしています。私は Django を使用しており、写真の base64 エンコーディングを含む変数をテンプレートに渡しています。過去に、私はそれを次のように使用しました：

<img src="data:image/jpg;base64, {{ photo_data }}">

これはうまくいきます。私は今それをこれに置き換えたい：

<canvas id="canvas"></canvas>

JavaScriptを使用してキャンバスに画像を描画します。この回答からコードを試しました：

var canvas = $('#canvas');
var ctx = canvas.getContext('2d');
var img = new Image;
$(img).load(function(){
    ctx.drawImage(img, 0, 0);
});
img.src = "data:image/jpg;base64, {{ photo_data }}"

これにより、最後の行に「SyntaxError: unterminated stringliteral」という JavaScript エラーが表示されます。このエラーは通常、改行が原因で発生することを読みました。ページ ソースを調べると、そこに改行があるように見えます。

ここに画像の説明を入力

それで、改行を削除しようとしました：

function removeBreaks(data){
    return data.replace(/(\r\n|\n|\r)/gm, "");
}

var photo_data = removeBreaks({{ photo_data }});

removeBreaks を呼び出すと、新しいエラーが発生します。「SyntaxError: 識別子は数値リテラルの直後に始まります」.

var photo_data = removeBreaks(/9j/4AAQSkZ...
----------------------------------^

私がする必要があるある種のエスケープはありますか?もしそうなら、どうすればいいですか?

アップデート

コメントと回答からのすべての提案を試しました。これまでのところ、作業に最も近づいているのは

photo_data = json.dumps(<base64 encoded image file>)

Django側と

var photo_data = "{{ photo_data }}".replace(/&quot;/g,"");
img.src = "data:image/jpg;base64, " + photo_data;

Javascript 側で。s を置き換えないと画像がまったく表示されず、&quot;削除すると画像の上 3 分の 1 だけが表示されます。キャンバス要素のサイズを変更しようとしましたが、それは問題ではないようです。

アップデート #2

キャンバスのサイズが問題であることがわかりました。キャンバス要素の幅と高さは、オブジェクトを作成したときに設定していなかった画像の幅と高さと同じかそれ以上である必要がありImageます。受け入れられた回答と json.dumps (&quot;警告付き) の両方が元の問題を解決するために機能します。

4

1 に答える 1

1

私はこのようにします：

img.src = "1234 ... 56789" + //
   "01234567 ... 7890" + //
   .....
   "67879878907890";

+私が一緒に仕事をしている人の中には、読みやすいと主張して、行の前に置くのが好きな人もいます。

文字列に base64 でエンコードされた画像データがあるとします。C/Java/Javascript に似た疑似言語のようなものは、次のようなコードになります (私は Python を知らないため)。

String image64 = ...
String output = "img.src = \"data:image/jpg;base64, ";

for (int i = 0; i < image64.length ; i += 100) {
    if (i > 0) {
        output += "\" + // \n    \"";
    }
    if (i + 100 < image64.length) {
        output += image64.substring(i, i+100);
    } else {
        output += image64.substring(i); // this gets the rest
    }
}
output += "\";\n";

output次に、JavaScript を配置する場所に値を書き込みます。

ここで、Django と Python のものを簡単に見てみると、テンプレートでは次のようになるのではないかと思われます。

img.src = "data:image/jpg;base64, " + //
{% for line in photo_data_lines %}
    "{{ line }}" + //
{% endfor %}
    "";

photo_data_linesただし、事前に各要素に画像データの 100 文字のチャンクを含む配列を設定する必要があります。（または、チャンクが必要な長さです。）

于 2013-07-25T19:50:11.737 に答える