फ़्लिकर रीफ्रेश किए बिना ब्राउज़र में लगातार बदलती छवि फ़ाइल को कैसे प्रदर्शित करें?

मैं एचटीएमएल का उपयोग कर ब्राउज़र पर एक छवि (एक फाइल से) प्रदर्शित कर रहा हूं ... मेरे पास एक और प्रोग्राम है जो मेरी स्क्रीन का स्क्रीनशॉट ले रहा है और इसे "image.jpeg" छवि फ़ाइल के रूप में संग्रहीत करता है। मैं इस छवि को समय-समय पर सेटटाइमआउट का उपयोग कर ब्राउज़र पर प्रदर्शित कर रहा हूं। हालांकि ब्राउज़र पर छवि नहीं बदली जा रही है ..फ़्लिकर रीफ्रेश किए बिना ब्राउज़र में लगातार बदलती छवि फ़ाइल को कैसे प्रदर्शित करें?

यहां मेरा कोड है ... मैंने एक छवि ऑब्जेक्ट का उपयोग किया है ताकि हर बार जावास्क्रिप्ट फ़ंक्शन चलने पर एक नई छवि लोड हो, हालांकि ऐसा लगता है कि यह काम नहीं कर रहा है। ..

<html> 

<head> 

<script type="text/JavaScript"> 

var x=0, y=0; 
var canvas, context, img; 

function timedRefresh(timeoutPeriod) 
{ 
    canvas = document.getElementById("x"); 
    context = canvas.getContext("2d"); 
    img = new Image(); 
    img.src = "image.jpeg"; 
    context.drawImage(img, x, y); 
    x+=20; y+=20; 
    //img.destroy(); 
    setTimeout("timedRefresh(1000)",timeoutPeriod); 
} 

</script> 

<title>JavaScript Refresh Example</title> 

</head> 

<body onload="JavaScript:timedRefresh(1000);"> 

<canvas id="x" width="600" height="600" /> 

</body> 
</html>

स्रोत

2011-03-25 Craig

सबसे पहले, जब आप अपनी छवि वस्तु का src विशेषता निर्धारित, छवि अभी तक लोड नहीं की गई है, तो आप जब छवि के onload निकाल दिया जाता है (जब छवि से किया जाता है अपने कैनवास ताज़ा करने की आवश्यकता लोड हो रहा है)।

दूसरा, ब्राउज़र कैश्ड छवि image.jpeg का उपयोग करने का प्रयास करता है। इससे बचने के लिए, छवि यूआरआई में एक फर्जी तर्क जोड़ें।

उदाहरण के लिए:

var timeoutPeriod = 1000; 
var imageURI = 'image.jpeg'; 
var x=0, y=0; 
var img = new Image(); 
img.onload = function() { 
    var canvas = document.getElementById("x"); 
    var context = canvas.getContext("2d"); 

    context.drawImage(img, x, y); 
    x+=20; y+=20; 
    setTimeout(timedRefresh,timeoutPeriod); 
}; 

function timedRefresh() { 
    // just change src attribute, will always trigger the onload callback 
    img.src = imageURI + '?d=' + Date.now(); 
}

और फिर यह काम करना चाहिए।

स्रोत

2011-03-25 22:11:13

धन्यवाद ... अब बहुत अच्छा काम करता है :) – Craig

कैश किए गए चित्र का उपयोग रोकने के लिए यह एक फर्जी संपत्ति का उपयोग करने का एक शानदार विचार है। –

मुझे लगता है कि आपको timedRefresh() में हर बार छवि ऑब्जेक्ट बनाने की आवश्यकता नहीं है। बस एक उदाहरण बनाएं और लगातार src विशेषता बदलें। आपके कोड स्निपेट के मामले में, img वैश्विक चर होना चाहिए।

हालांकि, मुख्य समस्या यह है कि आप अभी भी ओपेरा में झटकेदार (लेकिन विभिन्न प्रकार के) देखेंगे। देखें: Image source update in JavaScript with Opera

स्रोत

2012-07-25 07:50:44

यहां एक पूर्ण कार्य उदाहरण है। बस url और refeshInterval कॉन्फ़िगर करें। यह Yannick की कैशिंग रोकथाम का उपयोग करता है और Piotr द्वारा सुझाए गए अनुसार प्रत्येक रीलोड पर img ऑब्जेक्ट को फिर से नहीं बनाता है।

<html> 
<head> 
<script type="text/JavaScript"> 
var url = "cam1.php"; //url to load image from 
var refreshInterval = 1000; //in ms 
var drawDate = true; //draw date string 
var img; 

function init() { 
    var canvas = document.getElementById("canvas"); 
    var context = canvas.getContext("2d"); 
    img = new Image(); 
    img.onload = function() { 
     canvas.setAttribute("width", img.width) 
     canvas.setAttribute("height", img.height) 
     context.drawImage(this, 0, 0); 
     if(drawDate) { 
      var now = new Date(); 
      var text = now.toLocaleDateString() + " " + now.toLocaleTimeString(); 
      var maxWidth = 100; 
      var x = img.width-10-maxWidth; 
      var y = img.height-10; 
      context.strokeStyle = 'black'; 
      context.lineWidth = 2; 
      context.strokeText(text, x, y, maxWidth); 
      context.fillStyle = 'white'; 
      context.fillText(text, x, y, maxWidth); 
     } 
    }; 
    refresh(); 
} 
function refresh() 
{ 
    img.src = url + "?t=" + new Date().getTime(); 
    setTimeout("refresh()",refreshInterval); 
} 

</script> 
<title>JavaScript Refresh Example</title> 
</head> 

<body onload="JavaScript:init();"> 
<canvas id="canvas"/> 
</body> 
</html>

स्रोत

2015-05-13 08:42:46

कैनवास तत्व का उपयोग वास्तव में झिलमिलाहट पर वापस कटौती! – alfadog67

फ़्लिकर रीफ्रेश किए बिना ब्राउज़र में लगातार बदलती छवि फ़ाइल को कैसे प्रदर्शित करें?

उत्तर

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