javascript - 在文件上传问题上将图像添加到 HTML5 Canvas

Question

好吧，这很难解释，但我会尽可能清楚地解释我的问题。

我目前有一个 HTML5 Canvas，其中包含几个我已更改为图像的预加载形状。我正在使用 this example 的修改版本.在我现在拥有的 Canvas 上，我可以拖放和选择预加载的形状。

我已经实现了一个选项，可以使用此选项将新图像上传到 Canvas :

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]);     
}

现在这只会在 Canvas 的左上角放置一个图像，当我选择另一个形状时，该图像就会消失。 Canvas 中已有的所有形状都在一个名为“shapes”的数组中。在这个例子中，有一个选项可以在你双击 Canvas 时添加一个新的形状，这是代码:

 // 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() 中使用了相同的方案来 加载图像后添加图像。