我正在使用flask做python项目,我使用googlemapapi在项目中显示地图。我实现了html2canvas脚本来成功捕获映射。但我在地图上也有它没有捕捉到的标记。所以我试着用html2canvasPythonProxy 下面是我的模板gpsDataMap的javascript文件片段:
$(window).load(function(){
$('#saveMap').click(function(){
html2canvas(document.getElementById('map'), {
"logging": true, //Enable log (use Web Console for get Errors and Warnings)
"proxy":"/surveyApp/gpsDataMap/html2canvas-proxy",
useCORS:true,
"onrendered": function(canvas) {
var img = new Image();
img.onload = function() {
img.onload = null;
document.body.appendChild(img);
};
img.onerror = function() {
img.onerror = null;
if(window.console.log) {
window.console.log("Not loaded image from canvas.toDataURL");
} else {
alert("Not loaded image from canvas.toDataURL");
}
};
img.src = canvas.toDataURL("image/png");
}
});
});
});
以及我的python代码片段:
^{pr2}$这是我的主.py脚本:
from app import app, db
from auth import *
from admin import admin
from model import *
from view import *
from filters.user_privilege import check_privilege
from filters.form_filter import filter_type
# custom filters
app.jinja_env.filters['check_privilege'] = check_privilege
app.jinja_env.filters['filter_type'] = filter_type
from surveyApp import surveyApp_module
app.register_blueprint(surveyApp_module, url_prefix='/surveyApp')
from view.accounts.login import login_module
app.register_blueprint(login_module)
if __name__ == '__main__':
app.run(port=5555)
在这样做的同时,我的控制台中有以下内容:
html2canvas: Preload starts: finding background-images html2canvas.js:21
html2canvas: Preload: Finding images html2canvas.js:21
html2canvas: Preload: Done. html2canvas.js:21
html2canvas: start: images: 1 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 2 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 3 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 4 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 5 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 6 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 7 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 8 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 9 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 10 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 11 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 12 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 13 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 14 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 15 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 16 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 17 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 18 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 19 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 20 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 21 / 23 (failed: 0) html2canvas.js:21
html2canvas: start: images: 22 / 23 (failed: 0) html2canvas.js:21
GET http://127.0.0.1:5555/home/bhim/app/surveyApp_bhim/images/a0af53c02bd2f2aed37f1d895edcf3485117c512.png 404 (NOT FOUND) html2canvas.js:2249
html2canvas: start: images: 23 / 23 (failed: 1) html2canvas.js:21
Finished loading images: # 23 (failed: 1) html2canvas.js:21
html2canvas: Error loading background: html2canvas.js:21
html2canvas: Renderer: Canvas renderer done - returning canvas obj
更新: 调试器结果:
folder => images,
timeout => 30,
mimetype => application/javascript,
ua => Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:29.0) Gecko/20100101 Firefox/29.0,
host => 127.0.0.1:5555,
scheme => http,
ref => ,
url => http://www.google.com,
callback => console.log,
default_callback => console.log,
status => 0,
routePath => /static/images/,
savePath => /home/bhim/app/surveyApp_bhim/static/images/,
prefix => htc_,
real_extension => ,
mimes => ['image/bmp', 'image/windows-bmp', 'image/ms-bmp', 'image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'text/html', 'application/xhtml', 'application/xhtml+xml']
更新谷歌地图图片截图
标记未被捕获。在
1)使用
useCORS:true
或使用proxy
,切勿同时使用这两个。在2)您的路线不同,请参见:
virtual_path = '/gpsDataMap/images/'
@surveyApp_module.route('/gpsDataMap/html2canvas/images/<image>')
3)您的代理路由似乎是错误的(在您的Javascript中):
"proxy":"/surveyApp/gpsDataMap/html2canvas-proxy",
@surveyApp_module.route('/gpsDataMap/html2canvas-proxy')
您没有意识到所有的错误,为什么
userCORS
与“PROXY”混淆了。在修复所有路由(路由是它们的虚拟路径)并修复javascript(不要使用
userCORS:
),请参阅:看,这是一条混合了“routes”的绝对路径:
GET http://127.0.0.1:5555/home/bhim/app/surveyApp_bhim/images/a0af53c02bd2f2aed37f1d895edcf3485117c512.png 404 (NOT FOUND) html2canvas.js:2249
任何原因的代理响应路径都是错误的,请使用以下方法:
1)编辑代码,如下所示:
^{pr2}$2)在浏览器中运行:
http://127.0.0.1:5000/gpsDataMap/html2canvas-proxy?callback=console.log&url=http://www.google.com&debug_vars=1
3)获取结果并在你的任务中发布。在
保存标记(html2canvas的解决方法):
(来源1):http://humaan.com/custom-html-markers-google-maps/
(来源2):http://jsfiddle.net/BCr2B/99/
实现自己的标记很快而且非常简单,这样就可以避免被污染的问题。在
然后再加上:
^{pr2}$以这种方式导出时,地图标记将成功添加,因为它们来自本地源。在
请先试试这个可能对你有用。在
相关问题 更多 >
编程相关推荐