將圖像添加到HTML5畫布上的文件上傳問題

Question

好吧，這將很難解釋，但我會盡可能清楚地解釋我的問題。

我目前有一個HTML5帆布與幾個預加載的形狀，我更改爲圖像。我正在使用this example的修改版本。在畫布上，我現在可以拖放，選擇預加載的形狀。

我已經實現了使用這種上傳到畫布的新圖像的選項：

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

function handleImage(e){ 
    var reader = new FileReader(); 
    reader.onload = function(event){ 
     var imgNew = new Image(); 
     imgNew.onload = function(){ 
      ctx.drawImage(imgNew, 0, 0); 

     } 
     imgNew.src = event.target.result; 
    } 
    reader.readAsDataURL(e.target.files[0]);  
} 

這現在只是把圖像中的畫布的左上角，當我選擇其他形狀。這圖像將消失。所有已經在畫布中的形狀都在一個名爲'shapes'的數組中。在這個例子中有加，當你dubbelclick在畫布上一個新的形狀的選擇，這是代碼：

// double click for making new shapes 
    canvas.addEventListener('dblclick', function(e) { 
    var mouse = myState.getMouse(e); 
    myState.addShape(new Shape(mouse.x - 10, mouse.y - 10, 20, 20, 'rgba(0,255,0,.6)')); 
    }, true); 

這是addShape一部分被調用時雙擊：

CanvasState.prototype.addShape = function(shape) { 
    this.shapes.push(shape); 
    this.valid = false; 
} 

我想要做的是當我上傳一個使用文件上傳的圖像時，應該將圖像添加到「形狀」數組中，這樣我也可以拖放，選擇上傳的圖像。 （基本上我需要對上傳的圖像做同樣的事情，因爲我可以使用預加載的圖像）我的猜測是它應該像doubleclick方法和addShape這樣做，但我無法實現這個工作。

的工作我的當前版本的版本可以在這裏找到：
http://codepen.io/anon/pen/qLuCy/

如果有人知道我怎麼能得到這個工作，這將是巨大的！

Answer 1

第一結果，這裏：http://codepen.io/anon/pen/qBmnC/

你的形狀對象只能繪製一個單個硬編碼圖像，所以改變這一點，具有形狀是任一種顏色或圖像。實際上，對於這個，你只需要改變shape.draw，因爲填充的「類型」在構造函數中並不重要。 所以只是測試的填充和相應得出：

// Tekent de Shape 
Shape.prototype.draw = function(ctx) { 
     var locx = this.x; 
     var locy = this.y; 
     var fill = this.fill ; 
     if (typeof fill == 'string') 
     { 
      ctx.fillStyle = fill; 
      ctx.fillRect(locx, locy, this.w, this.h); 
     } 
     else 
     { 
      ctx.drawImage(fill, locx, locy, this.w, this.h); 
     } 
} 

然後在圖像加載我只想補充一點，有這個圖像填充的形狀：

function handleImage(e){ 
    var reader = new FileReader(); 
    reader.onload = function(event){ 
     var imgNew = new Image(); 
     imgNew.onload = function(){ 
s.addShape(new Shape(60,60,imgNew.width,imgNew.height,imgNew)); 
     } 
     imgNew.src = event.target.result; 
    } 
    reader.readAsDataURL(e.target.files[0]);  
} 

我不得不把形狀採集，s，作爲一個全球變種。 你也可以看到，我在init（）中使用了相同的方案，到 添加一個圖像，一旦它被加載。