基于HTML实现本地图片裁剪

这篇博客介绍了如何使用HTML5的canvas技术和FileAPI来实现在浏览器中对本地图片进行裁剪。首先创建HTML文件和CSS样式,设置好图片预览区域和裁剪框。然后通过FileReader读取用户上传的图片,并在canvas上绘制。接着实现拖动裁剪框以调整裁剪区域,并在用户保存时,将裁剪后的图片绘制到新的canvas上,转换为base64编码显示在预览框中。整个过程详细讲解了图片裁剪的实现步骤,包括图片等比例缩放、裁剪区域的移动和调整、以及裁剪结果的保存。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML5 有很多好玩的特性,本实验利用 HTML5 的 canvas 技术,结合 HTML5 的 File API 来实现图片的本地裁剪,从一个大图片中选取裁剪区域,保存等功能。

1.创建HTML文件和CSS样式

在本demo中,前端样式做的较为简单,所以二者写在了一个文件中。
index.html

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Crop Image</title>
  </head>
  <style type="text/css">
    body {
      text-align: center;
    }
    #label {
      border: 1px solid #ccc;
      background-color: #fff;
      text-align: center;
      height: 300px;
      width: 300px;
      margin: 20px auto;
      position: relative;
    }
    #get_image {
      position: absolute;
    }
    #edit_pic {
      position: absolute;
      display: none;
      background: #000;
    }
    #cover_box {
      position: absolute;
      z-index: 9999;
      display: none;
      top: 0px;
      left: 0px;
    }
    #show_edit {
      margin: 0 auto;
      display: inline-block;
    }
    #show_pic {
      height: 100px;
      width: 100px;
      border: 2px solid #000;
      overflow: hidden;
      margin: 0 auto;
      display: inline-block;
    }
  </style>
  <body>
    <input type="file" name="file" id="post_file" />
    <button id="save_button">SAVE</button>
    <div id="label">
      <canvas id="get_image"></canvas>
      <p>
        <canvas id="cover_box"></canvas>
        <canvas id="edit_pic"></canvas>
      </p>
    </div>
    <p>
      <span id="show_edit"></span>
      <span id="show_pic"><img src="" /></span>
    </p>
    <script type="text/javascript" src="main.js"></script>
  </body>
</html>

2.具体实现

var postFile = {
  init: function () {
    var t = this;
    t.regional = document.getElementById('label');
    t.getImage = document.getElementById('get_image');
    t.editPic = document.getElementById('edit_pic');
    t.editBox = document.getElementById('cover_box');
    t.px = 0; //background image x
    t.py = 0; //background image y
    t.sx = 15; //crop area x
    t.sy = 15; //crop area y
    t.sHeight = 150; //crop area height
    t.sWidth = 150; //crop area width
    document
      .getElementById('post_file')
      .addEventListener('change', t.handleFiles, false);
  },
};

我们所有的函数和变量都是封装在postFile这个对象里面的,上面的 init 函数主要是设置一些初始值。

t.px = 0;
t.py = 0;
t.sx = 15;
t.sy = 15;
t.sHeight = 100;
t.sWidth = 100;

以上的t.px, t.py分别表示在实时预览区域的背景图片的坐标;t.sx,t.sy, t.sHeight, t.sWidth分别表示图片的横纵坐标和宽高。

并且我们通过document.getElementById获取了多个稍后需要操作的元素,注意到:

document
  .getElementById('post_file')
  .addEventListener('change', t.handleFiles, false);

我们通过监听id为post_file的input表单的change事件来处理用户上传的文件,在这我们交给了handleFiles函数来处理,所以下面我们就来实现handleFiles函数。

 handleFiles: function() {
        var fileList = this.files[0];
        var oFReader = new FileReader();
        oFReader.readAsDataURL(fileList);
        oFReader.onload = function (oFREvent) {
            postFile.paintImage(oFREvent.target.result);
        };
    },

上面这几行代码就可以基本实现handleFiles的处理功能,我们在这里就使用了 HTML5 的 File API,首先通过new FileReader()来实例化一个 FileReader 对象oFReader,再调用其readAsDataURL()方法将文件的内容读取出来并处理成 base64 编码的格式。

最后,当文件读取完毕并完成加载的时候,我们通过 postFile.paintImage(oFREvent.target.result)处理我们读取到的图片,就是将读取到的图片数据重新绘画到浏览器上。

 paintImage: function(url) {
        var t = this;
        var createCanvas = t.getImage.getContext("2d");
        var img = new Image();
        img.src = url;
        img.onload = function(){

            if ( img.width < t.regional.offsetWidth && img.height < t.regional.offsetHeight) {
                t.imgWidth = img.width;
                t.imgHeight = img.height;

            } else {
                var pWidth = img.width / (img.height / t.regional.offsetHeight);
                var pHeight = img.height / (img.width / t.regional.offsetWidth);
                t.imgWidth = img.width > img.height ? t.regional.offsetWidth : pWidth;
                t.imgHeight = img.height > img.width ? t.regional.offsetHeight : pHeight;
            }
            t.px = (t.regional.offsetWidth - t.imgWidth) / 2 + 'px';
            t.py = (t.regional.offsetHeight - t.imgHeight) / 2 + 'px';

            t.getImage.height = t.imgHeight;
            t.getImage.width = t.imgWidth;
            t.getImage.style.left = t.px;
            t.getImage.style.top = t.py;

            createCanvas.drawImage(img,0,0,t.imgWidth,t.imgHeight);
            t.imgUrl = t.getImage.toDataURL();
            t.cutImage();
            t.drag();
        };
    },
```以上最重要的就是根据容器的大小使用 canvas 绘制图片。在上一步使用 File API 的 FileReader 已经得到了需要上传图片的地址了(oFREvent.target.result 这个值),接下来需要使用 canvas 把这个图片绘制出来。我们首先使用到 getImage.getContext 来获取<canvas id="get_image"></canvas>的 2d 内容,简单理解就是图像内容,然后利用 new Image()来得到一个<img>标签,设置 src 属性的值。

```javascript
<img src="images/background.png" />

在img.onload函数里,我们的主要目的是为了将图片按照原大小等比例地重画出来,所以才有 if 条件判断,最后我们通过createCanvas.drawImage(img,0,0,t.imgWidth,t.imgHeight);这一行代码来实现真正的绘画图片。

使用 canvas 的clearRect方法清空出一块裁剪区域,使之与不裁剪的地方做明暗对比,这样的目的一个是为了更好地看到对比,一个就是为了用户体验。

cutImage: function() {
    var t = this;

    t.editBox.height = t.imgHeight;
    t.editBox.width = t.imgWidth;
    t.editBox.style.display = 'block';
    t.editBox.style.left = t.px;
    t.editBox.style.top = t.py;

    var cover = t.editBox.getContext("2d");
    cover.fillStyle = "rgba(0, 0, 0, 0.5)";
    cover.fillRect (0,0, t.imgWidth, t.imgHeight);
    cover.clearRect(t.sx, t.sy, t.sHeight, t.sWidth);


    document.getElementById('show_edit').style.background = 'url(' + t.imgUrl + ')' + -t.sx + 'px ' + -t.sy + 'px no-repeat';
    document.getElementById('show_edit').style.height = t.sHeight + 'px';
    document.getElementById('show_edit').style.width = t.sWidth + 'px';
},

在很多 web 应用中,使用截图上传头像功能时我们希望能裁剪到满意的图片,所以裁剪框就需要不停的变动才得以裁剪出完美的图片。前几步已经把裁剪图片的基本功能做出来了,所以现在需要做的就是裁剪框跟进鼠标的移动来实时裁剪图片。

 drag: function() {
        var t = this;
        var draging = false;
        var startX = 0;
        var startY = 0;

        document.getElementById('cover_box').onmousemove = function(e) {


            var pageX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
            var pageY = e.pageY - ( t.regional.offsetTop + this.offsetTop );

            if ( pageX > t.sx && pageX < t.sx + t.sWidth && pageY > t.sy && pageY < t.sy + t.sHeight ) {
                this.style.cursor = 'move';

                this.onmousedown = function(){
                    draging = true;

                    t.ex = t.sx;
                    t.ey = t.sy;


                    startX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
                    startY = e.pageY - ( t.regional.offsetTop + this.offsetTop );

                }
                window.onmouseup = function() {
                    draging = false;
                }

                if (draging) {


                    if ( t.ex + (pageX - startX) < 0 ) {
                        t.sx = 0;
                    } else if ( t.ex + (pageX - startX) + t.sWidth > t.imgWidth) {
                        t.sx = t.imgWidth - t.sWidth;
                    } else {
                        t.sx = t.ex + (pageX - startX);
                    };

                    if (t.ey + (pageY - startY) < 0) {
                        t.sy = 0;
                    } else if ( t.ey + (pageY - startY) + t.sHeight > t.imgHeight ) {
                        t.sy = t.imgHeight - t.sHeight;
                    } else {
                        t.sy = t.ey + (pageY - startY);
                    }

                    t.cutImage();
                }
            } else{
                this.style.cursor = 'auto';
            }
        };
    }

从一开始,我们就有一个save按钮在页面上,我们的目的就是在用户点击 save 按钮的时候,将裁剪出来的图片保存到预览右边的方框内,预览框并不是真正的截图,鼠标右键点击是不能保存的,点击 Save 后产生的图片才是可以保存的。于是,我们在 init 方法里面添加下面的代码。

document.getElementById('save_button').onclick = function () {
  t.editPic.height = t.sHeight;
  t.editPic.width = t.sWidth;
  var ctx = t.editPic.getContext('2d');
  var images = new Image();
  images.src = t.imgUrl;

  images.onload = function () {
    ctx.drawImage(
      images,
      t.sx,
      t.sy,
      t.sHeight,
      t.sWidth,
      0,
      0,
      t.sHeight,
      t.sWidth
    );
    document
      .getElementById('show_pic')
      .getElementsByTagName('img')[0].src = t.editPic.toDataURL();
  };
};

跟实现paintImage方法类似,首先监听 save 按钮的点击事件,然后我们将选中区域的图片利用drawImage方法绘制出来,最后利用toDataURL方法转换成 base64 编码格式,并将该值赋予show_pic下img的src属性,这样就完成了图片的裁剪保存。

jieshu.

<think>好的,我现在需要分析用户提供的这段JavaScript代码,并解释它的功能。首先,我会通读代码,理解每个部分的作用。 这段代码定义了一个名为getQ的函数。函数一开始获取了user_nickname输入框的值,存储在userid变量中。如果userid是null或undefined,函数返回false。否则,发起一个AJAX POST请求到../services/Qxgl.ashx,传递action和id参数。请求头里有一个Authorization令牌,看起来像是某种认证信息。 成功回调函数处理返回的msg数据,遍历msg.ds数组,对每个item,通过typeid设置对应的复选框为选中状态。然后收集所有选中的复选框的值,用逗号拼接后去掉最后一个逗号,将结果填入typename输入框。 接下来,我需要确认各个部分的细节是否正确。例如,检查jQuery选择器是否正确,AJAX调用的参数是否合理,以及数据处理是否有潜在错误。比如,$.each遍历msg.ds是否正确,假设msg.ds是一个数组。另外,拼接结果时使用substring去除末尾逗号是否可靠,是否有更稳妥的方法。 还要注意可能的安全问题,比如硬编码的Authorization头,这可能存在安全风险,但用户可能已经处理了。此外,用户权限验证是否在服务端进行,这里只是前端控制,需提醒用户不能仅依赖前端验证。 最后,将这些分析整理成结构清晰的解释,分步骤说明代码的功能和潜在注意事项,确保用户能够理解每个部分的作用及可能的改进点。</think>这是一个典型的基于jQuery的AJAX请求实现,主要用于获取并设置用户权限信息。让我们分步骤解析这个函数的功能: 1. **函数定义与用户ID获取** ```javascript var getQ = function () { var userid = $('#user_nickname').val(); // 获取用户输入框的值 ``` 2. **空值校验** ```javascript if (userid == null || userid == undefined) { // 验证用户ID有效性 return false; } ``` 3. **AJAX请求配置** ```javascript $.ajax({ type: "POST", // 使用POST方法 url: "../services/Qxgl.ashx", // 后端接口地址 headers: { // 请求头认证信息 "Authorization": "0772A4AA051DDEBB393DC164B19A32E57C4FEEAB27A77820" }, ``` 4. **请求参数传递** ```javascript data: { action: "getQ", // 执行动作类型 id: userid // 传递用户ID参数 }, ``` 5. **成功回调处理** ```javascript success: function (msg) { // 遍历返回数据集 $.each(msg.ds, function (index, item) { // 根据typeid勾选对应复选框 $('#a' + item.typeid).attr("checked", true); }) // 拼接选中值 var result = ""; $("input[name='select_checkbox']:checked").each(function () { result += $(this).val() + ','; }); // 去除末尾逗号 if (result != "") { result = result.substring(0, result.lastIndexOf(',')); } // 填充到显示框 $("#typename").val(result); } ``` **功能总结**: - 这是一个用户权限查询功能 - 通过用户输入的用户名查询关联的权限配置 - 将查询结果转换为复选框勾选状态 - 汇总选中权限显示在文本框中 **潜在注意事项**: 1. 硬编码的`Authorization`头存在安全风险,建议动态生成 2. 缺少错误处理逻辑(error回调) 3. 使用字符串拼接处理结果可以考虑改用`Array.join()` 4. 权限控制不能仅依赖前端验证,必须配套后端验证 5. 对`msg.ds`的数据结构有强依赖,建议增加数据校验 6. 建议使用`.prop()`代替`.attr()`操作复选框状态
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

picacho_pkq

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值