Javascript 如何在这个画布上添加图像它不是为我来的请检查这个？_Javascript_Asp.net_Html_Canvas

Javascript 如何在这个画布上添加图像它不是为我来的请检查这个？

javascript asp.net html canvas

Javascript 如何在这个画布上添加图像它不是为我来的请检查这个？,javascript,asp.net,html,canvas,Javascript,Asp.net,Html,Canvas,请告诉我如何把这张图片放到画布上，然后把它移到下一张图片上 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <script type="text/javascript"> function a () { var c = document.getElementById("myCanvas"); var ctx = c.getCont

请告诉我如何把这张图片放到画布上，然后把它移到下一张图片上

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <script type="text/javascript">
    function a () {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("Image1");   
   ctx.drawImage(img, 20, 30,10,10); 
   function copy() {
    var imgData = ctx.getImageData("img");
    ctx.putImageData(imgData, 10, 70);
 }
 </script>
</head>
<form id="form1" runat="server">
 <body onload =a()>
      <asp:Image ID="Image1" runat="server" ImageUrl="~/q.jpg" width="300px" Height="200px"/>
   <canvas id="myCanvas" style="border:1px solid #000000;"></canvas>
  <button onclick="copy()">Copy</button>
   </body>
  </form>
  </html>


函数a（）{
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var img=document.getElementById（“Image1”）；
ctx.drawImage（img，20,30,10,10）；
函数副本（）{
var imgData=ctx.getImageData（“img”）；
ctx.putImageData（imgData，10,70）；
}
复制

您的代码片段存在一些问题（例如，表单外的主体，以及尝试从画布获取图像引用），但要将图像绘制到画布，请操纵画布的内容，然后根据画布操纵的结果更新源图像。请尝试以下操作：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
function a() {
 var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d");
 var img = document.getElementById("Image1");
 ctx.drawImage(img, 20, 30, 10, 10);
}

function copy() {
 var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d");
 var imgData = ctx.getImageData(20, 30, 10, 10);
 ctx.putImageData(imgData, 10, 70);

 document.getElementById("Image1").src = c.toDataURL();
 return false;
}
</script>
</head>

<body onload =a()>
<!--<asp:Image ID="Image1" runat="server" ImageUrl="" width="300px" Height="200px"/>-->
<img src="notfunny.png" id="Image1"/>
<canvas id="myCanvas" style="border:1px solid #000000;"></canvas>
<button onclick="copy()">Copy</button>
</body>


函数a（）{
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var img=document.getElementById（“Image1”）；
ctx.drawImage（img，20,30,10,10）；
}
函数副本（）{
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var imgData=ctx.getImageData（20,30,10,10）；
ctx.putImageData（imgData，10,70）；
document.getElementById（“Image1”）.src=c.toDataURL（）；
返回false；
}
复制

是的，如果我们删除此复制功能，它将正常工作，我们需要根据图像的大小设置画布大小，因此您必须将此语句从ctx.drawImage（img，20，30，10，10）修改为ctx.drawImage（img，0，0，YourDesiredWidth，YourDesiredHeight）；