• 图片裁剪


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, user-scalable=0">
        <title>canvas裁剪图片,纯前端</title>
        <script src="js/jquery.js"></script>
    </head>
    <body>
        <div>
            <input type="file" id="imgFile"></div>

        <div style=" 300px;height: 300px;position: absolute;left: 300px;top:40px;display: inline-block">
            <img id="demoImg" style="height: 300px; 300px" alt="">
            <div style=" 150px;height: 150px;border: 1px solid #4fb8e3;position: absolute;left: 0;top: 0;z-index: 1000" id="chooseBox"></div>
        </div>

        <div style="position: absolute;left: 700px;top: 0">
            <canvas id="myCan" width="150" height="150"></canvas>
            <button id="cut">裁剪文件</button>
            <button id="btn">后台返回获取裁剪后的文件</button>
            <img id="returnImg" alt=""></div>

    </body>
        <script>
            window.onload = function() {
        var can = document.getElementById("myCan");
        var btn = document.getElementById("btn");
        var returnImg = document.getElementById("returnImg");
        var ctx = can.getContext("2d");

        $('#imgFile').change(function() {
            var file = $('#imgFile')[0].files[0];

            if (!/image/w+/.test(file.type)) { //判断获取的是否为图片文件
                alert("请确保文件为图像文件");
                return false;
            }
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#demoImg').attr('src', e.target.result);
            };
            reader.readAsDataURL(file);
        });

        $('#chooseBox').mousedown(function(e) {
            var originX = e.offsetX;
            var originY = e.offsetY;
            window.onmousemove = function(e) {
                $('#chooseBox').css({
                    position: 'absolute',
                    left: e.clientX - originX - 300 + 'px',
                    top: e.clientY - originY + 'px'
                });
                if ($('#chooseBox').position().left <= 0) {
                    $('#chooseBox').css({
                        left: 0
                    });
                }
                if ($('#chooseBox').position().left >= 150) {
                    $('#chooseBox').css({
                        left: '149px'
                    });
                }
                if ($('#chooseBox').position().top <= 0) {
                    $('#chooseBox').css({
                        top: 0
                    });
                }
                if ($('#chooseBox').position().top >= 150) {
                    $('#chooseBox').css({
                        top: '149px'
                    });
                }
                $('#chooseBox').mouseout(function() {
                    window.onmousemove = null;
                    return
                })
            };
            window.onmouseup = function() {
                window.onmousemove = null;
                return
            }
        });


        $('#cut').click(function() {
            var newX = $('#chooseBox').position().left * 3.45;
            var newY = $('#chooseBox').position().top * 2.6;
            var img = document.getElementById("demoImg");
            console.log(newX, newY);
            ctx.drawImage(img, newX, newY, 150 * 3.45, 150 * 2.6, 0, 0, 150, 150);
        });

        btn.onclick = function() {
            var data = can.toDataURL();
            data = data.split(',')[1];
            data = window.atob(data);
            var ia = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                ia[i] = data.charCodeAt(i);
            }
            var blob = new Blob([ia], {
                type: "image/png",
                endings: 'transparent'
            });
            var fd = new FormData();
            console.log(blob);
            fd.append('avatarFile', blob, 'image.png');
            var httprequest = new XMLHttpRequest();
            httprequest.open('POST', '/guest/avatar', true);
            httprequest.send(fd);
            httprequest.onreadystatechange = function() {
                if (httprequest.status == 200 && httprequest.readyState == 4) {
                    console.log(httprequest.responseText);
                    $('#returnImg').attr('src', '/images/' + JSON.parse(httprequest.responseText).json);
                }
            };
        };

    }
        </script></html>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>通过filereader接口读取文件</title>
        <style>
        img { 100%; }
        </style>
    </head>

    <body>
        <p>
            <label>请选择一个文件:</label>
            <input type="file" id="imagefile" />
        </p>
        <div name="result" id="result"></div>
    </body>
        <script>
                  function readAsDataURL() {
                      var myFile = document.getElementById("imagefile");

                      if (typeof FileReader == 'undifined') //判断浏览器是否支持filereader  
                      {
                          result.innerHTML = "<p>抱歉,你的浏览器不支持 FileReader</p>";
                          return false;
                      }

                      myFile.onchange = function() {
                          var file = myFile.files[0];

                          console.log(file.type);

                          if (!/image/w+/.test(file.type)) //判断获取的是否为图片文件  
                          {
                              alert("请确保文件为图像文件");
                              return false;
                          }
                          var reader = new FileReader();
                          reader.onload = function(e) {
                              var result = document.getElementById("result");
                              result.innerHTML = '<img src="' + this.result + '" alt=""/>'
                          }
                          reader.readAsDataURL(file);
                      }

                  }
                  window.onload = readAsDataURL;
            </script>
    </html>

  • 相关阅读:
    TextView-setCompondDrawables用法
    android 相对布局RelativeLayout中的一些属性的使用和实例
    登录时旋转等待效果
    使用slidingmeu_actionbarsherlock_lib的问题和The hierarchy of the type MainActivity is inconsistent
    ActionBarSherlock SlidingMenu整合,解决SlidingMenu example的getSupportActionBar()方法不能用问题
    String,StringBuffer和StringBuilder的区别
    File.separator使用
    Android常用异步任务执行方法
    adb server is out of date. killing...
    adb shell root
  • 原文地址:https://www.cnblogs.com/Alan2016/p/7228765.html
Copyright © 2020-2023  润新知