Javascript 如何使用html2canvas保存div

我有一个带有可拖动方向图的页面，我想插入一个按钮，用html2canvas保存地图div的屏幕。我有以下代码：

可拖动方向
#右面板{
字体系列：“Roboto”，“sans-serif”；
线高：30px；
左侧填充：10px；
}
#右面板选择，#右面板输入{
字体大小：15px；
}
#右面板选择{
宽度：100%；
}
#右面板i{
字体大小：12px；
}
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#地图{
身高：100%；
浮动：左；
宽度：63%；
身高：100%；
}
#右面板{
浮动：对；
宽度：34%；
身高：100%；
}
.小组{
身高：100%；
溢出：自动；
}
总距离：

函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：4，
中心：{lat:-24.345，lng:134.46}//澳大利亚。
});
var directionsService=新的google.maps.directionsService；
var directionsDisplay=新建google.maps.DirectionsRenderer({
真的，
地图：地图，
面板：document.getElementById（'右面板'）
});
directionsDisplay.addListener（'directions\u changed'，function（）{
ComputeTotalInstance（directionsDisplay.getDirections（））；
});
显示路线（“华盛顿州珀斯”、“新南威尔士州悉尼”、方向服务、，
方向显示）；
}
功能显示路线（起点、终点、服务、显示）{
服务路线({
来源:来源,，
目的地：目的地，
航路点：[{地点：南澳州阿德莱德，{地点：新南威尔士州布罗克山]，
travelMode:‘驾驶’，
避免收费：正确
}，功能（响应、状态）{
如果（状态=='OK'）{
显示。设置方向（响应）；
}否则{
警报（'由于：'+状态而无法显示方向）；
}
});
}
函数ComputeTotalInstance（结果）{
var合计=0；
var myroute=result.routes[0]；
对于（var i=0；i

作为替代方案，您可以使用dom进行图像处理，它工作得非常好：