图片裁剪功能模板简单实用复制粘贴即可使用 11

最新推荐文章于 2022-11-07 15:24:43 发布

(天空)

最新推荐文章于 2022-11-07 15:24:43 发布

阅读量526

点赞数 1

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/cxy9999999/article/details/107084276

版权

这篇博客介绍了如何使用JavaScript实现图片裁剪功能。首先，需要在HTML中引入cropper.css样式表和相关JS脚本。接着，定义HTML结构以创建裁剪区域，并设置美化样式。然后，配置裁剪比例和预览区域，通过DOM元素获取裁剪区域并初始化。当用户点击上传按钮时，手动触发文件选择框，限制文件类型为图片。文件选择后，更新裁剪区域的图片，并监听change事件以在用户选择文件后重新初始化裁剪。最后，裁剪完成后，调用接口将裁剪的头像上传至服务器。

摘要由CSDN通过智能技术生成

在这里插入图片描述
在 head 中导入 cropper.css 样式表：

<link rel="stylesheet" href="http://www.escook.cn:8086/assets/lib/cropper/cropper.css" />

在 body 的结束标签之前，按顺序导入如下的 js 脚本

<script src="http://www.escook.cn:8086/assets/lib/jquery.js"></script>
<script src="http://www.escook.cn:8086/assets/lib/cropper/Cropper.jss"></script>
<script src="http://www.escook.cn:8086/assets/lib/cropper/jquery-cropper.js"></script>

在主体区域中，定义如下的 HTML 结构

<!-- 第一行的图片裁剪和预览区域 -->
<div class="row1">
  <!-- 图片裁剪区域 -->
  <div class="cropper-box">
    <!-- 这个 img 标签很重要，将来会把它初始化为裁剪区域 -->
    <img id="image" src="/assets/images/sample.jpg" />
  </div>
  <!-- 图片的预览区域 -->
  <div class="preview-box">
    <div>
      <!-- 宽高为 100px 的预览区域 -->
      <div class="img-preview w100"></div>
      <p

最低0.47元/天解锁文章

(天空)

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图片裁剪功能模板简单实用复制粘贴即可使用 11

在 head 中导入 cropper.css 样式表：<link rel="stylesheet" href="http://www.escook.cn:8086/assets/lib/cropper/cropper.css" />在 body 的结束标签之前，按顺序导入如下的 js 脚本<script src="http://www.escook.cn:8086/assets/lib/jquery.js"></script><script src="h.
复制链接

扫一扫