Databases
StackOverflow2013
Postsdbo
POupload a new image in canvas without eliminating existing image
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POupload a new image in canvas without eliminating existing image
    primarykey
    data
    text
    <p>I'm trying to create a web design custom made dress. I made ​​it with easel.js. I have a problem when I upload images into the clothes that are on the canvas when the initial functions, image shirt has disappeared ("upload / men_shirt_front.png").</p> <pre><code>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"; } </code></pre> <p>I know that the real problem is in</p> <pre><code>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; } </code></pre> <p>I have tried many many ways to change it but I can not. how to upload a new image in canvas without eliminating existing image in initial function? below is the full code</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;Upload and display images on HTML5 Canvas&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"&gt; &lt;script src="easeljs-0.5.0.min.js"&gt;&lt;/script&gt; &lt;script src="jquery-1.8.2.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="libs/upclick-min.js"&gt;&lt;/script&gt; &lt;script src="libs/export_canvas/base64.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="libs/export_canvas/canvas2image.js" type="text/javascript"&gt;&lt;/script&gt; &lt;/head&gt; &lt;script type="text/javascript"&gt; /** 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 &lt;img&gt; 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 ); } &lt;/script&gt; &lt;body onload="init()"&gt; &lt;div style="position: relative" &gt; &lt;input type="button" value="View screenshot in a new page" onClick="exportAndView()" &gt; &lt;input type="button" value="Export and Upload Screenshot" onClick="exportAndSaveCanvas()" &gt; &lt;input id="uploader" type="button" value="Upload picture from hard disk"&gt; &lt;/div&gt; &lt;canvas width="1000" height="550" id="canvas"&gt;&lt;/canvas&gt; &lt;script type="text/javascript"&gt; 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(); } } } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>It's upload script 'upload/upload.php'</p> <pre><code>&lt;?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"; ?&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMeu
    1. USMeu
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POupload a new image in canvas without eliminating existing image
      1. USMeu
      1. VTFavorite
    1. COany particular reason you are mixing EaselJS Bitmaps/Stage with a context.drawImage() call? The drawImage will just be drawn once to the canvas, so any stage updates will clear the canvas before drawing EaselJS children. If you use another Bitmap instance with the stage, both images will be retained, since EaselJS will know how to redraw it.
      singulars
      1. POupload a new image in canvas without eliminating existing image
      1. USLanny
    2. CObecause I am just a beginner learners who seek any way html5 on google just to make a custom made shirt website. so if you give me a clue how or I will try it with pleasure :) so the point I'm swallowing a variety of ways from a variety of sources to make it real
      singulars
      1. POupload a new image in canvas without eliminating existing image
      1. USMeu
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload