如何将div标签放在画布上 [英] How to put the div tags on canvas

问题描述

我想知道，如何将ajax生成的div标签动态地放到画布上。

我只是用ajax创建div tage， divs到jsp页面上的另一个div标签。

解决方案

您不能将HTML渲染到画布上。相反，一种方法是使用包含要呈现的内容的SVG图像。

要绘制HTML内容，您可以使用包含HTML的< foreignObject> 元素， SVG图片到您的画布中。

  var canvas = document.getElementById（'canvas'）; 
 var ctx = canvas.getContext（'2d'）; 
 
 var data ='< svg xmlns =http://www.w3.org/2000/svgwidth =200height =200>'+ 
 '< foreignObject width =100％height =100％>'+ 
'< div xmlns =http://www.w3.org/1999/xhtmlstyle = size：40px>'+ 
'< em> I< / em>像'+ 
'< span style =color：white; text-shadow：0 0 2px blue;>'+ 
'cheese< / span>'+ 
'< ; / div>'+ 
'< / foreignObject>'+ 
'< / svg>'; 
 
 var DOMURL = window.URL || window.webkitURL ||窗口; 
 
 var img = new Image（）; 
 var svg = new Blob（[data]，{
 type：'image / svg + xml; charset = utf-8'
}）; 
 var url = DOMURL.createObjectURL（svg）; 
 
 img.onload = function（）{
 ctx.drawImage（img，0，0）; 
 DOMURL.revokeObjectURL（url）; 
} 
 
 img.src = url; 
  

您可以找到更多信息此处。

---

限制

这种方法有很多限制：

• IE下边缘只是不支持< foreignObject> ，所以这将不会工作 + 它会污染画布，即使结果是空白的rect ，因为这些浏览器这样做，一旦任何svg图像上绘制，出于安全原因。




• 某些浏览器（至少是Safari 9）会在< foreignObject>




• 某些元素会奇怪地呈现（< button> 没有任何风格的FF，< video> 在某些UA上只是一个奇怪的东西...）。




• 没有外部资源将被加载到< img> 元素中，图像将必须首先转换为dataURL，样式将必须直接附加

因此，最好的方法是在HTML标签中输入svg或内嵌的字体，如果您不介意使用库，则仍然要使用 html2canvas 。

如果您在使用库，那么您可以尝试做它的工作：

使用本机画布绘制方法绘制每个HTML元素及其样式。

i want to know that, how to put the div tag generated with ajax dynamically onto the canvas.

I just create the div tage with ajax and append the generated divs to the another div tag on the jsp page. and i want to add main div on the canvas.

Thanks in advance.

解决方案

You can't just render HTML into a canvas. Instead, one approach would be to use an SVG image containing the content you want to render.

To draw HTML content, you'd use a <foreignObject> element containing the HTML, then draw that SVG image into your canvas.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
  '<foreignObject width="100%" height="100%">' +
  '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
  '<em>I</em> like ' +
  '<span style="color:white; text-shadow:0 0 2px blue;">' +
  'cheese</span>' +
  '</div>' +
  '</foreignObject>' +
  '</svg>';

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([data], {
  type: 'image/svg+xml;charset=utf-8'
});
var url = DOMURL.createObjectURL(svg);

img.onload = function() {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
}

img.src = url;

You can find more information here.

---

Limitations

This approach has a lot of limitations :

• IE below Edge just doesn't support <foreignObject>, so this won't work at all + it will taint the canvas, even if the result is a blank rect, since these browser do so as soon as any svg images as been drawn on it, for security reasons.

• Some browsers (at least Safari 9) do taint the canvas when a <foreignObject> is drawn on it, for security reasons.

• Some elements do render weirdly (<button> doesn't have any style in FF, <video> is just a weird thing on some UA ...).

• No external resource will be loaded into the <img> element, images will have to be converted to dataURL first, styles will have to be appended directly into the svg, or inline in the HTML tags, fonts will have to be dataURL encoded.

So the best approach, if you don't mind using a library, is still to use html2canvas.

If you do mind using a library, then you can try to do what it does :
use the native canvas drawing methods to draw each of the HTML elements and its styles.

这篇关于如何将div标签放在画布上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！