Tag: drawimage

如何在Canvas上从HTML5 File API中绘制图像？: 我想在canvas上绘制一个用HTML5 File API打开的图像。在handleFiles(e)方法中，我可以通过e.target.files[0]访问File，但是我不能直接使用drawImage绘制图像。如何从HTML5canvas上的File API绘制图像？这是我使用的代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script> window.onload = function() { var input = document.getElementById('input'); input.addEventListener('change', handleFiles); } function handleFiles(e) { var ctx = document.getElementById('canvas').getContext('2d'); ctx.drawImage(e.target.files[0], 20,20); alert('the image is drawn'); } </script> </head> <body> <h1>Test</h1> <input type="file" id="input"/> <canvas width="400" height="300" id="canvas"/> </body> </html>

canvasdrawImage缩放: 我试图按比例缩放一个图像到canvas上。我可以用固定的宽度和高度来缩放它，如下所示： context.drawImage(imageObj, 0, 0, 100, 100) 但是我只想调整宽度并调整高度。像下面这样： context.drawImage(imageObj, 0, 0, 100, auto) 我到处都可以想到，如果这是可能的，我还没有看到。

如何在移动网页浏览器中使用input捕获照片后在canvas上以正确的方向绘制照片？: 我正在制作一个简单的移动应用程序，允许访客通过使用html5 input [type = file]元素捕捉照片。然后，我将显示在网上预览，然后访问者可以select将照片上传到我的服务器用于其他目的（即：上传到FB）当我用iPhone拍照并垂直放置时，我发现照片的方向有问题。照片的标签方向正确。但是，当我尝试使用drawImage（）方法将其绘制到canvas中时，它将绘制90度旋转。我试图用4个方向拍照，其中只有一个可以在canvas上画出正确的图像，有些则是旋转的，甚至是倒过来的。那么，我很困惑，得到正确的方向来解决这个问题…感谢您的帮助… 这里是我的代码，主要是从MDN复制 <div class="container"> <h1>Camera API</h1> <section class="main-content"> <p>A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local […]

如何在另一个图像上绘制图像？: 我有一个关于随机城市交通networking模拟的Java项目，我设法find了实现这个项目的方法，所以我把每个交叉点分成了一个基本上是扩展的JPanel类（叫做家乐福）的部分。一切工作都很顺利，直到我陷入如何绘制车辆并使它们通过道路。所以我的问题是如何绘制一个图像（车辆图像）在另一个图像（道路）？