使用CamanJS過濾帆布

Question

這是我的HTML元素

<div class="wrapper"> 
    <nav class="navbar navbar-transparent"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <span class="btn btn-white btn-file"> 
       <i class="material-icons">file_upload</i> Upload your file 
       <input type="file" id="upload-image"> 
      </span> 
     </div> 
     </div> 
    </nav> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div id="image-display" class="col-md-6 col-md-offset-2"> 
       <canvas id="edit-canvas" width="400"> 
      </div> 
      <div id="toolbox" class="col-md-2"> 
       <div class="color-slider"> 
        <strong>Brightness</strong> 
        <div id="brightnessSlider" class="slider slider-info"> 
        </div> 
        <span id="brightness"></span> 
       </div> 
       <div class="color-slider"> 
        <strong>Saturation</strong> 
        <div id="saturateSlider" class="slider slider-info"> 
        </div> 
        <span id="saturate"></span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

我包括CamanJS以操縱帆布過濾效果。這是我的JavaScript代碼來上傳圖片到畫布上，調整大小和過濾它

// Upload, resize image, draw canvas 

function fileOnload(e) { 
    var img=new Image; 
    var canvas=document.getElementById('edit-canvas'); 
    var context=canvas.getContext('2d'); 
    img.onload=function(){ 
     canvas.height=canvas.width * img.height/img.width; 
     var oc = document.createElement('canvas'), octx = oc.getContext('2d'); 
     oc.width = img.width; 
     oc.height = img.height; 
     octx.drawImage(img, 0, 0); 
     while (oc.width * 0.5 > canvas.width) { 
      oc.width *= 0.5; 
      oc.height *= 0.5; 
      octx.drawImage(oc, 0, 0, oc.width, oc.height); 
     } 
     oc.width = canvas.width; 
     oc.height = oc.width * img.height/img.width; 
     context.drawImage(img, 0, 0, oc.width, oc.height); 
    }; 
    img.src=e.target.result; 
    Caman('#edit-canvas',function(){ 
     this.render(); 
    }); 
}; 

$('#upload-image').change(function(e){ 
    var file = e.target.files[0]; 
    var imageType = /image.*/; 
    if (!file.type.match(imageType)) 
     return; 
    var reader = new FileReader(); 
    reader.onload = fileOnload; 
    reader.readAsDataURL(file); 
}); 

// Brightness slider 

var brightnessSlider=document.getElementById('brightnessSlider'); 
noUiSlider.create(brightnessSlider,{ 
    start: 0, 
    step: 1, 
    connect: 'lower', 
    range: { 
     min: -100, 
     max: 100 
    }, 
    format: wNumb({ 
     decimals: 0 
    }) 
}); 
brightnessSlider.noUiSlider.on('update',function(values,handle){ 
    $('#brightness').html(values[handle]); 
    Caman('#edit-canvas',function(){ 
     this.brightness(values[handle]).render(); 
    }); 
}); 

當我滑動，我嘗試在控制檯登錄，該值是變化的，但在畫布上不採取任何影響。實際上，畫布的一部分甚至會消失。我不知道爲什麼。我是否從CamanJS的指導中做錯了什麼？

Answer 1

我已經發現我的問題。這是因爲我的異步處理很差。它應該是這樣的：

var brightnessSlider=document.getElementById('brightnessSlider'); 
noUiSlider.create(brightnessSlider,{ 
    start: 0, 
    step: 1, 
    connect: 'lower', 
    range: { 
     min: -100, 
     max: 100 
    }, 
    format: wNumb({ 
     decimals: 0 
    }) 
}); 

(function(){ 

    // Upload, resize image, draw canvas 

    function fileOnload(e) { 
     var img=new Image; 
     img.src=e.target.result; 
     var canvas=document.getElementById('edit-canvas'); 
     var context=canvas.getContext('2d'); 
     img.onload=function(){ 
      canvas.height=canvas.width * img.height/img.width; 
      var oc = document.createElement('canvas'), octx = oc.getContext('2d'); 
      oc.width = img.width; 
      oc.height = img.height; 
      octx.drawImage(img, 0, 0); 
      while (oc.width * 0.5 > canvas.width) { 
       oc.width *= 0.5; 
       oc.height *= 0.5; 
       octx.drawImage(oc, 0, 0, oc.width, oc.height); 
      } 
      oc.width = canvas.width; 
      oc.height = oc.width * img.height/img.width; 
      context.drawImage(img, 0, 0, oc.width, oc.height); 
      Caman('#edit-canvas',function(){ 
       this.render(); 
      }); 

      brightnessSlider.noUiSlider.on('change',function(values,handle){ 
       $('#brightness').html(values[handle]); 
       Caman('#edit-canvas',function(){ 
        this.revert(false); 
        this.brightness(values[handle]).render(); 
       }); 
      }); 
     }; 
    }; 

    $('#upload-image').change(function(e){ 
     var file = e.target.files[0]; 
     var imageType = /image.*/; 
     if (!file.type.match(imageType)) 
      return; 
     var reader = new FileReader(); 
     reader.onload = fileOnload; 
     reader.readAsDataURL(file); 
    }); 
})();