Javascript 用img元素替换HTML5画布元素

要将canvas元素替换为image元素

已尝试使用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>

函数loadImages（源、回调）{
var图像={}；
var loadedImages=0；
var numImages=0；
//获取源的数量
用于（源中的var src）{
numImages++；
}
用于（源中的var src）{
图像[src]=新图像（）；
图像[src].onload=function（）{
如果（++LoadeImage>=numImages）{
回调（图像）；
}
};
图像[src].src=源[src]；
}
}
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
风险值来源={
图1:'group1.png'，
图2:'矩形5.png'，
图3:‘Motif_2.png’，
图4:“body_design_2.png”
};
加载图像（源、函数（图像）{
context.drawImage（images.image1,0,048484）；
上下文.drawImage（images.image2,42,0400747）；
上下文.drawImage（images.image3,0,0484984）；
上下文.drawImage（images.image4,42,0400747）；
});
$（文档）.ready（函数（e）
{
$（'canvas'）。每个（函数（e）
{
var image=新图像（）；
image.src=this.toDataURL（“image/png”）；
$（此）.replaceWith（图像）；
});
});

将canvas元素替换为image元素。有关此问题的任何解决方案

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

---

在您的情况下，使用画布似乎是多余的，可能重复。

images

变量中已经有图像元素。因此，您需要的只是将它们显式地插入DOM中。这里不需要画布操作。要用多个图像而不是颜色填充画布。