javascript canvas 生成图片的方法

javascript canvas 生成图片的方法

先生成base64格式的图片 然后ajax传到后台 写入服务器文件夹即可

<!DOCTYPE HTML>
<html>

<body>
    <canvas id="myCanvas">
        your browser does not support the canvas tag
    </canvas>
    <script type="text/javascript">
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = '#FF0000';
    ctx.fillRect(0, 0, 80, 100);

    var data = getBase64Image();
    console.log(data);

    function getBase64Image() {
        var canvas = document.getElementById('myCanvas');
        var dataURL = canvas.toDataURL("image/png");
        return dataURL
        // return dataURL.replace("data:image/png;base64,", "");
    }
    </script>
</body>

</html>

javascript获取上传图片的大小

javascript获取上传图片的大小

<input id="file" type="file">  
<input id="Button1" type="button" value="button" onclick="check()">  
<script>  
window.check=function(){  
var input = document.getElementById("file");  
if(input.files){  
                //读取图片数据  
  var f = input.files[0];  
  var reader = new FileReader();  
  reader.onload = function (e) {  
      var data = e.target.result;  
      //加载图片获取图片真实宽度和高度  
      var image = new Image();  
      image.onload=function(){  
          var width = image.width;  
          var height = image.height;  
          alert(width+'======'+height+"====="+f.size);  
      };  
      image.src= data;  
  };  
      reader.readAsDataURL(f);  
  }else{  
      var image = new Image();   
      image.onload =function(){  
          var width = image.width;  
          var height = image.height;  
          var fileSize = image.fileSize;  
          alert(width+'======'+height+"====="+fileSize);  
      }  
      image.src = input.value;  
  }  
}  
</script>  

javascript iframe跳转问题

javascript iframe跳转问题
如果在iframe里面有要点击跳转最外层的连接 要只能用

  <div onclick="parent.location.href='/home/fwef/wef.html'" class="bianjibtn">编辑</div>

用a标签实现 iframe 的链接跳转

<!DOCTYPE html>
<html>
<body>

<iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe>

<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

<p><b>注释:</b>由于链接的目标匹配 iframe 的名称,所以链接会在 iframe 中打开。</p>

</body>
</html>

另外说下 iframe之间session和cookie不能共享 所以只能用url后缀来判断了

javascript高德地图放到网页中的方法

javascript高德地图放到网页中的方法

1 先获取到经纬度
http://lbs.amap.com/console/show/picker

2 下面代码直接设置下中心点 和标记点就可以了

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>点标记</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <style>
        .marker {
            color: #ff6600;
            padding: 4px 10px;
            border: 1px solid #fff;
            white-space: nowrap;
            font-size: 12px;
            font-family: "";
            background-color: #0066ff;
        }
    </style>
    <script src="http://webapi.amap.com/maps?v=1.3&key=输入key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>

<script>
    var marker, map = new AMap.Map("container", {
        resizeEnable: true,
        center: [123.17699, 33.21674],
        zoom: 16
    });
    marker = new AMap.Marker({
        icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        position: [123.17699, 33.21674]
    });
    marker.setMap(map);

</script>
</body>
</html>

javascript判断碰撞检测

javascript判断碰撞检测

点与矩形的碰撞检测

 /**
     *
     * @param x1 点
     * @param y1 点
     * @param x2 矩形view x
     * @param y2 矩形view y
     * @param w  矩形view 宽
     * @param h  矩形view 高
     * @return
     */
    function isCollsion(x1,y1,x2,y2,w,h) {
        if (x1 >= x2 && x1 <= x2 + w && y1 >= y2 && y1 <= y2 + h) {
            console.log('碰撞');
            return true;
        }
        console.log('没碰撞');
        return false;
    }

矩形与矩形的碰撞检测

 /**
     * 检测两个矩形是否碰撞
     * @param x1  矩形1view x
     * @param y1  矩形1view y
     * @param w1  矩形1view 宽
     * @param h1  矩形1view 高
     * @param x2  矩形2view x
     * @param y2  矩形2view y
     * @param w2  矩形2view 宽
     * @param h2  矩形2view 高
     * @return
     */
        function isCollsionWithRect(x1,y1,w1,h1,x2,y2,w2,h2) {
        if (x1 >= x2 && x1 >= x2 + w2) {
            console.log('没碰撞');
            return false;
        } else if (x1 <= x2 && x1 + w1 <= x2) {
            console.log('没碰撞');
            return false;
        } else if (y1 >= y2 && y1 >= y2 + h2) {
            console.log('没碰撞');
            return false;
        } else if (y1 <= y2 && y1 + h1 <= y2) {
            console.log('没碰撞');
            return false;
        }
        console.log('碰撞');
        return true;
    }