1

html2canvas を使用して生成された画像を保存しようとしたときに、このエラー メッセージが表示されました。

だから私はこのコードを書きました：

<div id"mycanvas">
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    <div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    <div id="container3" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</div>

 </page> 


<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
    </script>

レンダリングされた画像がキャッシュにあり、html2canvas を使用して生成された場合でも、保存する方法がわかりません。

このコードは間違っていないようですが、このエラー メッセージが表示されます。

だから私は少し迷っています。

エラーメッセージは次のとおりです。

Uncaught TypeError: Cannot call method 'toDataURL' of null export-graphic-stat_employee.php:241
html2canvas: Preload starts: finding background-images Core.js:18
html2canvas: Preload: Finding images Core.js:18
html2canvas: Preload: Done. Core.js:18
html2canvas: start: images: 0 / 0 (failed: 0) Core.js:18
Finished loading images: # 0 (failed: 0) Core.js:18
html2canvas: Renderer: Canvas renderer done - returning canvas obj Core.js:18
Screenshot created in 167 ms<br /> Core.js:18

最大限の敬意を表します。

敬具。

SP

4

1 に答える 1

4

ここには等号がありません。

<div id"mycanvas">

...つまり、あなたの...

document.getElementById("mycanvas");

null を返します。

エラーメッセージが表示されるのは呼び出しnull.toDataURL("image/png");です。

編集:実際に toDataURL を使用する場合、そのメソッドは実際のキャンバス要素でのみ機能し、div. 代わりに、 の id を削除してdiv追加します。

<canvas id="mycanvas" width="400" height="400" > </canvas>

または、HTML2Canvas によって生成されたキャンバスの実際のキャンバス ID を使用して、実際のキャンバス要素を操作します。

于 2012-09-14T08:41:39.833 に答える