javascript - 用 img 元素替换 HTML5 画布元素

Question

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

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

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

标签： javascriptjqueryhtml5-canvas

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

单击此处获取示例