我想使用html2canvas捕获naviagted地图图像，但它没有显示地图其他图像显示 [英] I want to capture naviagted map image using html2canvas but it is not showing map other images are shown
本文介绍了我想使用html2canvas捕获naviagted地图图像，但它没有显示地图其他图像显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要捕捉导航地图图像但它不工作
其他图像工作正常。
我尝试过：
Js代码如下
I want to capture Navigated Map image But It is not working
for other images it is working fine.
What I have tried:
Js code is as follows
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<%-- <script src="../jquery-1.7.1.min.js"></script>--%>
<script src="../jquery-1.7.1.min.js"></script>
<script src="../js/html2canvas.js"></script>
<script src="../js/base64.js"></script>
<script src="../js/canvas2image.js"></script>
<script src="https://superal.github.io/canvas2image/canvas2image.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnSave").click(function () {
debugger
html2canvas($("#widget"), {
useCORS: true,
allowTaint: true,
onrendered: function (canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
// Convert and download as image
Canvas2Image.saveAsPNG(canvas);
$("#img-out").append(canvas);
// Clean up
//document.body.removeChild(canvas);
}
});
//html2canvas($('#map'), {
// useCORS: true,
// allowTaint: true,
// onrendered: function (canvas) {
// document.body.appendChild(canvas);
// }
//});
});
});
</script>
</asp:Content>
Asp .net Code如下所示
Asp .net Code is as follows
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<link href="../css/NewStyleSheet.css" rel="stylesheet" />
<span id="widget" class="widget" field="AGE" roundby="20" description="Patient age, in years">
<div class="header ng-scope" id="map">
<div class="title ng-binding">AGE</div>
<p class="ng-binding">Patient age, in years</p>
<%-- Here passing Url of map whose Image Has to Capture--%>
<div class="element ng-scope">
<div class="content">
<!-- end ngRepeat: rowKey in table.rowKeys | orderBy:elementRowSort -->
<!---->
<!-- end ngRepeat: rowKey in table.rowKeys | orderBy:elementRowSort -->
<!---->
<!-- end ngRepeat: rowKey in table.rowKeys | orderBy:elementRowSort -->
<!---->
<!-- end ngRepeat: rowKey in table.rowKeys | orderBy:elementRowSort -->
<table class="ng-pristine ng-valid"><colgroup> <col> <col width="60x"> <col width="100px"> </colgroup> <thead> <tr> <th class="cell value">Value</th> <th class="cell freq">Freq</th> <th class="cell value"></th> </tr> </thead> <tbody> <tr class="selectable ng-scope"> <td class="cell value"><span class="ng-scope ng-binding">0 to 19</span>
</td> <td class="cell freq ng-binding">17.2%</td> <td class="cell glyph"> <span class="bar bar-both" style="width: 17.234468937875754%"></span>
<span class="bar bar-fg" style="width: 0%"></span>
<span class="bar bar-bg" style="width: 0%"></span>
</td> </tr> <tr class="selectable ng-scope"> <td class="cell value"><span class="ng-scope ng-binding">20 to 39</span>
</td> <td class="cell freq ng-binding">18.0%</td> <td class="cell glyph"> <span class="bar bar-both" style="width: 18.03607214428858%"></span>
<span class="bar bar-fg" style="width: 0%"></span>
<span class="bar bar-bg" style="width: 0%"></span>
</td> </tr><tr class="selectable ng-scope"> <td class="cell value"><span class="ng-scope ng-binding">40 to 59</span>
</td><td>{{table.getRowPercent('current', rowKey) | percent}}</td><td class="cell freq ng-binding">34.3%</td> <td class="cell glyph"> <!--<div class="bar bar-both" style="width: {{(row.current.pct * 100)||2"></div>-->
<span class="bar bar-both" style="width: 34.2685370741483%"></span>
<span class="bar bar-fg" style="width: 0%"></span>
<span class="bar bar-bg" style="width: 0%"></span>
</td> </tr><tr class="selectable ng-scope"> <td class="cell value"><span class="ng-scope ng-binding">60 to 79</span>
</td><td>{{table.getRowPercent('current', rowKey) | percent}}</td><td class="cell freq ng-binding">24.0%</td> <td class="cell glyph"> <!--<div class="bar bar-both" style="width: {{(row.current.pct * 100)||2"></div>-->
<span class="bar bar-both" style="width: 24.04809619238477%"></span>
<span class="bar bar-fg" style="width: 0%"></span>
<span class="bar bar-bg" style="width: 0%"></span>
</td> </tr><tr class="selectable ng-scope"> <td class="cell value"><span class="ng-scope ng-binding">80 to 99</span>
</td><td>{{table.getRowPercent('current', rowKey) | percent}}</td><td class="cell freq ng-binding">6.4%</td> <td class="cell glyph"> <!--<div class="bar bar-both" style="width: {{(row.current.pct * 100)||2"></div>-->
<span class="bar bar-both" style="width: 6.4128256513026045%"></span>
<span class="bar bar-fg" style="width: 0%"></span>
<span class="bar bar-bg" style="width: 0%"></span>
</td> </tr><tr class=""> <td class="stat">Mean</td> <td class="ng-binding">46.1</td> </tr> </tbody> </table>
</div>
</div>
<!-- ngRepeat: field in getChildren(field) -->
<br>
<div id="img-out"></div>
请提供解决方案
Please Provide Solutions
推荐答案
（function（） {
(function () {
（＃btnSave）。click（function（）{
debugger
html2canvas（
("#btnSave").click(function () { debugger html2canvas(
（＃widget），{
useCORS：true，
allowTaint：true，
onrendered：function（canvas）{
theCanvas = canvas;
document。 body.appendChild（canvas）;
//转换并下载为图片
Canvas2Image.saveAsPNG（canvas）;
("#widget"), { useCORS: true, allowTaint: true, onrendered: function (canvas) { theCanvas = canvas; document.body.appendChild(canvas); // Convert and download as image Canvas2Image.saveAsPNG(canvas);
这篇关于我想使用html2canvas捕获naviagted地图图像，但它没有显示地图其他图像显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
