如何在Canvas上添加HTML元素呢_随笔

首先需要获取svg标签以及内容：varsvgHtml=svgContainer.innerHTML()将svg转成canvas需要用到google的一个插件canvg，可以上官网下载，也可以直接远程引用进来接下来就是调用该插件的canvg(canvasId,svgHtml)方法来转成canvas，这个方法第一个参数就是canvas标签的id，第二个自然就是svg标签内容了，就这样，svg转成了canvas然后就是将canvas转成图片了，这个更加简单了varimgSrc=document.getElementById(canvasId).toDataUrl("image/png")//这其实是将canvas转成了图片，并返回图片的所有内容数据，如下即可显示图片1

<canvas>标签是 HTML 5 中的新标签。

定义和用法

<canvas>标签定义图形，比如图表和其他图像。

<canvas>标签只是图形容器，您必须使用脚本来绘制图形。

实例

通过 canvas 元素来显示一个红色的矩形：

<!DOCTYPE HTML>

<html>

<head>

var canvas=document.getElementById('myCanvas')

var ctx=canvas.getContext('24d')

ctx.fillStyle='#FF0000'

ctx.fillRect(0,0,80,100)

</script>

</head>

<body>

<canvas id="myCanvas">your browser does not support the canvas tag </canvas>

</body>

</html>

2、安装html2Canvas: npm install --save html2canvas

这里使用 iframe 嵌套需要转成pdf的html文件；

如果pdf内容是动态的，可以将html丢给后端，让后端使用freemarker ftl模板语言或是啥其他的模板语言更改即可，然后将整个html作为字符串传给前端，前端再使用iframe 的 srcdoc属性将内容渲染出来。

不存在分页内容裂开的情况，但对样式呈现不太友好，有时会出现内容偏移情况，时好时坏的，经过不断的尝试，发生偏移的时候，可以将html2Canvas的width写死，但是值具体是多少，需要你自己猜

分页会出现问题：比如图片裂开，表格的某一行从中间断开了等等....我用的笨方法手动去调整iframe的宽、高+html2Canvas的width、height+contentWidth、contentHeight，一点点试出来合适的值（应该有更好的方法，但是技术有限）

1. 生成多页pdf，分页内容裂开的问题

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6269461.html

如何在Canvas上添加HTML元素呢

发表评论

评论列表（0条）