1

私はキャンバスで作業しており、ユーザーのデスクトップから画像をアップロードするスクリプトがあり、同じページから画像をロードしてキャンバスに配置するように変更する必要があります (デスクトップからアップロードされたファイルは既にキャンバスに直接移動します)。

関数:

window.onload=function(){
  var s = document.getElementById("fontsize");
  s.value="48";
  document.getElementById('loadpicture').addEventListener('change', aFileIsLoaded, false);
  backgroundimagemode=NONE;
  carpeInit();
  update();
}

と：

function aFileIsLoaded(e1)
{
        var filename = e1.target.files[0];
        var fr = new FileReader();
    fr.onload = function(e2)
    {
          backgroundimage = new Image();
          backgroundimage.src=e2.target.result;
    };
        fr.readAsDataURL(filename);
}

ありがとうございました

ここでの最初の質問です。前に間違ったボックスに書いたと思います。申し訳ありません

あなたが提案したように、私は今このコードを持っています

function aFileIsLoaded(e1)
{
        var filename = e1.target.files[0];
        var fr = new FileReader();
    fr.onload = function(e2)
    {
          backgroundimage = new Image();
          backgroundimage.src=e2.target.result;
         var context = document.getElementById('myCanvas').getContext('2d');
         context.canvas.width = backgroundimage.width;
         context.canvas.height = backgroundimage.height;
         context.drawImage(backgroundimage, 0, 0, backgroundimage.width, backgroundimage.height);


    };
        fr.readAsDataURL(filename);
}

以前は、画像はデスクトップからロードされていました

<input type="file" name="backpicture" id="loadpicture">

画像のリストから今すぐ呼び出すにはどうすればよいですか? ありがとうございました

4

1 に答える 1

0

ドキュメントに id を持つキャンバスがあると仮定すると、これを現在の関数にmyCanvas追加できます。fr.onload

var context = document.getElementById('myCanvas').getContext('2d');

context.canvas.width = backgroundimage.width;
context.canvas.height = backgroundimage.height;

context.drawImage(backgroundimage, 0, 0, backgroundimage.width, backgroundimage.height);

うわー、とても速い、何も削除せずにこのようにありがとう?

function aFileIsLoaded(e1)
{
        var filename = e1.target.files[0];
        var fr = new FileReader();
    fr.onload = function(e2)
   {

var context = document.getElementById('myCanvas').getContext('2d');
context.canvas.width = backgroundimage.width;
context.canvas.height = backgroundimage.height;
context.drawImage(backgroundimage, 0, 0, backgroundimage.width, backgroundimage.height);
          backgroundimage = new Image();
          backgroundimage.src=e2.target.result;
    };
        fr.readAsDataURL(filename);
}
于 2012-09-27T16:55:47.073 に答える