标签: html5-canvas
如何在php中使用一段图像绘制一个形状
我需要使用一段图像来创建帧图像.
例如:
用户将从后端上传图像片段:
现在我需要根据前端用户的要求在前端创建一个框架(用户将选择框架的高度和宽度,然后他将选择此图像块),如下所示:
我没有办法做到这一点,我试图用css和html画布做到这一点,但没有运气.
有人可以建议我如何通过使用PHP或CSS或HTML或JavaScript或任何方式来实现这一目标.
你可以在这里看到工作示例,这实际上是我需要做的.
推荐指数
解决办法
查看次数
Canvas drawImage缩放
我正在尝试按比例缩放图像到画布.我可以用固定的宽度和高度来缩放它,如下所示:
context.drawImage(imageObj, 0, 0, 100, 100)
但我只想调整宽度并按比例调整高度.类似于以下内容:
context.drawImage(imageObj, 0, 0, 100, auto)
我看到了我能想到的所有地方,并没有看到这是否可能.
推荐指数
解决办法
查看次数
将HTML5 Canvas转换为要上传的文件？
标准HTML文件上载的工作方式如下:
<g:form method="post" accept-charset="utf-8" enctype="multipart/form-data"
name="form" url="someurl">
<input type="file" name="file" id="file" />
</form>
在我的情况下,我将图像加载到html5画布,并希望将其作为文件提交到服务器.我可以:
var canvas; // some canvas with an image
var url = canvas.toDataURL();
这给了我一个image/png作为base64.
如何将base64映像以与输入类型文件相同的方式发送到服务器？
问题是base64文件的类型与文件类型不同,后者位于input type ="file"中.
我可以以某种方式转换服务器类型相同的base64吗？
推荐指数
解决办法
查看次数
Canvas上的keydown的addEventListener
我正在尝试制作一个响应键盘和鼠标输入的画布应用程序.我有这个代码:
canvas = document.getElementById('canvas');
canvas.addEventListener('mousedown', function(event) {
alert('mousedown');
}, false);
canvas.addEventListener('keydown', function(event) {
alert('keydown');
}, false);
每当我点击鼠标时,"mousedown"警报就会出现,但"keydown"警报永远不会出现.相同的代码在JS Bin上工作正常:http://jsbin.com/uteha3/66/
为什么它不在我的页面上工作？画布无法识别键盘输入吗？
推荐指数
解决办法
查看次数
在画布标签上绘制箭头
我想使用canvas标签javascript绘制一个箭头.我使用二次函数制作了它,但是我在计算箭头的旋转角度时遇到了问题......
有人知道这个吗？
谢谢
推荐指数
解决办法
查看次数
如何从Canvas上的HTML5 File API中绘制图像？
我想在画布上绘制一个用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>
推荐指数
解决办法
查看次数
Firefox中的event.offsetX
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script language="javascript">
function main(){
var canvas = document.getElementById("canvas");
canvas.addEventListener("mousemove", function(e){
if (!e) e = window.event;
var ctx = canvas.getContext("2d");
var x = e.offsetX;
var y = e.offsetY;
ctx.fillRect(x, y, 1, 1);
});
}
</script>
</head>
<body onload="main();">
<div style="width: 800px; height: 600px; -webkit-transform: scale(0.75,0.75); -moz-transform: scale(0.75,0.75)">
<canvas id="canvas" width="400px" height="400px" style="background-color: #cccccc;"></canvas>
</div>
</body>
</html>
请考虑以上快速而肮脏的例子.请注意我的画布包含一个应用了比例变换的div.以上代码适用于任何基于webkit的浏览器.移动鼠标时,它会在画布上绘制点.不幸的是,它不在Firefox中,因为它的事件模型不支持offsetX/Y属性.如何将(也许)event.clientX(在firefox中也支持)中的鼠标坐标转换为画布相对坐标,同时考虑画布位置,变换等？谢谢,卢卡.
推荐指数
解决办法
查看次数
使用html5在折线图上实时数据绘图
我想制作一个每两秒更新一次的折线图,不需要刷新页面(它会从服务器上更新的单独文件中获取信息),是他们的任何JavaScript库(除了JQuery之外)那会很容易吗？任何人都可以在网页上显示平均值吗？在1到10的范围内,这会有多难？(10很难)
如果重要的话,数据也会以固定的10秒间隔更新.如果可能的话,我想坚持使用CSS3 HTML5和javascript.
推荐指数
解决办法
查看次数
在画布上绘制1px粗线可创建2px粗线
在这个jsfiddle中,有一行lineWidth为1.
http://jsfiddle.net/mailrox/9bMPD/350/
例如:
ctx.lineWidth = 1;
然而,当它在画布上绘制时,线是2px厚,如何创建1px粗线.
我可以绘制一个矩形(高度为1px),但我希望这条线也适用于对角线.那么你如何让这条线高1px？
谢谢!
推荐指数
解决办法
查看次数
如何在加载页面时显示正在运行的进度条
我想说明一个正在运行的进度条,而我的页面加载喜欢这里,在我的网页.我在我的示例中使用了一个简单的加载图像,但我想在正在运行的进度条中将其转换.这是我的代码:
$(window).load(function() {
alert("hi");
$('#loading').hide();
});#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id="loading">
<img id="loading-image" src="http://cdn.nirmaltv.com/images/generatorphp-thumb.gif" alt="Loading..." />
</div>
<div id="txt">
<h2>Let AJAX change this text</h2>
</div>
<button>Change Content</button>这是一个JSFiddle
推荐指数
解决办法
查看次数