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 回答