首页 > 解决方案 > 是否可以通过画布合并两张响应式照片?

问题描述

我已经在网上搜索了很多.. 我正在编写一些代码,我试图合并来自不同 URL 的两个图像以获得良好的演示。其中一张图片来自 Flickr。

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

画布大小参数示例: https ://jsfiddle.net/esd3f4kt/

没有画布大小参数的示例: https ://jsfiddle.net/n3x7wozc/

我已经尝试删除画布元素上的大小参数并保持 CSS 代码不变,但由于某种原因,它不会以“流畅”的方式绘制画布。

像这个例子:

https://codepen.io/html5andblog/pen/yOdBaw

这是我的代码:

    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,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAaVBMVEUAAAD////09PTm5ubr6+vPz8/x8fHLy8v8/Pzb29uOjo4yMjKAgICurq5kZGS/v786OjpDQ0NMTEwiIiInJyeUlJSbm5t5eXmnp6dYWFja2touLi5ra2twcHAlJSVEREQZGRkNDQ1SUlJy3PWJAAAGU0lEQVR4nO2dWXviOgxAQwIJpBQoMOwzpfP/f+Qkl3JZKjuSLS8yOY8zD/X5SBTJi5wNUicLPQDn9Iby6Q3l0xvKpzeUT28on95QPr2hfHpD+Xg0HOdlOSwmxbAs87G/P+vBsKh29WxxPGf3nI+LWb2rCvd/3qlhWW1Ob5met9OmKl0Owpnh8H277pC7sd6+D10NxI3hqO766YAfsx45GYsDw2pLtruyrfiHw214mBrrXZgemEfEapjvjpZ+LcddzjkoRsPC/Ol8Zsv4FWEzrP6y+bXs2d5IJsPqg9Wv5YPJkcVwxO/3nyPL54PBsNg78WvZM7yP1oZj28+Dnql1jm5r+O7Ur+U9qGGxdC6YZUu7R9XK8JcHv5ZfgQyHC0+CTVS1qDzMDd2/gfeYv43GhjOvglk282xYrDwLZtnKMOCYGc69+7XM/RnWQQQNY6qJ4SmQYJadvBiOfXzlVSzpSRzZMPcfY+5Zket/qmF5DiqYZWfq5CrRcBjYr4WY39AMYxCkKpIMy9Bu35AeVIphfg6t9g0p3BAMx39Cm/3PmvDRIBiG/A4+s3Rh+Du01QO/+Q191fNY0Dkq1jBMNaEDW2kgDYvQPgDIehFpGE8YvbHmNAxXL+nA1VIoQ7+TTnhQ01MYw1iStZ9g0jeM4WdoESWfPIab0B4aNhyGMX4obnR/MroNY0pHf9KdoHYaxhpHr3TG0y7DcWiDTroKqS5Dtyu8HEztDOMOMxc6gk2HIe8mGTfsbQyr0KNHod94ozd0s0+Gmw9zQxk/YcePqDWMNyF9RJue6gxHoUeORrc9TGfobjcXN7pwqjGU8C28olnK0BjybYh1jyaxURvmoUdNQr2SoTbchR40iZ2BIf3EREje6IaT0GMmMiEbxl82PaKMNUrD0CMmQzWUk89cUeU1KkNJH8MLW6Jh6PEaQDOU95AqH1OFYWwrvhgUq8IKQ39buPlQlPqwYbyrTTrglSjYML5Vewzwyj5sKC2huQCnNbChrKz7Cpx9g4aySsMbYJEIGkqZRXwG/CKChjGv+uoAV4RBwzg3l3QDbnYDDWUGGkWoAQ1Dj9QYrKG0CYwb0FQGZCg1lMJLNJChrHnEe6A5Rcgw1MEte2qkoe/Dk3xAxzAhQ4nF4YUF0hDf/Sg2jjjD8VfogRrzBWwfAgylVhYtQHUBGMqcwrgATGQAhnEcUDMDZyhpdfsZYAcYYCg3LQUTU8DwEHqYFgCt0ABDiTP6V3CG6f+G6b+H6cfS9L/46Rumn5dKri1+2oD1IUeLzjAg68MXqPHTn6dJf64t/fnS9Oe85Sam2HWL9NeeXmD9UOoaMNiC4EXX8aUGU/xeDKnVBX4/jdBQQ9gT9QL72tLfmyhzIoOyv1RkiUjaIyyygKLt85Y4s0/bqy8x+VaZKP49/TMz8h5T6rkneY+pUkT1H9LSGvr5Q2lTGfQzpMKyb4NzwMLmFE3OcssqEk3O44uKNUY9FUTtjTLri5F+bxNBeY1pf5rIGwre0LYW1BpK+RG1N9Dpe33JaBSl72KaQr82/SWCCfTc+6tXePm+iQISG8vely/QvzT9HrSxf/YZ+ghHHmw4ekFHvSLM0s875i6m+s6leMN4C0WuvvrRxlO2uxFi3a2Iu7hT8B0lf3BD7++ZuRLfyj7zXUHxdf9iv+/pBe7siitBdXLv2mAczyl2R3fnhb5k9cbZ0f2H8WwkcnaHZSwZqsN7SONQdHqXbAT3Aa8c3wfchJuwEXXt/E7nF7iXexAyu8FnMnaGwXJUdC5qbRio0sBWExyGg8J/erNC1oNMhv4nNnBTFpyGnqenUJNOzIaDob/N4B/EPIbJ0F9MNYqhLIaDwsdC/6dhiGEx9PE2mr+BPIaD3O0q8ZSch7IbNo+qu91he7sHlMtwMBi5eR0/9dtIkLAYNo78BceSxY/NsHHkfVb3TH6Mhs37yHcKZcvw/l1hNGzi6o6j8ctxZx0/72E1bDjYfjymQEMyK7gNGyrzp3WrvzTVCAeGDaOanpUvarbg8oAbw4ZyPsWfSXmbzqmThGicGbaU1ebUNfm4Pm0q1sjyjFPDC5P5pp4t1o8dxL7Wi1m9mStPK/HhwfCbcV4Oi2JymBTFsMzp856m+DMMRW8on95QPr2hfHpD+fSG8ukN5dMbyqc3lE/6hv8Aa8B06QVh+7QAAAAASUVORK5CYII='
  };



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

  });

标签: javascripthtmlresponsive-designhtml5-canvasresponsive-images

解决方案


推荐阅读