एचटीएमएल 5 कैनवास

Question

में छवि अपलोड करने के लिए कैसे मैं वर्तमान में एक HTML5 कैनवास ड्राइंग ऐप बनाने के लिए http://paperjs.org का उपयोग कर रहा हूं। मैं उपयोगकर्ताओं को कैनवास में छवियों को अपलोड करने देना चाहता हूं। मुझे पता है कि मुझे लॉगिन और साइनअप करने की ज़रूरत है, लेकिन क्या कोई आसान तरीका है? मैंने एचटीएमएल 5 ड्रैग और ड्रॉप अपलोड देखा है।

Answer 1

मुझे लगता है कि आप कैनवास में एक छवि लोड करने और कैनवास से छवि अपलोड नहीं करने का मतलब मानते हैं।

यह शायद एक अच्छा विचार सभी कैनवास लेख वे के माध्यम से पढ़ने के लिए होगा यहाँ https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

से अधिक लेकिन मूल रूप से क्या आप क्या करना चाहते जावास्क्रिप्ट में एक छवि बनाते हैं, और image.src सेट किया गया है = फ़ाइल स्थान जो कुछ भी है। उपयोगकर्ता के अंत में छवियों को लोड करने के मामले में, आप फ़ाइल सिस्टम एपीआई का उपयोग करना चाहते हैं।

एक साथ एक संक्षिप्त उदाहरण यहां फेंक दिया: http://jsfiddle.net/influenztial/qy7h5/

function handleImage(e){ 
    var reader = new FileReader(); 
    reader.onload = function(event){ 
     var img = new Image(); 
     img.onload = function(){ 
      canvas.width = img.width; 
      canvas.height = img.height; 
      ctx.drawImage(img,0,0); 
     } 
     img.src = event.target.result; 
    } 
    reader.readAsDataURL(e.target.files[0]);  
} 

Answer 2

<script> 
window.onload = function() { 
var canvas=document.getElementById(“drawing”); // grabs the canvas element 
var context=canvas.getContext(“2d”); // returns the 2d context object 
var img=new Image() //creates a variable for a new image 

img.src= “images/vft.jpg” // specifies the location of the image 
context.drawImage(img,20,20); // draws the image at the specified x and y location 
} 
</script> 

चेक Demo