सीमा-त्रिज्या + अतिप्रवाह को हल करना: कैनवास के साथ छिपी हुई समस्या

मेरे पास निम्नलिखित कार्य थे:



एक पृष्ठभूमि के साथ एक ब्लॉक होता है (जरूरी नहीं कि सजातीय), इसमें एक निश्चित संख्या में एक सफेद पृष्ठभूमि के साथ गोल तत्व होते हैं, जिसके अंदर किसी भी आकार के गोल चित्र रखे जाते हैं। यदि छवि का आकार ब्लॉक आकार से छोटा है, तो यह केंद्रित है (दोनों लंबवत और क्षैतिज रूप से), यदि छवि का आकार ब्लॉक आकार से बड़ा है, तो बड़ा छवि पैरामीटर ब्लॉक पैरामीटर के 100% पर कब्जा कर लेता है, और दूसरा पैरामीटर एक आनुपातिक अनुपात को बनाए रखता है, जैसा कि मूल छवि में है।

यह कई लोगों के लिए एक रहस्य नहीं है कि यदि आप स्वयं चित्र को गोल करते हैं, तो यह खूबसूरती से बाहर निकल जाएगा, केवल उस चित्र के साथ जिसका पहलू अनुपात 1: 1 है, अन्य मामलों में समस्याएँ होंगी:



मानक सीएसएस गुणों का उपयोग करना (सीमा-त्रिज्या: 150px; अतिप्रवाह: छिपा हुआ;), जैसा कि एक तस्वीर के साथ ब्लॉक पर लागू होता है, कई लिंक ब्राउज़रों में काम नहीं करता है (जब तक कि लेख बाहर नहीं आया - पुराना) ।



आप समस्या के कई अलग-अलग समाधान पा सकते हैं, लेकिन उनमें से एक भी मेरे अनुकूल नहीं है।

मैं निम्नलिखित समाधान प्रस्तावित करता हूं (यह सार्वभौमिक नहीं है, इसमें IE7, IE8 में काम नहीं करता है ) लेकिन मुझे यह उपयोगी लगता है और यह उन सभी ब्राउज़रों में काम करता है जो कैनवास का समर्थन करते हैं।

jsfiddle.net/iLight/EsFTG/23

चित्रों को लंबवत केन्द्रित करें:

$('.i-img-cont').each(function(){ $(this).find('img').css('margin-top', parseInt(-$(this).find('img').height()/2)); }); 

चित्र को कैनवास से बदलें

 var i=0, mywidth, myheight; $('.i-img-cont').each(function(){ var contWidth = $(this).width(), contHeight = $(this).height(), //      cnv = document.createElement("canvas"); //  cnv.width=contWidth; cnv.height=contHeight; //          $(this).prepend(cnv); //    ,       i++; var j=i-1; $(this).find('canvas').attr('id', 'canvas'+j); //   id var ctx = document.getElementById('canvas'+j).getContext('2d'), //  img = new Image(), //    attrsrc=$(this).find('img').attr('src'); //    img.src = attrsrc; //       img.onload = function(){ mywidth = $('#canvas'+j).next('img').width(); myheight = $('#canvas'+j).next('img').height(); //      var xpos = (contWidth-mywidth)/2, ypos = (contHeight-myheight)/2; //     ctx.drawImage(img, xpos, ypos, mywidth, myheight); //    } }); 

फिर बस कैनवास को गोल करें:

 .i-img-cont canvas{border-radius:150px;} 

आप उन ब्राउज़रों को भी निर्दिष्ट कर सकते हैं जिनमें आपको एक कैनवास बनाने की आवश्यकता नहीं है (जैसे एफएफ, IE9-10, क्रोम)। या वे जिनमें यह आवश्यक है ताकि स्मार्ट ब्राउज़र के लिए बहुत अधिक काम न करें।

PS Excanvas मदद नहीं करता है, अगर IE7-8 के लिए समाधान हैं, तो फ़ोटोशॉप में कोनों को छोड़कर, मैं आभारी रहूंगा।