我正在尝试创建一个定制的网页设计服饰。我用easel.js制作了它。当初始功能，图像衬衫消失时，我将图像上传到画布上的衣服时出现问题（“upload / men_shirt_front.png”）。
function init() {
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
var ctx = canvas.getContext("2d");
// Enable touch support
if (createjs.Touch.isSupported()) { createjs.Touch.enable(stage); }
// create amd draw the branding image for the qr-code
var Shirt = new Image();
Shirt.addEventListener('load', function () {
ctx.drawImage(this, 10, 10, 275, 275);
},false);
Shirt.src = "upload/men_shirt_front.png";
}
我知道真正的问题在于
displayPicture = function (imgPath) {
var image = new Image();
image.onload = function () {
// Create a Bitmap from the loaded image
var img = new createjs.Bitmap(event.target)
// scale it
img.scaleX = img.scaleY = 0.5;
/// Add to display list
stage.addChild(img);
//Enable Drag'n'Drop
enableDrag(img);
// Render Stage
stage.update();
}
// Load the image
image.src = imgPath;
}
我尝试了很多方法来改变它，但我做不到。如何在画布中上传新图像而不删除初始函数中的现有图像？ 下面是完整的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Upload and display images on HTML5 Canvas</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<script src="easeljs-0.5.0.min.js"></script>
<script src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="libs/upclick-min.js"></script>
<script src="libs/export_canvas/base64.js" type="text/javascript"></script>
<script src="libs/export_canvas/canvas2image.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
/** Init */
window.onload = init;
function init() {
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
var ctx = canvas.getContext("2d");
// Enable touch support
if (createjs.Touch.isSupported()) { createjs.Touch.enable(stage); }
// create amd draw the branding image for the qr-code
var Shirt = new Image();
Shirt.addEventListener('load', function () {
ctx.drawImage(this, 10, 10, 275, 275);
},false);
Shirt.src = "upload/men_shirt_front.png";
}
/**Export and save the canvas as PNG */
function exportAndSaveCanvas() {
// Get the canvas screenshot as PNG
var screenshot = Canvas2Image.saveAsPNG(canvas, true);
// This is a little trick to get the SRC attribute from the generated <img> screenshot
canvas.parentNode.appendChild(screenshot);
screenshot.id = "canvasimage";
data = $('#canvasimage').attr('src');
canvas.parentNode.removeChild(screenshot);
// Send the screenshot to PHP to save it on the server
var url = 'upload/export.php';
$.ajax({
type: "POST",
url: url,
dataType: 'text',
data: {
base64data : data
}
});
}
/** Export and display the canvas as PNG in a new window */
function exportAndView() {
var screenshot = Canvas2Image.saveAsPNG(canvas, true);
var win = window.open();
$(win.document.body).html(screenshot );
}
</script>
<body onload="init()">
<div style="position: relative" >
<input type="button" value="View screenshot in a new page" onClick="exportAndView()" >
<input type="button" value="Export and Upload Screenshot" onClick="exportAndSaveCanvas()" >
<input id="uploader" type="button" value="Upload picture from hard disk">
</div>
<canvas width="1000" height="550" id="canvas"></canvas>
<script type="text/javascript">
var canvas;
var stage;
var uploader = document.getElementById('uploader');
/**
* UPLOAD SCRIPT
* This script uses the upclick-min.js 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);
}
}
});
/**
* Load and display the uploaded picture on CreateJS Stage
*/
displayPicture = function (imgPath) {
var image = new Image();
image.onload = function () {
// Create a Bitmap from the loaded image
var img = new createjs.Bitmap(event.target)
// scale it
img.scaleX = img.scaleY = 0.5;
/// Add to display list
stage.addChild(img);
//Enable Drag'n'Drop
enableDrag(img);
// Render Stage
stage.update();
}
// Load the image
image.src = imgPath;
}
/**
* Enable drag'n'drop on DisplayObjects
*/
enableDrag = function (item) {
// OnPress event handler
item.onPress = function(evt) {
var offset = { x:item.x-evt.stageX,
y:item.y-evt.stageY};
// Bring to front
stage.addChild(item);
// Mouse Move event handler
evt.onMouseMove = function(ev) {
item.x = ev.stageX+offset.x;
item.y = ev.stageY+offset.y;
stage.update();
}
}
}
</script>
</body>
</html>
上传脚本'upload / upload.php'
<?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";
?>