你可以从信道上提取两幅图像,并将图像与你喜欢的任何超时模式结合起来。 从你可以到DataURL。 仅指出,这两种图像都应来自与网页相同的领域,否则,由于安全原因,你无法获得六氯苯数据。

You could use drawImage. Demo. Code:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var img1 = loadImage( http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png , main);
var img2 = loadImage( http://introcs.cs.princeton.edu/java/31datatype/peppers.jpg , main);

var imagesLoaded = 0;
function main() {
    imagesLoaded += 1;

    if(imagesLoaded == 2) {
        // composite now
        ctx.drawImage(img1, 0, 0);
        
        ctx.globalAlpha = 0.5;
        ctx.drawImage(img2, 0, 0);
    }
}

function loadImage(src, onload) {
    // http://www.thefutureoftheweb.com/blog/image-onload-isnt-being-called
    var img = new Image();
    
    img.onload = onload;
    img.src = src;

    return img;
}

适应需要:

You can find the solution here. Maybe it will help you.

超文本代码:

<div id="container">
    <input type="file" id="imageLoader" name="imageLoader" />
    <input type="file" id="iimageLoader" name="imageLoader" />
    <canvas id="imageCanvas" width="300" height="300"></canvas> 
    <a id="lnkDownload" href="#">Save image</a>
</div>

JS Code:

var canvas = new fabric.Canvas( imageCanvas , {
  backgroundColor:  rgb(240,240,240) 
});
canvas.setWidth(300);
canvas.setHeight(300);

var imageLoader = document.getElementById( imageLoader );
imageLoader.addEventListener( change , handleImage, false);

function handleImage(e) {
  var objects = canvas.getObjects();
  for (var i in objects) {
    objects[i].remove();
  }
  var reader = new FileReader();
  reader.onload = function(event) {
    var img = new Image();
    img.onload = function() {
      var imgInstance = new fabric.Image(img, {
        selectable: 1
      })
      canvas.add(imgInstance);
      /* var red = new fabric.Rect({ width: 80, height: 50, fill:  red })
      canvas.add(red);
      red.center(); */
      canvas.deactivateAll().renderAll();
    }

    var iimageLoader = document.getElementById( iimageLoader );
    iimageLoader.addEventListener( change , handleImage, false);

    function handleImage(f) {
      var objects = canvas.getObjects();
      /* for (var i in objects) {
        objects[i].remove();
      } */
      var reader = new FileReader();
      reader.onload = function(event) {

        var fimg = new Image();
        fimg.onload = function() {
          var fimgInstance = new fabric.Image(fimg, {
            selectable: 1,
            width: 80,
            height: 50
          })
          canvas.add(fimgInstance);
          fimgInstance.center();
          /* var red = new fabric.Rect({ width: 80, height: 50, fill:  red })
          canvas.add(red);
          red.center(); */
          canvas.deactivateAll().renderAll();
        }
        fimg.src = event.target.result;
      }
      reader.readAsDataURL(f.target.files[0]);
    }

    img.src = event.target.result;

  }
  reader.readAsDataURL(e.target.files[0]);
}



var imageSaver = document.getElementById( lnkDownload );
imageSaver.addEventListener( click , saveImage, false);

function saveImage(e,f) {
  this.href = canvas.toDataURL({
    format:  png ,
    quality: 0.8
  });
  this.download =  canvas.png 
}

I m使用结构。 j 因为它更加方便

You should use the canvas API getImageData() https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas