Javascript 如何在画布中绘制从页面加载的图像_Javascript_Jquery_Image_Canvas_Load

Javascript 如何在画布中绘制从页面加载的图像

javascript jquery image canvas

Javascript 如何在画布中绘制从页面加载的图像,javascript,jquery,image,canvas,load,Javascript,Jquery,Image,Canvas,Load,我有这样一个html页面： <html> <body> (1)<canvas id="cs"></canvas> (2)<img src="/image.png" id="img"/> </body> </html> 这就是你的全部代码吗您需要首先设置画布： var ctx = document.getElementById('cs').getCo

我有这样一个html页面：

<html> 
    <body>
          (1)<canvas id="cs"></canvas>
          (2)<img src="/image.png" id="img"/> 
    </body> 
</html>

这就是你的全部代码吗

您需要首先设置画布：

var ctx = document.getElementById('cs').getContext('2d');
var img = new Image();
img.src=document.getElementById('img').src;
ctx.drawImage(img,0,0);

像这样的事

以下是JSFIDLE中的一个示例：

请注意，由于默认画布大小，第一张图片被截断。根据要复制的图像，可能需要按如下方式调整画布的大小：

<html> 
    <body>
          (1)<canvas id="cs"></canvas>
          (2)<img src="/image.png" id="img"/> 
    </body> 
</html>

您必须确保您的图像已首先加载。尝试将drawImage调用包装到就绪状态，并确保首先设置画布对象

$().ready(function(){
   var canvas = document.getElementById('canvas');
   var ctx = canvas.getContext('2d');
   ctx.drawImage(document.getElementById("img"),0,0);

})

如果您还没有找到它，这里有一个很好的教程：

不，它不全是代码。它使用document.getElementById（“img”）而不是$（“#img”）；谢谢没有理由复制图像。在确保图像已加载后，您可以去掉第3行并将第4行更改为

ctx.drawImage（document.getElementById（'img'），0,0）

。您是对的，可能还有20种其他方法可以做到这一点——但使用new image（）实际上不会下载新图像，因此您不会节省任何带宽。投反对票似乎有点苛刻，但这是你的票。感谢您的回复。仅供参考，您无需编辑标题即可说[已解决]。只需选中最有用答案的复选框即可。要使其与$（“#img”）一起工作，请使用var img=$（“#img”）.get（0）；代码不起作用的原因是jquery返回一个元素数组，而您必须在其他javascript方法中使用第一个元素数组