画布上的HTML内容 [英] Html content on canvas

问题描述

如何在画布上附加html内容.我试过但不起作用.有什么方法可以将html附加到画布上.

How to append html content on canvas.I tried but not working. any way is there to append html on canvas.

http://jsfiddle.net/mktgnp3e/780/

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

 var html="<span><p>Content....</p></span>";

ctx.font = "20px Georgia";
ctx.fillText("Hello World!", 10, 50); 
ctx.font = "30px Verdana"; 
 var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
 gradient.addColorStop("1.0", "red");
 // Fill with gradient
 ctx.fillStyle = gradient;  
 ctx.fillText(html, 10, 90);

推荐答案

基本思想是将HTML + HTML的样式复制到SVG元素内的<foreignObject>中.然后，获取SVG元素的屏幕截图，并使用drawImage将其绘制在画布上.有很多问题，尤其是如果您要使用图像，因为可能无法导出受污染的画布.接下来是一些代码，但是我不建议在生产中使用它.

The basic idea is to copy the HTML + the styles for the HTML to a <foreignObject>inside an SVG element. Then you take a screenshot of the SVG element and draw it on the canvas using drawImage. There are lots of problems especially if you want to use images, since tainted canvases may not be exported. Next come some code but I wouldn't advise to use it in production.

let HTMLcontent = document.querySelector("#content");
let w = 340,h = 240;

(function copyCSS(){
  let styles0 = document.querySelectorAll("style")[0]
  let oldStyle = styles0.textContent;
  let newStyle = document.createElement("style");
  newStyle.textContent = oldStyle;
  styles0.parentNode.removeChild(styles0);
  HTMLcontent.prepend(newStyle);
})();

// SVG need well formed XHTML
HTMLcontent.setAttribute("xmlns", "http://www.w3.org/1999/xhtml"); 
let xml = new XMLSerializer().serializeToString(HTMLcontent);


let data = `<svg xmlns= 'http://www.w3.org/2000/svg' width='${w}' height='${h}'>
           <foreignObject width='100%' height='100%' >`+
       
            xml+
    
           `
           </foreignObject>
           </svg>`;



button.addEventListener("click",function(){

 
let img = new Image();
let svg = new Blob([data], {type: 'image/svg+xml'});
let url = URL.createObjectURL(svg);
img.src = url;
img.onload = function() {
  

let canvas = document.createElement('canvas');
canvas.width = w; 
canvas.height = h;
canvas.getContext('2d').drawImage(this, 0, 0,this.naturalWidth,this.naturalHeight);
  document.body.prepend(canvas);


  URL.revokeObjectURL(url); 
}

});

canvas{background:#333;}
html {
  font-size: 16px;
 
}
#content{
  width:250px;
  background-color: #e9e9e9;
  border:1px solid #d9d9d9;
  padding:1em;
  margin:1em;
  border-radius:10px;
}
h1 {
  color: #333;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  max-width: calc(5 * 16rem);
  margin: 1em auto;
  border-bottom: 1px solid #d9d9d9;
}

 p {
  font-size: .8rem;
  line-height: 150%;
  text-align:center;
}

<div id="content">
  <h1>How to append html content on canvas</h1>
  <p>I tried but not working. Any way is there to append html on canvas?</h1>
</div>

<button id="button" style="margin: .5em;">Get screenshot</button>

请单击按钮以获取屏幕截图.画布(深色背景#333)元素将添加到正文中.

Please click the button do get the screenshot. A canvas (dark background #333) element will be prepended to the body.

这篇关于画布上的HTML内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！