एचटीएमएल 5 छवि क्रॉपिंग

Question

मैं पृष्ठ के शीर्ष पर पारदर्शी प्रभाव प्राप्त करने के लिए एक निश्चित रंग के साथ एचटीएमएल पृष्ठभूमि-छवि के पहले 1 9 2 पिक्सेल पर गुणा प्रभाव लागू करने के लिए context-blender का उपयोग कर रहा हूं।

एचटीएमएल पर मेरे पास 2 कैनवास हैं। छवि के हिस्से के लिए गुणा प्रभाव लागू करने के लिए और रंग के लिए एक।

जावास्क्रिप्ट पर, window.innerWidth करने के लिए रंग-कैनवास के रंग और दोनों कैनवास की चौड़ाई सेट करने के बाद मैं के साथ पृष्ठभूमि छवि हो रही है:

imageObj.src = $('html').css('background-image').replace(/^url|[\(\)]/g, ''); 

अब समस्या आती है। मैं इमेज-कैनवास पर छवि में एक फसल वाली छवि खींचना चाहता हूं ताकि मैं गुणा प्रभाव लागू कर सकूं। मैं निम्नलिखित करने की कोशिश कर रहा हूं:

imageObj.onload = function(){ 
    // getting the background-image height 
    var imageHeight = window.innerWidth * imageObj.height/imageObj.width; 

    // get the corresponding pixels of the source image that correspond to the first 192 pixels of the background-image 
    var croppedHeight = 192 * imageObj.height/imageHeight; 

    // draw the image to the canvas 
    imageCanvas.drawImage(imageObj, 0, 0, imageObj.width, croppedHeight, 0, 0, window.innerWidth, 192); 

    // apply the multiply effect 
    colorCanvas.blendOnto(imageCanvas, 'multiply'); 
} 

लेकिन मैं फसल की ऊंचाई प्राप्त करने में कुछ गलत कर रहा हूं।

उदाहरण के लिए: एक 1536x1152 छवि और एक 1293x679 ब्राउज़र कंटेनर के लिए, मान मैं स्रोत के लिए हो रही है क्रॉप ऊंचाई 230 है, लेकिन सही फसल मैं कुछ संपादित चारों ओर 296

उपयोग करने की आवश्यकता पाने के लिए: सीएसएस पर कवर पृष्ठभूमि छवि

EDIT2 बनाने के लिए:

मैं उपयोग कर रहा हूँ पृष्ठभूमि आकार

मैंने समस्या का वर्णन करने के लिए fiddle बनाया है। यदि आप //cHeight *= magicConstant; लाइन को असम्बद्ध करते हैं तो फसल की गई छवि बहुत अच्छी लगती है लेकिन चीजें समझने से रोकती हैं। मैंने फिडलर पर गुणा प्रभाव को हटा दिया लेकिन समस्या को पुन: पेश करने की आवश्यकता नहीं है। मैंने यह भी देखा कि अगर मैं यूआरएल से दूसरे कैनवास को हटा देता हूं तो व्यवहार बदल जाता है।

बीटीडब्ल्यू, यह व्यवहार Google क्रोम के साथ हुआ, लेकिन मुझे लगता है कि सफारी और फ़ायरफ़ॉक्स पर भी यही बात होती है।

Answer 1

ठीक है, मैंने इसे ठीक कर दिया है। आदमी इतना कठिन था! मुख्य रूप से क्योंकि आप छवि कन्ववास 'कैनवास ऊंचाई सेट करना भूल गए हैं। यह भी मदद नहीं करता है कि छवि की एक सफेद सीमा है। मैंने यह पता लगाने की कोशिश कर रहा था कि पैडिंग कहां से आ रही थी।

तो fiddle के मामले के लिए शुरू करने के लिए, समारोह doBlending() में, सेट imageCanvas.canvas.height = height;

फिर crop() में गणना 2 संभावनाओं को कवर करने की जरूरत है। क्या छवि को ऊंचाई के लिए स्केल किया गया है और बायीं ओर छिड़काव या चौड़ाई के लिए स्केल किया गया है और नीचे कटा हुआ है? मैं तुम्हारे लिए दोनों लिखने के लिए नहीं जा रहा हूँ, लेकिन यहाँ इस मामले में जहां यह ऊंचाई के लिए माप लिया जाता है के लिए एक है:

function crop(imageObj, imageCanvas, colorCanvas) { 
    // Assumes bg image is scaled for hight 
    var scale = imageObj.height/window.innerHeight; 
    var targetHeight = imageCanvas.canvas.height; 
    var targetWidth = window.innerWidth; 

    imageCanvas.drawImage(imageObj, 
          0, 0, targetWidth * scale, targetHeight * scale, 
          0, 0, targetWidth, targetHeight); 
} 

मैं वास्तव में पता नहीं है जहां आप अपने उदाहरण में स्केलिंग कारकों के साथ आया है।कुछ पैमाने के कारक द्वारा एक्स और वाई आयामों को गुणा करके छवि को स्केल किया जा रहा है। इस तरह आप पहलू अनुपात को संरक्षित करते हैं। छवि की ऊंचाई खिड़की की ऊंचाई से मेल खाने के लिए स्केल फैक्टर एक बड़ा होगा और छवि की चौड़ाई खिड़की की चौड़ाई से मेल खाने वाला एक होगा।

Answer 2

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