Fatal编程技术网

Javascript 与html2canvas的混淆

javascript html image maps

Javascript 与html2canvas的混淆,javascript,html,image,maps,html2canvas,Javascript,Html,Image,Maps,Html2canvas,我有一个相当简单的javascript/html代码。我想用“id=mapDiv”保存div，它将地图显示为图像（jpg或png）。我在html文件的根目录中有'jquery-1.11.0.js'和'html2canvas.js'文件。我对HTML/Javascript缺乏经验，无法理解人们以前发布的一些解决方案。任何帮助都将不胜感激。谢谢 这是我的密码： <html> <head> <title></title> <meta

我有一个相当简单的javascript/html代码。我想用“id=mapDiv”保存div，它将地图显示为图像（jpg或png）。我在html文件的根目录中有'jquery-1.11.0.js'和'html2canvas.js'文件。我对HTML/Javascript缺乏经验，无法理解人们以前发布的一些解决方案。任何帮助都将不胜感激。谢谢

这是我的密码：

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

        <script type="text/javascript">

            function GetMap()
            {

                var lat1 = document.getElementById("lat1").value;
                var lon1 = document.getElementById("lon1").value;

                var lat2 = document.getElementById("lat2").value;
                var lon2 = document.getElementById("lon2").value;

                // Initialize the map


                var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"At7RkDItXU6kncQzZa8M9lFfMbzPgmulJYLkhYn5JMMZfHL86lNyFZvGWWngxaAP",
                                                 bounds:new Microsoft.Maps.LocationRect.fromCorners(new Microsoft.Maps.Location(lat1, lon1), new Microsoft.Maps.Location(lat2, lon2)),
                                                 zoom: 20,
                                                 mapTypeId: Microsoft.Maps.MapTypeId.aerial,
                                                 disableZooming: true,
                                                 showCopyright: false,
                                                 showDashboard: false,
                                                 enableClickableLogo: false,
                                                 });

                try
                {
                    // Create the tile layer source
                    var tileSource = new Microsoft.Maps.TileSource({uriConstructor: 'http://www.microsoft.com/maps/isdk/ajax/layers/lidar/{quadkey}.png'});

                    // Construct the layer using the tile source
                    var tilelayer= new Microsoft.Maps.TileLayer({ mercator: tileSource, opacity: .7 });

                    // Push the tile layer to the map
                    map.entities.push(tilelayer);





                    // Disable mouse click and pan map
                    Microsoft.Maps.Events.addHandler(map, 'mousedown', function (mouseEvent) {
                    mouseEvent.handled = true; 
                    }); 

                    // Calculating distance between two points
                    function toRad(Value) {
                    return Value * Math.PI / 180;}

                    // Calculate vertical distance
                    var vR = 6371; // km
                    var vdLat = toRad(lat2-lat1);
                    var vdLon = toRad(lon1-lon1);
                    var vrlat1 = toRad(lat1);
                    var vrlat2 = toRad(lat2);

                    var va = Math.sin(vdLat/2) * Math.sin(vdLat/2) +
                    Math.sin(vdLon/2) * Math.sin(vdLon/2) * Math.cos(vrlat1) * Math.cos(vrlat2); 
                    var vc = 2 * Math.atan2(Math.sqrt(va), Math.sqrt(1-va)); 
                    var vd = vR * vc;   

                    //Calculate horizontal distance
                    var hR = 6371; // km
                    var hdLat = toRad(lat1-lat1);
                    var hdLon = toRad(lon2-lon1);
                    var hrlat1 = toRad(lat1);
                    var hrlat2 = toRad(lat1);

                    var ha = Math.sin(hdLat/2) * Math.sin(hdLat/2) +
                    Math.sin(hdLon/2) * Math.sin(hdLon/2) * Math.cos(hrlat1) * Math.cos(hrlat2); 
                    var hc = 2 * Math.atan2(Math.sqrt(ha), Math.sqrt(1-ha)); 
                    var hd = hR * hc;

                    alert(' Horizontal Distance = ' + hd + '\n Vertical Distance = ' + vd);

                }
                catch(err)
                {
                    alert( 'Error Message:' + err.message);
                }
            }

            </script>

            <script type="text/javascript" src="html2canvas.js"></script>
            <script type="text/javascript" src="jquery-1.11.0.js"></script>

            <script type="text/javascript">
                    $(document).ready(function() {
                    var target = $('div');
                    html2canvas(target, {
                    onrendered: function(canvas) {
                    var data = canvas.toDataURL();
                    var myImage = canvas.toDataURL("image\png");
                    window.open(myImage);
                    //alert(data);
                    //data is the Base64-encoded image
                    }
                    });
                    });
            </script> 


        </head>

<body onload="GetMap();">
<body bgcolor="#9FB6CD">
    <center>
        <h1>Enter Coordinates</h1>
        </br>
        <h3>Input points</h3>
        Coordinate1 (upper-left):
        </br>
        latitude 1: <input type="text" id="lat1" value="55"><br>
        Longitude 1: <input type="text" id="lon1" value="135"><br>
        Coordinate 2 (lower-right):
        </br>
        latitude 2: <input type="text" id="lat2" value="54.98"><br>
        Longitude 2: <input type="text" id="lon2"value="135.02"><br>
        <input type="submit" value="submit" onclick="GetMap()">

    <div id='mapDiv' typename="mapDiv" style="position:relative; width:500px; height:500px;"></div>

    <script>
        $('#mapDiv div.mapDiv').trigger($.event('click'));
    </script>
    </center>
</body>
</html>


函数GetMap（）
{
var lat1=document.getElementById（“lat1”）.value；
var lon1=document.getElementById（“lon1”）.value；
var lat2=document.getElementById（“lat2”）.value；
var lon2=document.getElementById（“lon2”）.value；
//初始化映射
var map=new Microsoft.Maps.map（document.getElementById（“mapDiv”），{凭证：“at7rkditxu6kncqzza8m9lffmbzpgmuljylkhyn5jmmzffl86lnyfzvgwngxaap”，
边界：新建Microsoft.Maps.LocationRect.fromCorners（新建Microsoft.Maps.Location（lat1，lon1），新建Microsoft.Maps.Location（lat2，lon2）），
缩放：20，
mapTypeId:Microsoft.Maps.mapTypeId.Aeror，
禁用缩放：对，
版权所有：假，
showDashboard:false，
enableClickableLogo:false，
});
尝试
{
//创建平铺层源
var tileSource=new Microsoft.Maps.tileSource（{uriConstructor:'http://www.microsoft.com/maps/isdk/ajax/layers/lidar/{quadkey}.png'}）；
//使用平铺源构建层
var tilelayer=new Microsoft.Maps.tilelayer（{mercator:tileSource，不透明度：.7}）；
//将平铺层推送到地图上
map.entities.push（tilelayer）；
//禁用鼠标单击和平移贴图
Microsoft.Maps.Events.addHandler（映射'mousedown'，函数（mouseEvent）{
mouseEvent.handled=true；
}); 
//计算两点之间的距离
函数toRad（值）{
返回值*Math.PI/180；}
//计算垂直距离
var vR=6371；//公里
var vdLat=toRad（lat2-lat1）；
var vdLon=toRad（lon1-lon1）；
var vrlat1=toRad（lat1）；
var vrlat2=toRad（lat2）；
var va=数学sin（vdLat/2）*数学sin（vdLat/2）+
数学sin（vdLon/2）*数学sin（vdLon/2）*数学cos（vrlat1）*数学cos（vrlat2）；
var vc=2*Math.atan2（Math.sqrt（va），Math.sqrt（1-va））；
var vd=vR*vc；
//计算水平距离
var hR=6371；//km
var hdLat=toRad（lat1-lat1）；
var hdLon=toRad（lon2-lon1）；
var hrlat1=toRad（lat1）；
var hrlat2=toRad（lat1）；
var ha=数学sin（hdLat/2）*数学sin（hdLat/2）+
数学sin（hdLon/2）*数学sin（hdLon/2）*数学cos（hrlat1）*数学cos（hrlat2）；
var hc=2*Math.atan2（Math.sqrt（ha），Math.sqrt（1-ha））；
var hd=hR*hc；
警报（‘水平距离=’+hd+’\n垂直距离=’+vd）；
}
捕捉（错误）
{
警报（“错误消息：”+错误消息）；
}
}
$（文档）.ready（函数（）{
var目标=$（'div'）；
html2canvas（目标{
onrendered：函数（画布）{
var data=canvas.toDataURL（）；
var myImage=canvas.toDataURL（“image\png”）；
窗口打开（myImage）；
//警报（数据）；
//数据是Base64编码的图像
}
});
});
输入坐标


输入点
坐标1（左上角）：


纬度1:

经度1:

坐标2（右下角）：


纬度2:

经度2:

$（'#mapDiv div.mapDiv'）。触发器（$.event（'click'））；
如果您想将图像从画布保存为某种图像格式，这里有一些帮助。希望这能帮到你

$(document).ready(function() {

    html2canvas(document.getElementById('mapDiv'), {
            onrendered: function(canvas) {
                var cs = new CanvasSaver('save_img.php',canvas,'myimage')
            }
        });

});
下面是CanvasSaver（）函数的定义，它有三个参数：一个是php文件，它将图像从原始日期处理为某种图像格式。我将在这个脚本部分编写“save_img.php”代码，并将该文件保存在根目录中

function CanvasSaver(url, cnvs, fname) {

    this.url = url;

    if(!cnvs || !url) return;
    fname = fname || 'picture';

    var data = cnvs.toDataURL("image/png");
    data = data.substr(data.indexOf(',') + 1).toString();

    var dataInput = document.createElement("input") ;
    dataInput.setAttribute("name", 'imgdata') ;
    dataInput.setAttribute("value", data);
    dataInput.setAttribute("type", "hidden");

    var nameInput = document.createElement("input") ;
    nameInput.setAttribute("name", 'name') ;
    nameInput.setAttribute("value", fname + '.jpg');

    var myForm = document.createElement("form");
    myForm.method = 'post';
    myForm.action = url;
    myForm.appendChild(dataInput);
    myForm.appendChild(nameInput);

    document.body.appendChild(myForm) ;
    myForm.submit() ;
    document.body.removeChild(myForm) ;

}

<?php
    # we are a PNG image
    header('Content-type: image/png');

    # we are an attachment (eg download), and we have a name
    header('Content-Disposition: attachment; filename="' . $_POST['name'] .'"');

    #capture, replace any spaces w/ plusses, and decode
    $encoded = $_POST['imgdata'];
    $encoded = str_replace(' ', '+', $encoded);
    $decoded = base64_decode($encoded);

    #write decoded data
    echo $decoded;
?>
在上面的脚本中，无论您想从浏览器中保存什么图像格式，请在上面的脚本函数中指定该图像扩展名

nameInput.setAttribute("value", fname + '.jpg');
下面是“save_img.php”的代码，并将其保存在根目录中

function CanvasSaver(url, cnvs, fname) {

    this.url = url;

    if(!cnvs || !url) return;
    fname = fname || 'picture';

    var data = cnvs.toDataURL("image/png");
    data = data.substr(data.indexOf(',') + 1).toString();

    var dataInput = document.createElement("input") ;
    dataInput.setAttribute("name", 'imgdata') ;
    dataInput.setAttribute("value", data);
    dataInput.setAttribute("type", "hidden");

    var nameInput = document.createElement("input") ;
    nameInput.setAttribute("name", 'name') ;
    nameInput.setAttribute("value", fname + '.jpg');

    var myForm = document.createElement("form");
    myForm.method = 'post';
    myForm.action = url;
    myForm.appendChild(dataInput);
    myForm.appendChild(nameInput);

    document.body.appendChild(myForm) ;
    myForm.submit() ;
    document.body.removeChild(myForm) ;

}

<?php
    # we are a PNG image
    header('Content-type: image/png');

    # we are an attachment (eg download), and we have a name
    header('Content-Disposition: attachment; filename="' . $_POST['name'] .'"');

    #capture, replace any spaces w/ plusses, and decode
    $encoded = $_POST['imgdata'];
    $encoded = str_replace(' ', '+', $encoded);
    $decoded = base64_decode($encoded);

    #write decoded data
    echo $decoded;
?>