Question

我正在使用canvas，我有一个脚本从用户桌面上传图像，我需要更改它以从同一页面加载图像并将它们放在画布上（从桌面上传的文件直接转到画布）

功能：

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">

如何从图像列表中立即拨打电话？谢谢

Answer 1

假设文档中的画布标识为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);
}

canvas更改文件api用于本地存储

1 个答案: