html图片打印不出来 lodop_记录Canvas用于LODOP打印的解决过程

工作中遇到用canvas绘制了图片，需要打印出来的需求。由于设备限制遇到了不少奇葩问题。在解决过程中学会了不少知识，在此记录下，希望能对同样遇到此类问题的朋友有所帮助。

将 Canvas 转为 png

首先要知道LODOP直接打印canvas是打印不出来的，所以我们需要转为图片。 假设div中有一个绘制完的canvas，最基本的方式就是：获取canvas内容转为base64码，然后将canvas替换为一个img图片。

function toImage () {

var canvas = $('#app canvas')

if (!canvas) return

var url = canvas[0].toDataURL()

$('#app').html("")

},复制代码

这样，直接打印网页就可以打印出我们用canvas绘制的图片了。

LODOP.PRINT_INIT("测试页");

LODOP.ADD_PRINT_HTM("0mm", "0mm", "100%", "100%", html1);

LODOP.PREVIEW();复制代码

toDataURL 方法还可以转为其他格式的图片，如 jpeg。具体请看MDN。

在使用第一个方法时遇到一个问题：由于canvas所画内容较大，导致base64码有40000+的长度。在64位系统中可以正