2013-11-22 40 views
0

我在学习中遇到问题。我想制作一个定制的衬衫网站。我有一个初学者的代码如下如何将图片上传到画布上按钮

如果你知道如何使用按钮来上传图片到衬衫帆布和改变球衣颜色与按钮太多,请教我,感谢之前和我的英语不好对不起文字^^

<html> 
<head> 
<title>HTML5 Canvas example</title> 
<script type="text/javascript"> 
    window.addEventListener('load', function() { 
    var element = document.getElementById('myCanvas'); 
    if (!element || !element.getContext) { 
     return; 
    } 

    var context = element.getContext('2d'); 
    if (!context || !context.drawImage) { 
     return; 
    } 
    context.fillStyle = '#CC5422'; // set canvas background color 
    context.fillRect (0, 0, 350, 350); // now fill the canvas 

    // create amd draw the branding image for the qr-code 
    var Shirt = new Image(); 
    Shirt.addEventListener('load', function() { 
     context.drawImage(this, 35, 25, 275, 275); 
    },false); 
    Shirt.src = "men_shirt_front.png"; 
    },false); 
</script> 
</head> 
<body> 
<div style="padding:35px;"> 
<canvas id="myCanvas" width="350" height="350"> 
    Your browser does not support HTML5 Canvas element. 
</canvas> 
</div> 
</body> 
</html> 

回答

0

希望你努力学习,你就可以开始使用下面的脚本,

上传文件使用UPLOAD-AT-CLICK

<script type="text/javascript"> 
var uploader = document.getElementById('uploader'); 
    /** 
    * UPLOAD SCRIPT 
    * This script uses the UploadAtClick library to upload files on a webserver folder 
    * using a PHP script ("upload/upload.php") 
    * Project homepage: http://code.google.com/p/upload-at-click/ 
    */ 
upclick(
{ 
element: uploader, 
action: 'upload/upload.php', 
onstart: 
function(filename) 
{ 
     //alert('Start upload: '+filename); 
}, 
oncomplete: 
function(response_data) 
{ 
     // Check upload Status 
if (response_data != "FAIL") {     
     // Draw the picture into Canvas  
     // "response_data" contains the image file name returned from the PHP script 
displayPicture("upload/" + response_data); 
} 
} 
}); 

UPLOAD PHP SCRIPT

<?php 
$tmp_file_name = $_FILES['Filedata']['tmp_name']; 
$ok = move_uploaded_file($tmp_file_name, $_FILES['Filedata']['name']); 
// This message will be passed to 'oncomplete' function 
echo $ok ? $_FILES['Filedata']['name'] : "FAIL"; 
?> 
+0

谢谢你.. – Meu

+2

随时欢迎回答其他问题。如果您对此答案满意,请通过选中答案来接受答案。谢谢。 – Vinith

+0

我找到了具体的答案,谢谢大家^^ http://www.fabiobiondi.com/blog/2012/10/upload-images-from-the-user-hard-driveto-an-html5-canvas-画架-JS-应用/ – Meu