如何使用按钮将图像上传到画布

时间:2013-11-22 02:15:59

标签: javascript html5 css3 canvas

我的学习有问题。我想制作一个定制的衬衫网站。我有一个初学者代码,如下所示

如果您知道如何将带按钮的图像上传到衬衫帆布并用按钮更改衬衫颜色,请教我,谢谢之前并抱歉我的英文不好^^

<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>

1 个答案:

答案 0 :(得分: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"; 
?>