試圖畫一個圖像到畫布上，然後使用Caman.js來操縱這個圖像

Question

到目前爲止，我有this piece of code;

var imageLoader = document.getElementById('imageLoader'); 
     imageLoader.addEventListener('change', handleImage, false); 
    var canvas = document.getElementById('imageCanvas'); 
    var ctx = canvas.getContext('2d'); 

    function handleImage(e){ 
     var reader = new FileReader(); 
     reader.onload = function(event){ 
      var img = new Image(); 
      img.onload = function(){ 
       canvas.width = img.width; 
       canvas.height = img.height; 
       ctx.drawImage(img,0,0); 
      } 
      img.src = event.target.result; 
     } 
     reader.readAsDataURL(e.target.files[0]);  
    } 

將圖像繪製在畫布上，然後我有this code

  %img#example{"data-caman-hidpi" => "images/example1_1200.jpg", src: "images/example1_600.jpg"}/ 

它操作存儲在圖像的圖像/但作爲新畫布，沒有太大的JavaScript的知識，我不確定如何合併這兩段代碼，以便它們一起工作。我希望能夠從我的電腦中選擇一幅圖像，並將其繪製到畫布上，然後可以使用Caman.js來操作該圖像。任何幫助將非常感激。

Answer 1

我認爲將圖像加載到<img>元素會更容易，然後調用CamanJS的構造函數。這將與<canvas>元素

HTML更換<img>元素

<img src="something" id="imagesrc"> 

的Javascript

Caman('#imagesrc', function(){ 
    //manipulate image 
}); 

如果你想使用一個Canvas對象直接像你做了什麼，你使用相同的Javascript代碼，但使用你的畫布對象。 Caman將操縱相同的畫布對象。

Caman('#imageCanvas',function(){ 
    //manipulate image 
}); 

此處瞭解詳情：http://camanjs.com/guides/#BasicUsage