drawImage और कैनवास

आकार परिवर्तन मैं एक छवि है जो 1836 x 3264 मैं कैनवास और प्रलेखन मुझे लगा कि यह निम्नलिखित के साथ पूरा किया जा सकता पढ़ने के बाद 739 x 1162.drawImage और कैनवास

को आकार बदलने के लिए drawImage() हैं:

ctx.drawImage(image, 0, 0, 739, 1162);

मैं भी कोशिश की है:

ctx.drawImage(image, 0, 0, 1836, 3264, 0, 0, 739, 1162);

दोनों ही पूर्ण छवि का एक छोटा सा हिस्सा बजाय इसे नीचे सिकुड़ दिखा।

मैं 1836 x 3264 -> 739 x 1162 से आकार बदलने के लिए मानों को कैसे पार करूं?

स्रोत

2013-03-03 Philip Kirkbride

यह मदद करनी चाहिए: http: // stackoverflow। कॉम/प्रश्न/23036 9 0/आकार बदलने-एक-छवि-इन-ए-एचटीएमएल 5-कैनवास – bfavaretto

जो आपने सही देखा है, तो आप कहीं भी टाइपो के लिए दोबारा जांच कर सकते हैं।

[संपादित करें: अतिरिक्त सोचा]: आपकी छवि है वास्तव में 1836x3264 और नहीं 3264x1836]

यहाँ काम कर रहा है कोड और एक फिडल:। http://jsfiddle.net/m1erickson/MLGr4/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    img=new Image(); 
    img.onload=function(){ 
     canvas.width=400; 
     canvas.height=300; 
     ctx.drawImage(img,0,0,img.width,img.height,0,0,400,300); 
    } 
    img.src="http://www.onestopwebmasters.com/wp-content/uploads/2011/06/eitai-bridge.jpg"; 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=100 height=100></canvas> 
</body> 
</html>

स्रोत

2013-03-04 02:30:02 markE

धन्यवाद कोड सही था। यह मोबाइल फोन सिस्टम कैनवास को संभालने में कैसे एक गड़बड़ था। –

@ फिलिपकिर्क्राइड क्या आप हमें बता सकते हैं कि यह मोबाइल फोन गड़बड़ क्या था और आपने इसे कैसे ठीक किया? – palsch

इस उत्तर में मुझे एहसास हुआ कि मैं 'canvas.stile.width' और' canvas.width' की बजाय 'ऊंचाई' सेट कर रहा था। बदलते हुए 'ctx.drawImage' स्केलिंग को अपेक्षित रूप से प्रस्तुत करने में मदद मिली, कैनवास के पहले आयाम गुणों के पहले यह खींचने की बजाय। – crowjonah

drawImage और कैनवास

उत्तर

संबंधित मुद्दे