我在移动设备上制作了一个简单的网络应用程序,允许访问者使用html5输入[type = file]元素捕获照片.然后我会在网上显示它以供预览,然后访问者可以选择将照片上传到我的服务器用于其他目的(即:上传到FB)
当我使用iPhone拍照并垂直握持时,我发现照片的方向存在问题.照片的标签方向正确.但是,当我尝试使用drawImage()方法将其绘制到画布中时,它会被旋转90度.
我试图以4个方向拍摄照片,其中只有一个可以在画布上绘制正确的图像,其他图像可以旋转,甚至可以颠倒翻转.
好吧,我很困惑,以正确的方向来解决这个问题...感谢您的帮助......
这是我的代码,主要来自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 files supported too).</p>
<p>
<form method="post" enctype="multipart/form-data" action="index.php">
<input type="file" id="take-picture" name="image" accept="image/*">
<input type="hidden" name="action" value="submit">
<input type="submit" >
</form>
</p>
<h2>Preview:</h2>
<div style="width:100%;max-width:320px;">
<img src="about:blank" alt="" id="show-picture" …我正在尝试按比例缩放图像到画布.我可以用固定的宽度和高度来缩放它,如下所示:
context.drawImage(imageObj, 0, 0, 100, 100)
但我只想调整宽度并按比例调整高度.类似于以下内容:
context.drawImage(imageObj, 0, 0, 100, auto)
我看到了我能想到的所有地方,并没有看到这是否可能.
我想在画布上绘制一个用HTML5 File API打开的图像.
在该handleFiles(e)方法中,我可以访问文件,e.target.files[0]但我无法直接使用该图像drawImage.如何从HTML5画布上的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>
我正在尝试动画,<canvas>并且无法确定如何以一定角度绘制图像.期望的效果是像往常一样绘制的一些图像,其中一个图像缓慢旋转.(如果这有任何区别,则此图像不在屏幕的中心).
可以将CanvasPixelArray获取的via 发送getImageData到worker脚本,让worker脚本操纵其后台线程中的像素,最后将操作的像素阵列发回.
但是,我使用的是原生画布绘图功能drawImage.这些drawImage调用当前正在阻止UI线程.这会导致按钮重绘速度慢,单击按钮时会出现明显的延迟,这只是为了说明一些缺点.(编辑:现在可以使用ctx.imageSmoothingEnabled = false至少在带有webkit前缀的WebKit上完成一项小改进.)
我想使用Web Workers将绘图从主线程移动到后台线程中.但是,我似乎无法向工作人员发送画布和上下文.
注意:像往常一样,后台线程(包括worker)无法操纵DOM.如果后台线程采取的操作需要导致对DOM的更改,则应将消息发送回其创建者以执行该工作.
但是我想按原样离开DOM; 我只是想在canvas元素上绘制东西.这是可能的,还是Web Workers真的只允许计算而不是绘制？
(或者也许可以使用类似drawImage操作CanvasPixelArray而不是在画布上绘制的函数？)
我正在编写一些使用HTML5画布的代码.一般来说效果很好,但现在我发现了一种非常奇怪的行为.奇怪的是,它在不同的浏览器上是一致的,所以必须是我理解错误的东西......尽管文档似乎正好说明了我在做什么.这是代码(它是一个对象方法):
MyCanvas.prototype.getElement = function() {
var innerHtml = "<div></div>";
var elem = jQuery(innerHtml, {
'id' : this.viewId
});
var canvas = jQuery("<canvas/>", {
'id' : this.viewId + "canvas",
'width' : this.width,
'height' : this.height
});
var w = this.width;
var h = this.height;
jQuery(elem).append(canvas);
var imgElem = new Image();
imgElem.src = this.maskImage;
imgElem.onload = function() {
var ctx = canvas[0].getContext('2d');
ctx.drawImage(this, 0, 0, w, h);
};
return elem;
};
在此之后,我将再次使用jQuery将此元素附加到已经在页面中的Div(这是空白).结果将是图像过度伸展,就像宽度的十倍......这很奇怪,因为对于我对drawImage的理解,它应该使用w和h值来缩放图像,并且假设w和h是画布的大小,应该很合适.
我究竟做错了什么？是因为我绘制了渲染的DOM树吗？
我正在尝试使用drawImage在canvas元素上绘制一个半透明的PNG.但是,它将图像绘制为完全不透明.当我查看正在加载的资源并在浏览器中加载实际的PNG时,它会显示透明度,但是当我在画布上绘制时,它不会.有任何想法吗？
这是代码:
drawing = new Image()
drawing.src = "draw.png"
context.drawImage(drawing,0,0);
我正在阅读"使用HTML5,CSS3和Javascript制作等距社交实时游戏".
我不是很远,而且我遇到了一个画布问题,这个问题让我在一天中的大部分时间都难过.
drawImage()似乎没有绘制.我已经研究过这个问题并尝试了许多预加载图像的排列,但到目前为止还没有任何工作.
这是我的代码:
HTML:
<canvas id="game" width="100" height="100">
Your browser doesn't include support for the canvas element.
</canvas>
CSS:
html {
height:100%;
overflow:hidden
}
body {
margin:0px;
padding:0px;
height:100%;
}
和js:
window.onload = function() {
var canvas = document.getElementById('game');
canvas.width=document.body.clientWidth;
canvas.height=document.body.clientHeight;
var c = canvas.getContext('2d');
function showIntro() {
var phrase = "Click or tap screen to start";
c.clearRect (0, 0, canvas.width, canvas.height);
var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, "#9db7a0");
grd.addColorStop(1, "#e6e6e6");
c.fillStyle = grd;
c.fillRect (0, 0, …好的,我正在使用JavaScript Canvas Elements等创建游戏.我已经能够加载图像的TONS,但在少数几个,JavaScript回复错误,如
未捕获的TypeError:无法在'CanvasRenderingContext2D'上执行'drawImage':未找到与提供的签名匹配的函数.
这根本没有任何感觉,因为相同的代码在其他地方有效!？!
以下是我的代码中的示例:
board.drawImage(document.getElementById("player_explode"), this.x, this.y);
分别在对象方法内部Player.die().
有谁知道为什么会出现这种行为？我对此感到非常沮丧......
这是一个JSFiddle,用于演示所有代码.
Player.die()位于line[242].
我正在将图像绘制到画布元素.然后我有代码依赖于这个过程来完成.我的代码看起来像这样:
var myContext = myCanvasElement.getContext('2d'),
myImg = new Image();
myImg.onload = function() {
myContext.drawImage(containerImg, 0, 0, 300, 300);
};
myImg.src = "someImage.png";
所以现在,我想在drawImage完成时收到通知.我检查了规范,但我找不到事件或传递回调函数的可能性.到目前为止,我只是暂停了,但这显然不是很可持续.你怎么解决这个问题？
drawimage ×10
javascript ×8
canvas ×6
html5-canvas ×6
html5 ×4
animation ×1
dom-events ×1
fileapi ×1
png ×1
preloading ×1
resize ×1
scaling ×1
transparency ×1
web-worker ×1