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

Let user input image URL and draw this on the html5 canvas

本文关键字：绘制 html5 输入 用户 图像 URL      更新时间：2023-09-26

我想要一个文本框，用户可以将图像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 的画布。

一个简单的方法是在页面上创建图像元素，然后让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);   
  }
相关文章：