html2canvas遇到的坑，图片模糊，报Error loading image
生活随笔
收集整理的這篇文章主要介紹了
html2canvas遇到的坑，图片模糊，报Error loading image
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近業務上遇到需要把div的內容生成圖片，查了一下，比較好的js插件是html2canvas，
用下來也確實比較簡單，但遇到一些坑，比如生成的圖片比較模糊，或者報Error loading image?
1.一開始用的0.5.0-beta4的版本,生成的圖片很模糊，網上一大堆解決方案，但其實只要用新一點的版本就能解決問題。
2.于是我找了最新的版本下載地址v1.0.0-rc.5，雖然生成的圖片清晰了，但發現會報Error loading image 。
3.最終解決方案是用了v1.0.0-alpha.9這個版本，問題解決，圖片清晰也不報錯了。
以下是測試代碼
<html> <head> <script type="text/javascript" src="jquery-1.8.3.js"></script> <script type="text/javascript" src="html2canvas.min.js"></script> <link rel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <scriptsrc="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body><!-- 按鈕觸發模態框 --><button class="btn btn-primary btn-lg" onclick="m()">開始演示模態框</button><!-- 模態框（Modal） --><div class="modal fade" id="myModal" tabindex="-1" role="dialog"aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"aria-hidden="true">×</button><h4 class="modal-title" id="myModalLabel">模態框（Modal）標題</h4></div><div class="modal-body"><div style="background: #fff;"><div>1</div><div>2</div><div>3</div><div>4</div></div><div id="imgDiv" style="position: absolute; background: #eee;"><img id="imgId" class="imgDiv_img" src="" style="width: 100%;" /></div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">關閉</button><button type="button" class="btn btn-primary" onclick="d()">生成圖片</button></div></div><!-- /.modal-content --></div><!-- /.modal-dialog --></div><!-- /.modal --><script type="text/javascript">function m() {$("#myModal").modal("show");}function d() {html2canvas(document.querySelector("#myModal")).then(function(canvas) {var imgUri = canvas.toDataURL("image/jpeg", 1); // 獲取生成的圖片的url$(".imgDiv_img").attr("src", imgUri)})}</script> </body> </html>?
總結
以上是生活随笔為你收集整理的html2canvas遇到的坑，图片模糊，报Error loading image的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 单标签多分类+多标签单分类
- 下一篇： IMZO创建高品质免费图片库，图片可全球