这是在您的身份证上绘制学生姓名和照片的 KineticJS 代码。
学生可以在卡片周围拖动他们的姓名和照片。
照片不可调整大小，但我已将照片缩放以适合您卡片的照片区域。如果您更改卡片布局，您可以轻松调整 KineticJS 图像对象中的宽度/高度。
这是代码和小提琴：http://jsfiddle.net/m1erickson/9jTtb/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 472,
height: 286
});
var layer=new Kinetic.Layer();
stage.add(layer);
var preload=[];
var images=[];
preload.push("http://dl.dropbox.com/u/139992952/idcard.png");
// I use a demo photo here
// Of course in your live site, you would use URL.createObjectURL
preload.push("http://macmcrae.com/wp-content/uploads/2009/07/bubblebobble.jpg");
preloadImages(preload,init);
function init(images){
KImage("background",0,0,472,286,false,layer,images[0]);
KImage("Photo",284,105,160,160,true,layer,images[1]);
KText("Name",50,190,"Verdana",27,"black",true,layer,"Sam Student");
}
// image preloader
function preloadImages(sources,callback){
var images=[];
var count=0;
for(var i=0;i<preload.length;i++){
images[i]=new Image();
images[i].onload=function(){
if(++count==preload.length){
callback(images);
}
}
images[i].src=preload[i];
}
}
// build the specified KineticJS Image and add it to the stage
function KImage(id,x,y,width,height,isDraggable,layer,img){
var kImg=new Kinetic.Image({
image:img,
id:id,
x:x,
y:y,
width:width,
height:height,
draggable:isDraggable
});
layer.add(kImg);
stage.draw();
}
// build the specified KineticJS Text and add it to the stage
function KText(id,x,y,font,fontsize,color,isDraggable,layer,text){
var kText=new Kinetic.Text({
text:text,
id:id,
x:x,
y:y,
fontFamily:font,
fontSize:fontsize,
fill:color,
draggable:isDraggable
});
layer.add(kText);
stage.draw();
};
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
<img id="test"/>
</body>
</html>
[已编辑以回答 OP 的其他请求]
我查看了您的代码，但找不到任何 php 上传脚本，所以大致思路如下。
我假设您已经在 php.ini 中设置了配置，尤其是这些：
- file_uploads = true;
- upload_max_filesize=2M; // 或您希望用户上传的任何最大尺寸
- post_max_size=8M;
我假设您已经创建了一个文件夹来保存您上传的文件并授予网络服务器所有权（或足够的权限）。下面的代码假设子目录是“uploads”。
然后下面的 PHP 代码将上传您的用户的图像，并使用与用户原始文件相同的名称将其存储在“uploads”目录中。
您仍然必须修改此代码以进行任何您认为必要的边界/错误检查。就个人而言，我至少会这样做：
- $_FILES 不为空，是一个数组
- $_FILES 报告未发生错误
- 文件名仅包含这些英文字符 [0-9][A-Z][.]
- 文件名不超过 250 个字符
- 文件不为空
- 文件不大于upload_max_size
- 文件具有以下扩展名之一：.jpg、.jpeg、.gif、.png // 或任何您接受的文件
- 文件不存在 // 添加逻辑以覆盖或退出
- 捕获上述测试失败的例程
php 部分如下所示：
<?php
var $uploadDirectory="uploads/"; // or whatever dir you set up
var $maxFileSize=1000000; // or whatever max-size you allowed
// assuming 'file' is the name of your input-type-file tag
// oops, got an error
if ($_FILES["file"]["error"] > 0){echo "Error occured: " . $_FILES["file"]["error"] . "<br>"; }
// get filepaths
var $tempfile=$_FILES["file"]["tmp_name"];
var $basefile=basename($_FILES['file']['name']);
// save the user's file
move_uploaded_file( $tempfile, $uploadDirectory . $basefile );
// do whatever other postback stuff you need to do
?>
HTML 表单会是这样的：
<form action="upload.php" enctype="multipart/form-data" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
<input type="file" name="file"/>
<input type="submit" name="submit" value="upload" />
</form>