मुझे बहुत परेशानी हो रही थीवर्डप्रेस में 100% काम करने के लिए इस एप्लिकेशन की कार्यक्षमता। मेरे पास Wordpress के बाहर सर्वर पर एप्लिकेशन का एक कार्यशील संस्करण है, हालांकि जब Wordpress में चीजें शामिल हो जाती हैं तो यह मजेदार हो जाता है।
समस्या जो अभी मैं कर रहा हूं वह प्रक्रिया के दूसरे चरण पर है, जब उपयोगकर्ता qr कोड के केंद्र में प्रदर्शित होने के लिए छवि के एक हिस्से को काट सकता है। यहाँ आप कामकाजी उदाहरण देख सकते हैं और क्या होना चाहिए, और यहाँ आप देख सकते हैं कि यह दूसरे चरण पर कहां टूटता है। मुझे लगता है कि वर्डप्रेस विषय में कहीं न कहीं सीएसएस संघर्ष है, क्योंकि jQuery ठीक काम कर रहा है। काम के उदाहरण पर, मार्जिन और ऊंचाई / चौड़ाई को फसली चयन के साथ मक्खी पर समायोजित किया जा रहा है, लेकिन टूटे हुए उदाहरण पर ऊंचाई / चौड़ाई उत्पन्न नहीं हुई है। मैंने उन सभी CSS फाइलों को निष्क्रिय करने की कोशिश की, जो थीम पर हैं, लेकिन कोई फायदा नहीं हुआ।
यहाँ jQuery है जिसे हम अपडेट करने के लिए उपयोग कर रहे हैंदाईं ओर की छवि बाईं तरफ की छवि के रूप में क्रॉप की गई है। जिस प्लगइन का हम उपयोग कर रहे हैं वह jcrop है। मुद्दा यह है कि कामकाजी संस्करण पर, इनलाइन सीएसएस के साथ ऊंचाई और चौड़ाई को सही ढंग से अपडेट किया जाता है, लेकिन टूटे हुए संस्करण पर ये मूल्य नहीं हैं, हालांकि मार्जिन दोनों संस्करणों पर सही ढंग से काम कर रहे हैं।
//function to update preview divs
jQuery(function($){
var jcrop_api, boundx, boundy; //set jcrop variables
function updatePreview(c)
{
if (parseInt(c.w) > 0)
{
var rx = 73 / c.w;
var ry = 73 / c.h;
jQuery("#preview").css({
width: Math.round(rx * boundx) + "px !important",
height: Math.round(ry * boundy) + "px !important",
marginLeft: "-" + Math.round(rx * c.x) + "px !important",
marginTop: "-" + Math.round(ry * c.y) + "px !important"
});
}
};
//function to update coordinates
function updateCoords(c)
{
jQuery("#x").val(c.x);
jQuery("#y").val(c.y);
jQuery("#w").val(c.w);
jQuery("#h").val(c.h);
};
jQuery(window).load(function () {
var PathToFile = jQuery("#cropImageDisplay").attr("name");
jQuery("#cropImageDisplay").load("/wp-content/themes/howfarqr/resources/php/uploadedImage.php?fn="+PathToFile).hide().fadeIn("slow", function() {
jQuery("#cropbox").Jcrop({ //jcrop selector
onChange: updatePreview, //function to execute onChange
onSelect: updateCoords, //function to execute onSelect
aspectRatio: 1 //asepct ratio
},function(){ //callback function
var bounds = this.getBounds(); // get the real image size
boundx = bounds[0]; //assign x
boundy = bounds[1]; //assign y
//store jcrop api as jcrop variable
jcrop_api = this;
});
});
});
});
उत्तर:
जवाब के लिए 2 № 1समस्या इस तथ्य से संबंधित है कि boundx तथा boundy परिभाषित नहीं हैं। उस वस्तु को देखते हुए जो पास हुई .css() (ब्रेकपॉइंट का उपयोग करके):
> console.log({
width: Math.round(rx * boundx) + "px",
height: Math.round(ry * boundy) + "px",
marginLeft: "-" + Math.round(rx * c.x) + "px",
marginTop: "-" + Math.round(ry * c.y) + "px"
})
▼ Object
height: "NaNpx"
marginLeft: "-25px"
marginTop: "-9px"
width: "NaNpx"
__proto__: Object
> boundx
undefined
क्यों अब में देख रहा हूँ।
अहा:
दो पृष्ठों पर जावास्क्रिप्ट समान नहीं है!
अब यह Jcrop कॉलबैक फ़ंक्शन isn "t" जैसा लगता है। बिल्कुल निश्चित नहीं है।
दो पृष्ठ भी Jcrop के विभिन्न संस्करणों का उपयोग कर रहे हैं। कार्य कार्यान्वयन में v0.9.9 है, और काम नहीं कर रहा है का उपयोग कर रहा है क्या प्रतीत होता है 0.9.8.