用 img 元素替换 HTML5 画布元素答案

【问题标题】：Replace HTML5 canvas Elements With img Elements用 img 元素替换 HTML5 画布元素
【发布时间】：2020-01-08 06:25:21
【问题描述】：

想将画布元素替换为图像元素。

已经尝试使用 jquery 将画布转换为图像。但是空图像显示没有任何图像。

<script>
        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 context = canvas.getContext('2d');

      var sources = {
        image1: 'Group 1.png',
        image2: 'Rectangle 5.png',
        image3: 'Motif_2.png',
        image4: 'body_design_2.png'
      };

      loadImages(sources, function(images) {
        context.drawImage(images.image1, 0, 0, 484, 984);
        context.drawImage(images.image2, 42, 0, 400, 747);
          context.drawImage(images.image3, 0, 0, 484, 984);
          context.drawImage(images.image4, 42, 0, 400, 747);
      });
        </script>
        <script>
            $(document).ready( function(e)
            {
                $('canvas').each( function(e)
                {
                    var image = new Image();
                    image.src = this.toDataURL("image/png");

                    $(this).replaceWith(image);
                });
            });
        </script>

将画布元素替换为图像元素。有关此问题的任何解决方案。

【问题讨论】：

Convert canvas to an image with JavaScript的可能重复
在您的情况下，使用画布似乎是多余的。 images 变量中已经有图像元素。所以你需要的只是将它们显式地插入到 DOM 中。并且这里不需要画布操作。

标签： javascript jquery html5-canvas

【解决方案1】：

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

ctx.fillRect(50,50,50,50);

var img = new Image();
img.src = can.toDataURL();
document.body.appendChild(img);

Click Here for sample

【讨论】：

想要用多个图像而不是颜色填充画布。