2013-08-02 10 views
6

मैं, आकार बदलने में एक HTML5 कैनवास फैलाने के लिए चाहते हैं किसी न किसी प्रकार है कि एक आईएमजी तत्व की तरह कैनवास कार्य: है अगर सेट चौड़ाई-ऊंचाई पिक्सेल, प्रतिशत से ...Convert एचटीएमएल 5 कैनवास

मुझे आश्चर्य है कि वहाँ एक आईएमजी तत्व में एचटीएमएल 5 कैनवास को परिवर्तित/निर्यात करने का कोई तरीका, या किसी भी तरह से यह कैनवास में सीधे संभव बना सकता है।

HTML5 CANVAS resize acting like IMG

मैं गूगल पर शोध किया है, लेकिन यह इंटरनेट पर कोई भी तरह लग यह किया है से पहले, या हो सकता है मैं तो बस को समझ नहीं सकता ...

मैं KineticJS लाइब्रेरी का उपयोग कर रहा हूँ, ब्योरा हेतु।

कृपया मेरी मदद करें! आपको बहुत - बहुत धन्यवाद! और मेरी बुरी अंग्रेजी के लिए खेद है ...

उत्तर

11

सबसे पहले, अपने कैनवास को एक आईडी दें (उदा। example)। फिर, सादे जावास्क्रिप्ट का उपयोग करके आप उस कैनवास के आधार पर एक छवि बना सकते हैं और इसे स्टाइल कर सकते हैं:

var canvas = document.getElementById('example'), 
    dataUrl = canvas.toDataURL(), 
    imageFoo = document.createElement('img'); 
imageFoo.src = dataUrl; 

// Style your image here 
imageFoo.style.width = '100px'; 
imageFoo.style.height = '100px'; 

// After you are done styling it, append it to the BODY element 
document.body.appendChild(imageFoo); 
संबंधित मुद्दे