让用户输入图像 URL 并将其绘制在 html5 画布上答案

【问题标题】：Let user input image URL and draw this on the html5 canvas让用户输入图像 URL 并将其绘制在 html5 画布上
【发布时间】：2015-01-27 12:41:38
【问题描述】：

我想要一个文本框，用户可以将图像 URL 粘贴到该文本框和一个输入按钮，单击该按钮将在画布上绘制图像。这是我的画布和文本框/输入按钮。

<body>
<input type="text" id="input"/><input type="button" value="Enter" onclick="useImage()">
<canvas id="canvas" width="600" height="400" style="border:1px solid grey;">
</body>

然后我知道我的 javascript 中应该有一个函数，它允许这样做并引用画布：

<script>
function useImage(){
  var c = document.getElementById("canvas");
  var ctx = c.getContext("2d"); //WHAT GOES IN HERE?
  ctx.drawImage(img,0,0,600,400);   
</script>

但我不确定如何使我的功能正常工作，有人可以帮忙吗？我希望图像填满 600x400 的整个画布。

【问题讨论】：

Drawing an image from a data URL to a canvas 的可能重复项

标签： javascript html url canvas

【解决方案1】：

一种简单的方法是在页面上创建图像元素，然后让drawImage 从那里拉取数据。你可以试试这样的

  function useImage(ev){
    // create the image element
    var img = document.createElement('img');
    // get the image url from the input box
    img.src = document.getElementById('input').value;

    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    ctx.drawImage(img,0,0,600,400);   
  }

【讨论】：