यह कोड है और यह केवल कैनवास/आईएमजी पर क्लिक करके काम करता है। ऑनब्लर पर क्लिक या उपयोग किए बिना इसे केवल अपडेट कैसे करें? शायद एक xmlhttprequest की तरह कुछ लेकिन मैंने कोशिश की और यह काम नहीं करेगा। इसने त्रुटियां दीं और मैं भी एक नोब हूं और यह नहीं जानता कि दिखाई देने वाली त्रुटियों को कैसे ठीक किया जाए

window.onload = function () {

          var context = document.getElementById('img').getContext('2d');

          var base_image = document.querySelector('.fj');
          var canvas = document.querySelector('.canvas');
          var h2 = document.getElementById('demo');
          var brightVal = document.getElementById('b');
          context.drawImage(base_image, 0, 0, base_image.width, base_image.height, 0, 0, canvas.width, canvas.height);
      
          document.getElementById('bri').onblur = function () {
            var amount = this.value + '%';
            brightVal.innerHTML = amount;
    
            var img = document.getElementById('img');
    
            img.setAttribute('style', 'filter:brightness(' + amount +  ');');

          }
        }
<canvas id="img" class="canvas">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Cheadle_Hulme_Arches.jpg/324px-Cheadle_Hulme_Arches.jpg" class="fj">
</canvas>
<input type="range" min="-300" max="500" value="100" class="slider" id="bri">
<h2 id="demo">Value: <span id="b">0</span></h2>
0
help 5 फरवरी 2021, 19:24

3 जवाब

सबसे बढ़िया उत्तर

आप oninput का भी उपयोग कर सकते हैं, इसलिए यह गतिशील रूप से अपडेट होता है

window.onload = function () {

          var context = document.getElementById('img').getContext('2d');

          var base_image = document.querySelector('.fj');
          var canvas = document.querySelector('.canvas');
          var h2 = document.getElementById('demo');
          var brightVal = document.getElementById('b');
          context.drawImage(base_image, 0, 0, base_image.width, base_image.height, 0, 0, canvas.width, canvas.height);
      
          document.getElementById('bri').oninput = function () {
            var amount = this.value + '%';
            brightVal.innerHTML = amount;
    
            var img = document.getElementById('img');
    
            img.setAttribute('style', 'filter:brightness(' + amount +  ');');

          }
        }
<canvas id="img" class="canvas">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Cheadle_Hulme_Arches.jpg/324px-Cheadle_Hulme_Arches.jpg" class="fj">
</canvas>
<input type="range" min="-300" max="500" value="100" class="slider" id="bri">
<h2 id="demo">Value: <span id="b">0</span></h2>
0
Harry Tom 5 फरवरी 2021, 19:55

के बजाय का उपयोग करने का

document.getElementById('bri').onblur = function ()

उपयोग

document.getElementById('bri').onchange = function () 

यह काम करेगा

window.onload = function () {

          var context = document.getElementById('img').getContext('2d');

          var base_image = document.querySelector('.fj');
          var canvas = document.querySelector('.canvas');
          var h2 = document.getElementById('demo');
          var brightVal = document.getElementById('b');
          context.drawImage(base_image, 0, 0, base_image.width, base_image.height, 0, 0, canvas.width, canvas.height);
      
          document.getElementById('bri').onchange = function () {
            var amount = this.value + '%';
            brightVal.innerHTML = amount;
    
            var img = document.getElementById('img');
    
            img.setAttribute('style', 'filter:brightness(' + amount +  ');');

          }
        }
<canvas id="img" class="canvas">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Cheadle_Hulme_Arches.jpg/324px-Cheadle_Hulme_Arches.jpg" class="fj">
</canvas>
<input type="range" min="-300" max="500" value="100" class="slider" id="bri">
<h2 id="demo">Value: <span id="b">0</span></h2>
1
Nour-Allah Hussein 5 फरवरी 2021, 19:51

ठीक है "ऑनब्लर" का उपयोग करने के बजाय आप "ऑनचेंज" का उपयोग कर सकते हैं, अगर मैं समझ गया कि आप क्या चाहते हैं।

document.getElementById('bri').onchange = function () { //... }
0
xnths 5 फरवरी 2021, 19:56