HTML-ввод типа date или текста, не работающего в SVG foreignObject - PullRequest
Новая
       25

HTML-ввод типа date или текста, не работающего в SVG foreignObject

0 голосов
/ 15 марта 2019

Я пытаюсь преобразовать HTML в изображение, используя SVG foreignObject.Когда я включаю элемент ввода типа date или text, он не работает.Удаление входного тега работает. 

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
var myDiv = document.getElementById("mydiv");
canvas.setAttribute('width', myDiv.clientWidth );
canvas.setAttribute('height', myDiv.clientHeight);

const tempImg = document.createElement('img');
tempImg.addEventListener('load', onTempImageLoad);

tempImg.src = 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="'+myDiv.clientWidth+'" height="'+myDiv.clientHeight+'"><foreignObject x="0" y="0" width="'+myDiv.clientWidth+'" height="'+myDiv.clientHeight+'">'+'<style>h1{color3:red}</style>'+'<div xmlns="http://www.w3.org/1999/xhtml">'+myDiv.outerHTML+'</div></foreignObject></svg>')

function onTempImageLoad(e){
  ctx.drawImage(e.target, 0, 0)

}
html,body,svg { height:100% }

div{
  border-style: solid;
  border-width: 2px;
}
<div id="mydiv">
  <input type="date" name="bday" />
  <input type="text" name="name" />
  <h1 >My Div</h1>
</div>

<canvas id="mycanvas"></canvas>

1 Ответ

1 голос
/ 15 марта 2019

Добавлено небольшое исправление: 

function callfunction() {
  var canvas = document.getElementById("mycanvas");
  var ctx = canvas.getContext("2d");
  var myDiv = document.getElementById("mydiv");
  canvas.setAttribute('width', myDiv.clientWidth);
  canvas.setAttribute('height', myDiv.clientHeight);


  const tempImg = document.createElement('img');
  tempImg.addEventListener('load', onTempImageLoad);
  debugger
  tempImg.src = 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="' + myDiv.clientWidth + '" height="' + myDiv.clientHeight + '"><foreignObject x="0" y="0" width="' + myDiv.clientWidth + '" height="' + myDiv.clientHeight + '">' + '<style>h1{color3:red}</style>' + '<div xmlns="http://www.w3.org/1999/xhtml">' + myDiv.outerHTML.replace(/(<input(.+?\/?)>)/g, "<input $2 />") + '</div></foreignObject></svg>')

  function onTempImageLoad(e) {

    ctx.drawImage(e.target, 0, 0)
  }
}
html,
body,
svg {
  height: 100%
}

div {
  border-style: solid;
  border-width: 2px;
}
<button onclick="callfunction()">
Click Me
</button>

<div id="mydiv">
  <input type="date" name="bday">
  <input type="text" name="name">
  <h1>My Div</h1>
</div>

<canvas id="mycanvas"></canvas>
...