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.解决问题
参考官方文档:
传入zoom缩放参数即可,对应的canvas指定的width和height也要相应调整,代码如下:
var scalePrint = 2;
canvas = twaver.vector.Network.toCanvas(width * scalePrint, height * scalePrint, null , scalePrint);
问题解决后,放太大会有消耗客户端性能。
参考网址: