दिलचस्प पोस्ट
एनएटी में दो सरणियों को मिलाकर सीएसएस डिस्प्ले: इनलाइन बनाम इनलाइन-ब्लॉक डीबग छपाई के लिए सी #define मैक्रो मार्ग और यूआरएल में एएसपी.नेट एमवीसी 5 संस्कृति टी-एसक्यूएल के साथ एक तारीख बनाएं सीएसएस का प्रयोग करते समय कैनवास फैला है, लेकिन "चौड़ाई" / "ऊंचाई" गुणों के साथ सामान्य है सीएसएस फ्लोटिंग डिवीस एट वेरिएबल हाइट्स Xcode प्रोजेक्ट और संबद्ध फ़ोल्डर का डुप्लिकेट और नाम बदलें IE7 में जावास्क्रिप्ट डीबग करना साप्ताहिक 100,000 ईमेल कैसे भेजें? सी / सी ++: फोर्स बिट फील्ड ऑर्डर और संरेखण सिस्टम अनुमतियों के साथ एंड्रॉइड एप्लिकेशन को संकलित कैसे करें jquery रोक बच्चे ट्रिगर माता पिता घटना स्विफ्ट आईएडी – ADBannerView चेतावनी और CGAffineTransformInvert के 10 से अधिक उदाहरण: एकवचन मैट्रिक्स आउटपुट जावास्क्रिप्ट एक फाइल सिस्टम तक पहुंच सकता है?

कैसे कैनवास में छवि जोड़ने के लिए

मैं HTML में नए कैनवास तत्व के साथ थोड़ा सा प्रयोग कर रहा हूं।

मैं बस कैनवास में एक छवि जोड़ना चाहता हूं लेकिन यह किसी कारण के लिए काम नहीं करता है

मेरे पास निम्न कोड है:

एचटीएमएल

<canvas id="viewport"></canvas> 

सीएसएस

 canvas#viewport { border: 1px solid white; width: 900px; } 

जे एस

 var canvas = document.getElementById('viewport'), context = canvas.getContext('2d'); make_base(); function make_base() { base_image = new Image(); base_image.src = 'img/base.png'; context.drawImage(base_image, 100, 100); } 

छवि मौजूद है और मुझे कोई जावास्क्रिप्ट त्रुटियां नहीं मिलतीं छवि केवल प्रदर्शित नहीं होती है

यह वास्तव में कुछ आसान होना चाहिए I miss …

वेब के समाधान से एकत्रित समाधान "कैसे कैनवास में छवि जोड़ने के लिए"

शायद आपको इसे खींचने से पहले छवि लोड होने तक प्रतीक्षा करनी चाहिए। इसकी बजाय इसे आज़माएं:

 var canvas = document.getElementById('viewport'), context = canvas.getContext('2d'); make_base(); function make_base() { base_image = new Image(); base_image.src = 'img/base.png'; base_image.onload = function(){ context.drawImage(base_image, 100, 100); } } 

Ie छवि की ओलोड कॉलबैक में छवि खींचें।

यह देखें .. आशा है कि यह आपकी मदद करेगा ..

 var erase_image = new Image(); erase_image.src = '../images/erazer.gif'; erase_image.onload = function() { context.drawImage(erase_image, 78, 19); } 

मेरे मामले में, मैं फ़ंक्शन मापदंडों को गलत कर रहा था, जो हैं:

 context.drawImage(image, left, top); context.drawImage(image, left, top, width, height); 

यदि आप उन्हें उम्मीद करते हैं तो

 context.drawImage(image, width, height); 

आप प्रश्न में बताए अनुसार उसी प्रभाव से कैनवास के बाहर छवि को स्थान देंगे।

यहाँ कैनवास पर छवि खींचने के लिए नमूना कोड है-

 $("#selectedImage").change(function(e) { var URL = window.URL; var url = URL.createObjectURL(e.target.files[0]); img.src = url; img.onload = function() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, 500, 500); }}); 

उपरोक्त कोड में चयनित इमेज एक इनपुट नियंत्रण है जिसका इस्तेमाल सिस्टम पर छवि ब्राउज़ करने के लिए किया जा सकता है। पहलू अनुपात बनाए रखते हुए कैनवास पर छवि खींचने के लिए नमूना कोड के अधिक विवरण के लिए:

http://newapputil.blogspot.in/2016/09/show-image-on-canvas-html5.html