如何将我的动态div转换为png图像

Question

我这里有3个动态div，我正在尝试将动态div转换为privew部分的图像格式，如何将动态div转换为图像格式？任何想法？

并且还需要隐藏动态div并仅显示图像，请提供小提琴

Canvas2Image.saveAsPNG(canvas); 
$("#img-out").append(canvas);

Answer 1

http://jsfiddle.net/8ypxW/3/

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
                // Clean up 
                //document.body.removeChild(canvas);
            }
        });
    });
}); 

选中此项以供参考。

Answer 2

我在jQuery的帮助下快速实现了一下，并快速浏览了MDN的canvas examples之一。绝对不是最好的方法，但你会得到这个想法。

还有一件事是你可能想要注意安全问题 Drawing DOM content to Canvas

＆＃13;

＆＃13;

jQuery('#htmlBlock').html(jQuery('#editor').val());
jQuery('#editor').on('change', function() {
  jQuery('#htmlBlock').html(jQuery(this).val());
});

jQuery('#html2img').on('click', function() {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  template[3] = jQuery('#htmlBlock').html();

  var svg = new Blob([template.join('')], {
    type: 'image/svg+xml;charset=utf-8'
  });
  var url = DOMURL.createObjectURL(svg);
  jQuery('#imgitem').attr('src', url);
});

var DOMURL = window.URL || window.webkitURL || window;
var template = [
  '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">',
  '<foreignObject width="100%" height="100%">',
  '<div style="background-color: #AAA;max-width: 140px; padding: 10px;" xmlns="http://www.w3.org/1999/xhtml">',
  '',
  '</div>',
  '</foreignObject>',
  '</svg>'
];

＆＃13;

#htmlBlock {
  background-color: #AAA;
  max-width: 140px;
  padding: 10px;
}
label {
  display: block;
  margin: 10px 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="editor" placeholder="editor">HelloWorld</textarea>

<button id="html2img">HTML2IMAGE</button>

<label>
  HTML:
  <div id="htmlBlock">
  </div>
</label>

<label>
  Image:
  <div>
    <img id="imgitem" />
  </div>
</label>

＆＃13;

＆＃13;

＆＃13;