twaver 内容导出图片不清晰解决方案

1.twaver内容导出图片方案

twaver想要导出图片，需要先转换成canvas，转换canvas方法如下：

// 指定canvas宽高
canvas = twaver.vector.Network.toCanvas(width,height)

然后由canvas导出为图片。转换canvas使用twaver.vector.Network.toCanvas方法，canvas导出图片可用toBlob方法或者toDataURL，canvas 导出图片代码片段如下：

方法一：
canvas.toBlob(function (blob) {
                    var eleLink = document.createElement('a');
                    eleLink.download = '测试图片.png';
                    eleLink.href = URL.createObjectURL(blob);
                    // 触发点击
                    eleLink.click();
                })


方法二：
var link:any = document.createElement('a');
link.href = canvas.toDataURL("image/png");
link.download = '测试图片.png'; // 下载文件名
link.click(); 

2.twaver导出图片不清晰原因分析及解决思路

以上可将twaver内容导出为图片，但是遇到了导出图片不清晰的问题；图片不清晰是内容中有部分小字体，转换canvas后canvas画布太小导致小字体不清晰。解决思路就是从twaver转换canvas的参数入手。

3.解决问题

参考官方文档：

twaver.vector.Network - TWave HTML5 API Dochttp://doc.servasoft.com/uploads/twaver-html5-5.9.0-api/classes/twaver.vector.Network.html

传入zoom缩放参数即可，对应的canvas指定的width和height也要相应调整，代码如下：

var scalePrint = 2;
canvas = twaver.vector.Network.toCanvas(width * scalePrint, height * scalePrint, null , scalePrint);

 问题解决后，放太大会有消耗客户端性能。

参考网址：

TWaver Documents » 开发指南 – TWaver HTML5 2Dhttp://doc.servasoft.com/twaver-document-center/recommended/twaver-html5-guide/

canvas 生成图片模糊_qzo_smile的博客-CSDN博客_canvas截图模糊参考文件：https://blog.csdn.net/qq_41887214/article/details/123173072https://juejin.cn/post/6844903828916011022https://www.jb51.net/html5/815034.html在解决这个问题之前，必须了解以下背景知识：1.关于屏幕的一些基础知识：物理像素（DP）物理像素也称设备像素，我们常听到的手机的分辨率及为物理像素，比如 iPhone 7的物理分辨率为750 * 1334。屏https://blog.csdn.net/qq_43148113/article/details/124816270（查找资料时，因此文档受益，文档和本文问题无关）