1

以下にテスト コードを作成します。Jsfiddle で操作できます。

http://jsfiddle.net/Stallman41/57hvX/31/
HTML:

<canvas id="test_canvas" style="background-color : #FFFF00" ; width="500px"
; height="340px"></canvas>
<br>
<button id="test_put_btn">Put an image</button>
<br>
<button id="save_dataURL">Save to dataURL</button>
<br>
<button id="draw_back">Final step: draw 3 images back.</button>
<br>
<img id="first_img"; width="100px" ; height="100px" ;></img>
<img id="second_img"; width="100px" ; height="100px" ></img>
<img id="third_img"; width="100px" ; height="100px" ;></img>

Javascript:

var drawing_plate;
var context;
var dataURL_arr = new Array();
$(document).ready(function () {
drawing_plate = document.getElementById("test_canvas");
context = drawing_plate.getContext('2d');


$("#test_canvas").bind("mousedown", Touch_Start);
$("#test_canvas").bind("mousemove", Touch_Move);
$("#test_canvas").bind("mouseup", Touch_End);


}); //document ready. 



function Touch_Start(event) {
event.preventDefault();
touch = event;
touch_x = touch.pageX;
touch_y = touch.pageY;

line_start_x = touch.pageX - 0;
line_start_y = touch.pageY - 0;

context.beginPath();
context.moveTo(line_start_x, line_start_y);
}

function Touch_Move(event) {
event.preventDefault();
touch = event; //mouse
line_end_x = touch.pageX - 0;
line_end_y = touch.pageY - 0;
context.lineTo(line_end_x, line_end_y);
context.stroke();
}


$("#test_put_btn").click(function () {
var test_img = new Image();
test_img.src = "http://careerscdn.sstatic.net/careers/gethired/img/careers2-      ad-header-so-crop.png";
context.drawImage(test_img, 0, 0);
});

$("#save_dataURL").click(function () {

dataURL_arr.push(drawing_plate.toDataURL("image/png"));
});

$("#draw_back").click(function () {
  var f_image= $("#first_img")[0];
  var s_image= $("#second_img")[0];
  var t_image= $("#third_img")[0];

f_image.onload= function()
{
    f_image.src= dataURL_arr[0];
}
    f_image.src= dataURL_arr[0];

s_image.onload= function()
{
    s_image.src= dataURL_arr[0];
}
    s_image.src= dataURL_arr[0];      

t_image.onload= function()
{
    t_image.src= dataURL_arr[0];
}
     t_image.src= dataURL_arr[0];

});


Android システムで図面プレートを開発し、図面を dataURL 文字列に保存します。キャンバスに何かを描いたり、キャンバスに画像を配置したりできます。そして、ユーザーが自分の絵を小さなアイコンで見られるようにする必要があります。 base64文字列を保存するため
に使用します。canvas.toDataURL("image/png")そして<img>、小さなアイコン コンテナーとして選択します。しかし、私が得たのは、アイコンに表示できるのは図面だけであり、通常、img.src= canvas.toDataURL("image/png");画像を書いても何も表示されません!
私はその問題を長い間調査しています。
1. 問題は dataURL 文字列が長すぎることではないでしょうか?
2. OS のサポート: Android?


ここの Jsfiddle のコードは、私の Android PhoneGap 開発での同様の手順を示しています。
まず、キャンバスに何かを描き、 を押してから を押しPress an imageますSave to dataURL。ただし、このプロセスを 3 回行う必要があります。この状態では、文字列配列には、図面と画像によって生成された base64 文字列が含まれています。
最後に を押すFinal step: draw 3 images back.と、画像アイコンには何も表示されません。
結論として：
私の経験では、私が書いているようにimg.src= canvas.toDataURL("image/png");（ img が dom 要素または であってもvar img = new Image();）。常に機能するとは限りません。機能する場合もありますが、機能しない場合もあります... (私は Android 4.0.1、phonegap 1.7.0 で作業しています)


2番目に、特に多くのbase64文字列を配列に保存し、それらを多くの画像DOM要素に割り当てると、間違いなく失敗します。
第 3に、ユーザーがキャンバスに何かを描画するだけであれば、常に機能します (Jsfiddle のサンプル コードを除きますが、私の Android システムでは機能します...) context.drawImage(~)。写真。
混乱が多すぎます...
ユーザーが自分の図面を小さなアイコンで表示できるようにする必要があります。


参考文献:

1
2
3

4

2 に答える 2

1

私はちょうどこの質問に出くわしました。

をクリックしPut an imageてから をクリックしSave to dataURL、JavaScript コンソールで次のようなことを確認します。

    SecurityError: DOM Exception 18

これはブラウザのセキュリティ機能です。別のドメインから画像を挿入したため、クロスオリジン リクエストとしてカウントされます。

セキュリティ エラーを解消すると、キャンバスをデータ URL にエクスポートできます。

于 2013-04-02T16:43:44.243 に答える
0

コード内の別のこと。

キャンバスに描画しようとしている画像を test_put_btn onclick イベント ハンドラーに挿入すると、画像が読み込まれてキャンバスに描画されるのを待たないため、画像が表示されることはありません (または、誤って動作することがあります)。

画像の「onload」イベントを処理し、ハンドラーに描画して、画像の描画を許可する必要があります。

test_img.src ステートメントの前に、次を配置する必要があります。

test_img.onload = function() 
{
   context.drawImage(test_img, 0, 0);
};

さらに、アクセスしようとしている画像にアクセスできません -->私にとっては機能しません

于 2014-11-13T09:17:48.097 に答える