Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/387.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 是否可以通过画布将两张响应性强的照片合并?_Javascript_Html_Responsive Design_Html5 Canvas_Responsive Images - Fatal编程技术网

Javascript 是否可以通过画布将两张响应性强的照片合并?

Javascript 是否可以通过画布将两张响应性强的照片合并?,javascript,html,responsive-design,html5-canvas,responsive-images,Javascript,Html,Responsive Design,Html5 Canvas,Responsive Images,我在网上到处都找遍了。。我正在编写一些代码,试图合并来自不同URL的两个图像,以获得良好的演示。其中一张图片来自Flickr 是否可以通过html5画布将两张照片合并为一个元素,同时保持其响应性 画布大小参数示例: 不带画布大小参数的示例: 我尝试删除canvas元素上的大小参数,并保持CSS代码不变,但由于某些原因,它没有以“流体”的方式绘制画布 像这个例子: 这是我的密码: function loadImages(sources, callback) { var ima

我在网上到处都找遍了。。我正在编写一些代码,试图合并来自不同URL的两个图像,以获得良好的演示。其中一张图片来自Flickr

是否可以通过html5画布将两张照片合并为一个元素,同时保持其响应性

画布大小参数示例:

不带画布大小参数的示例:

我尝试删除canvas元素上的大小参数,并保持CSS代码不变,但由于某些原因,它没有以“流体”的方式绘制画布

像这个例子:

这是我的密码:

    function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for(var src in sources) {
      numImages++;
    }
    for(var src in sources) {
      images[src] = new Image();
      images[src].onload = function() {
        if(++loadedImages >= numImages) {
          callback(images);
        }
      };
      images[src].src = sources[src];
    }
  }
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');

  var sources = {
    image2: 'http://farm5.static.flickr.com/4621/39922707792_c4eab8924c_b.jpg',
    image1: 'data:image/png;base64,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'
  };



  loadImages(sources, function(images) {
    ctx.drawImage(images.image1, 25, 5, 785, 589);
            ctx.drawImage(images.image2, 350, 150, 457/2.25, 645/2.25);

  });

“合并”是什么意思?如果您试图将照片剪辑到椭圆形,可以使用
ctx.globalCompositeOperation='lighter'。我试图做的是合并var源中的图像,并像下面的示例那样:<在画布上没有大小参数,但它能够适应窗口大小,我希望在同一画布中使用两个图像源。此示例:受到限制,因为该方法设置为1000x1000画布大小。如果我删除画布上的大小参数,并尝试应用CSS使画布响应/流动,它不会像这样正常工作:如果不使用HTML设置画布大小,则需要使用JavaScript进行设置。您可以指定硬编码的维度,也可以等待
images[src].onload
函数根据已加载的图像执行和使用维度。谢谢!我到家后会试试的。