छवि पर ओवरले एचटीएमएल 5 कैनवास

Question

मैं एक छवि चाहता हूं जो मेरे डेटाबेस से अपलोड की गई हो और इसके शीर्ष पर एक ही स्थिति में सटीक आकार एक HTML5 कैनवास है।

अधिकांश समाधान जो मैंने पाया है, मैं JQuery/जावास्क्रिप्ट का उपयोग कर रहा हूं, हालांकि यदि संभव हो तो मैं CSS3 का उपयोग कर एक समान समाधान चाहता हूं क्योंकि छवियों को डेटाबेस से आउटपुट किया जा रहा है और पृष्ठ पर एक से अधिक छवियां हो सकती हैं और प्रत्येक छवि में एक कैनवास होगा।

मैं इसे कैसे प्राप्त कर सकता हूं?

Answer 1

हां।

आप इसे पूरी तरह से सीएसएस में कर सकते हैं, लेकिन आपको प्रत्येक छवि के लिए कुछ विशिष्ट HTML नलसाजी जोड़नी होगी।

यदि आप कभी भी अतिरिक्त नलसाजी से थक जाते हैं, तो जावास्क्रिप्ट आपके लिए अधिकांश नलसाजी कर सकता है।

http://jsfiddle.net/m1erickson/g3sTL/

एचटीएमएल:

<div class="outsideWrapper"> 
    <div class="insideWrapper"> 
     <img src="house-icon.jpg" class="coveredImage"> 
     <canvas class="coveringCanvas"></canvas> 
    </div> 
</div> 

बेशक

, अपने संस्करण में, आप छवि src आपके गतिशील के साथ की जगह लेंगे

यहाँ सीएसएस-केवल संस्करण की एक फिडल है छवि लाने के लिए डेटाबेस कॉल।

सीएसएस:

.outsideWrapper{ 
    width:256px; height:256px; 
    margin:20px 60px; 
    border:1px solid blue;} 
.insideWrapper{ 
    width:100%; height:100%; 
    position:relative;} 
.coveredImage{ 
    width:100%; height:100%; 
    position:absolute; top:0px; left:0px; 
} 
.coveringCanvas{ 
    width:100%; height:100%; 
    position:absolute; top:0px; left:0px; 
    background-color: rgba(255,0,0,.1); 
} 

Answer 2

Possible duplicate।

डेटाबेस में कितनी छवियां हैं, इस पर निर्भर करता है कि आप छवि फ़ाइल के नाम के साथ प्रत्येक के लिए एक अलग कैनवास आईडी (उदा। canvas #foo { background:url(foo.jpg) }) हो सकते हैं। मैं इसे एक अलग स्टाइलशीट में लोड करूंगा। :)

शायद जावास्क्रिप्ट समाधान को बनाए रखना आसान होगा हालांकि आपका डेटाबेस गतिशील है। नए नामों के साथ स्टाइलशीट को लगातार अद्यतन करने के बजाय जावास्क्रिप्ट की कुछ पंक्तियां पर्याप्त होंगी। कम त्रुटि टाइपो प्रवण भी।