Как преобразовать элемент HTML в элемент холста?

Question

Было бы невероятно полезно временно преобразовать правильный элемент в canvas. Например, скажем, у меня есть стиль div, который я хочу перевернуть. Я хочу динамически создавать холст, «визуализировать» HTMLElement в холст, скрывать исходный элемент и анимировать холст.

Можно ли это сделать?

Answer 1

К сожалению, браузер не будет отображать HTML на холсте.

Это может быть потенциальный риск для безопасности, если вы можете, так как HTML может содержать контент (в частности, изображения и фреймы) со сторонних сайтов. Если canvas может превратить содержимое HTML в изображение, а затем вы читаете данные изображения, вы можете потенциально извлечь привилегированный контент с других сайтов.

Чтобы получить холст из HTML, вам придется писать свой собственный рендеринг HTML с нуля, используя drawImage и fillText, что является потенциально огромной задачей. Есть one such attempt here, но это немного изворотливый и длинный путь от завершения. (Он даже пытается проанализировать HTML/CSS с нуля, что, я думаю, сходит с ума! Было бы легче начать с реального узла DOM со стилями, применяемыми, и прочитать стиль с использованием getComputedStyle и относительные положения его частей с помощью offsetTop и др.)

Answer 2

Вы можете избавить себя от преобразований, вы можете использовать CSS3 Transitions для переворота <div> и <ol> и любого HTML-тега, который вы хотите. Вот некоторые демонстрации с исходным кодом, чтобы посмотреть и узнать: http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/

Answer 3

Существует библиотека, которая пытается делать то, что вы говорите.

Смотрите этот пример и получить код

http://hertzen.com/experiments/jsfeedback/

http://html2canvas.hertzen.com/

Читает DOM, из HTML и вынести его на холст, терпеть неудачу на некоторых, но в общих работах.

Answer 4

Нет такой вещи, извините.

Хотя спецификации состояний:

Будущая версия контекстного API 2D может обеспечить способ для визуализации фрагментов документов, оказываемых с использованием CSS, прямо на холсте.

Что может быть как можно ближе.

Многие люди хотят получить вид сделки, но в этом нет ничего такого.

Исключение составляет только исключительная возможность Mozilla drawWindow, которая рисует снимок содержимого окна DOM в холсте. Эта функция доступна только для кода, работающего с привилегиями Chrome («только для локальных»). Это запрещено в обычных HTML-страницах. Поэтому вы можете использовать его для написания расширений FireFox, например, this one does, но это все.

Answer 5

Взгляните на этот учебник по MDN: https://developer.mozilla.org/en/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

Он использует временную SVG изображение, чтобы включить содержимое HTML в качестве «иностранного элемента», то рендеров сказал SVG изображение в холст элемента. Однако существуют существенные ограничения на то, что вы можете включить в образ SVG таким образом. Подробную информацию см. В разделе «Безопасность».)

Answer 6

Наверху сообщения Mozdev, в котором содержатся ссылки на ящик. Я начал небольшой проект для рендеринга HTML на холст в Firefox, Chrome & Safari. Так, например, вы можете просто сделать:

rasterizeHTML.drawHTML('<span class="color: green">This is HTML</span>' 
        + '<img src="local_img.png"/>', canvas); 

Исходный код и более обширный пример here.

Answer 7

Простейшим решением для анимации элементов DOM является использование переходов/анимаций CSS, но я думаю, что вы уже знаете это, и вы пытаетесь использовать холст для выполнения CSS, который не позволяет вам делать. Что относительно CSS custom filters? вы можете трансформировать свои элементы любым мыслимым способом, если вы знаете, как писать шейдеры. Некоторые другие link и не забудьте проверить CSS filter lab.
Примечание: Как вы можете предположить, поддержка браузера плохая.

Answer 8

function convert() { 
        dom = document.getElementById('divname'); 
        var script, 
        $this = this, 
        options = this.options, 
        runH2c = function(){ 
         try { 
          var canvas =  window.html2canvas([ document.getElementById('divname') ], { 
           onrendered: function(canvas) { 

           window.open(canvas.toDataURL()); 

           } 
          }); 
         } catch(e) { 
          $this.h2cDone = true; 
          log("Error in html2canvas: " + e.message); 
         } 
        }; 

        if (window.html2canvas === undefined && script === undefined) { 
        } else {. 
         // html2canvas already loaded, just run it then 
         runH2c(); 
        } 
       } 

Answer 9

Вы можете использовать библиотеку dom-to-image (я - сопровождающий).
Вот как вы могли бы подойти к вашей проблеме:

var parent = document.getElementById('my-node-parent'); 
var node = document.getElementById('my-node'); 

var canvas = document.createElement('canvas'); 
canvas.width = node.scrollWidth; 
canvas.height = node.scrollHeight; 

domtoimage.toPng(node).then(function (pngDataUrl) { 
    var img = new Image(); 
    img.onload = function() { 
     var context = canvas.getContext('2d'); 

     context.translate(canvas.width, 0); 
     context.scale(-1, 1); 
     context.drawImage(img, 0, 0); 

     parent.removeChild(node); 
     parent.appendChild(canvas); 
    }; 

    img.src = pngDataUrl; 
}); 

And here is jsfiddle

Answer 10

следующий код может быть использован в 2-х режимах, режим 1 сохранить HTML-код в образ, режим 2 сохранить HTML-код к холст.

этот код работать с библиотекой: https://github.com/tsayen/dom-to-image

* «id_div» является идентификатор элемента HTML, который вы хотите преобразовать.

** «canvas_out» - это идентификатор div, который будет содержать холст , попробуйте этот код. :

function Guardardiv(id_div){ 

     var mode = 2 // default 1 (save to image), mode 2 = save to canvas 
     console.log("Process start"); 
     var node = document.getElementById(id_div); 
     // get the div that will contain the canvas 
     var canvas_out = document.getElementById('canvas_out'); 
     var canvas = document.createElement('canvas'); 
     canvas.width = node.scrollWidth; 
     canvas.height = node.scrollHeight; 

     domtoimage.toPng(node).then(function (pngDataUrl) { 
      var img = new Image(); 
      img.onload = function() { 
      var context = canvas.getContext('2d'); 
      context.drawImage(img, 0, 0); 
     }; 

     if (mode == 1){ // save to image 
      downloadURI(pngDataUrl, "salida.png"); 
     }else if (mode == 2){ // save to canvas 
      img.src = pngDataUrl; 
      canvas_out.appendChild(img); 

     } 
     console.log("Process finish"); 
    }); 

    } 

так, если вы хотите сохранить изображение просто добавить эту функцию:

function downloadURI(uri, name) { 
     var link = document.createElement("a"); 

     link.download = name; 
     link.href = uri; 
     document.body.appendChild(link); 
     link.click(); 
    } 

Пример использования:

<html> 
<head> 
</script src="/dom-to-image.js"></script> 
</head> 
<body> 
<div id="container"> 
    All content that want to transform 
    </div> 
    <button onclick="Guardardiv('container');">Convert<button> 

<!-- if use mode 2 --> 
<div id="canvas_out"></div> 
</html> 

комментарий, если эту работу. Comenten si les sirvio :)