使用cropper.js 实现简单的头像裁剪上传

最新推荐文章于 2024-03-07 11:10:13 发布
VIP文章 最新推荐文章于 2024-03-07 11:10:13 发布
阅读量6.3k 收藏 7
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljt123456765/article/details/79716260
版权

最近项目中用到了头像上传功能，于是找了好久找到了cropper.js,简单做个小例子,话不多说直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Cropper.js</title>
    <link rel="stylesheet" href="../dist/cropper.css">
    <style>
        .container{
            width:500px;
            height:500px;
            border:1px solid #000;
            float: left;
        }
        .preview{
            width: 200px;
            height: 200px;
            float: left;
            border:1px solid #000;
            margin-left: 100px;
        }
        button{
            width: 100px;
            height: 30px;
            margin-top: 30px;
            margin-left: 150px;
        }
    </style>
</head>

<body>
    <div class="container">
        <input type="file" id="file">
        <img src="" alt="" id="img">
    </div>
    <div class="preview">
         <img src="" alt="" id="imga">
    </div>
    <button>上传图片</button>

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="../dist/cropper.js"></script>
    <script>
        var image = document.getElementById('img');
        var cropper, canvas;
        $('#file').change(function(e){
            var file;
            var files = e.target.files;
             if (files && files.length > 0) {
                file = URL.createObjectURL(files[0]);
                $('#img').attr({'src': file})
            }
             cropper = new Cropper(image, {
                aspectRatio: 1,
                viewMode: 1,
                background: false,  //是否显示网格背景
                zoomable: false,   //是否允许放大图像
                guides: false,   //是否显示裁剪框虚线
                crop: function (event) { //剪裁框发生变化执行的函数。
                    canvas = cropper.getCroppedCanvas({  //使用canvas绘制一个宽和高200的图片
                        width: 200,
最低0.47元/天 解锁文章
木子_L
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Cropper使用（图片裁切）
Crush_a的博客
05-16 764
1.安装包 npm install cropperjs 2.在使用的页面导入cropper js和css import 'cropperjs/dist/cropper.css'; import Cropper from 'cropperjs'; 3.基础配置,详细配置前往GitHub const image = document.getElementById('image'); const cropper = new Cropper(image, { viewMode: 1, dragMode:
cropper.js 制作头像/图片上传、裁剪、并发送至后端-javascript
06-21
cropper.js 制作头像/图片上传、裁剪、并发送至后端 Cropper.js JavaScript 图像裁剪器。 网站照片编辑器 - Cropper.js 的高级示例。 jquery-cropper - Cropper.js 的 jQuery 插件包装器。 目录 功能 主要入门 选项 方法 事件 无冲突 浏览器支持 Contributing Versioning 许可证功能 支持 39 个选项 支持 27 种方法 支持 6 个事件 支持触摸（移动） 支持缩放 支持旋转 支持缩放（翻转） 支持多个裁剪器 支持在画布上裁剪支持在浏览器端通过canvas裁剪图片 支持翻译Exif 方向信息 跨浏览器支持 Main dist/ ├──cropper.css ├──cropper.min.css (compressed) ├──cropper.js (UMD) ) ├──cropper.min.js (UMD，压缩) ├──cropper.common.js (CommonJS，默认) └──cropper.esm.js (ES 模块) 入门安装 npm installcropper
图片裁切器Cropper.js的使用
李公子的博客
09-24 1733
cropperjs是一款非常强大却又简单的图片裁剪工具，它可以进行非常灵活的配置，支持手机端使用，支持包括IE9以上的现代浏览器。 支持 39 个选项 支持27种方法 支持6个事件 支持触摸（移动） 支持缩放 支持旋转 支持缩放（翻转） 支持多种作物 支持在画布上裁剪 支持通过画布在浏览器端裁剪图像 支持翻译 Exif 方向信息 跨浏览器支持 官方github文档：https://github.com/fengyuanchen/cropperjs 使用方法 ...
Vue 图片裁剪插件cropperJs
最新发布
weixin_53035812的博客
03-07 436
【代码】Vue 图片裁剪插件cropperJs。
玩转cropperjs图片裁剪及数据提交文件流互相转换详解
aigouzz的专栏
12-13 690
cropperjs的主要功能是图片裁剪，是一款前端常用的的图片裁剪工具，可根据相关api配置裁剪出符合自己业务需要的图片，具体使用如下：1:npm 引用2:业务中引入3:文件中单独引入方式4:初始化图片裁剪配置项如果将viewMode设置为0，裁剪框可以延伸到画布之外，而值为1、2或3将裁剪框限制为画布的大小。viewMode为2或3将额外将画布限制为容器。当画布和容器的比例相同时，2和3之间没有差异。
cropper.js插件裁剪图片
qq_45923342的博客
12-24 467
1.先导入插件需要的依赖 2.html结构，效果如下 3.js代码 const image = document.getElementById("image"); const cropper = new Cropper(image, { aspectRatio: 1, viewMode: 1, //图片的预览区，即100*100 50*50那两张图片区域 preview: $(".img-preview") }); ...
基于layui+cropper.js实现图片上传剪裁功能-附件资源
03-02
基于layui+cropper.js实现图片上传剪裁功能-附件资源
cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像
06-12
使用cropper.js裁剪图片，通过canvas获取裁剪后的图片，获取的是base64图片上传。
基于 cropper.js 实现 前端图片裁剪、放大、缩小、移动 支持移动端和PC端
07-11
基于 cropper.js h5（移动端）裁剪、放大、缩小、移动，图片的案例
Cropper.js 实现裁剪图片并上传(PC端)
12-01
由于之前做项目的时候有需求是需要实现裁剪图片来做头像并上传到服务器，所以上网查询了很多资料，也试用了许多案例，发现cropper插件裁剪是比较完善的，所以结合之前的使用情况，编写了此案例。本案例是参考cropper...
cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像。)
热门推荐
qq727013465的专栏
07-04 16万+
我的需求功能：在手机端实现上传头像，带裁剪框。 cropper.js 通过canvas实现图片裁剪，最后在通过canvas获取裁剪区域的图片base64串。 cropper 文档：官方文档是全英文的，好吧我看不懂。只能一个个试试效果，就有了下面的总结。官方文档&lt;-点这 1.container 容器 2.canvas 图片 3.crop 裁剪框 option相...
cropper左右移动_移动端cropper.js上传图片、裁剪
weixin_32784349的博客
02-15 239
先引入CSS结构部分 data-option="{ "width": 200, "height": 180}" >确认取消JSvar fileImg = "";$(function () {$(".imgCutConfirm").bind("click", function () {$(".containerDiv").hide();$(".imgEdit").hi...
image cropper java_图片裁切上传插件cropper的使用
weixin_39596090的博客
02-23 147
图片上传格式一般是文件格式和base64格式，比较方便的是图片格式，后台可以方便的处理上传的图片。首先引入cropper的样式和jsHTML结构上传头像裁切预览 150 * 150 选择图片上传图片css样式.uploadPicTitle{line-height:35px;border-bottom:1px solid #ccc;font-wei...
vue 移动端头像裁剪_vue移动端裁剪图片结合插件Cropper的使用实例代码
weixin_39933484的博客
12-19 261
之前写了一个上传头像的功能模块，以下的内容是描述上传头像过程中裁剪图片插件结合vue的一个使用。当然，使用就安装 npm install cropperjs接着再引入import Cropper from 'cropperjs'下面是源码 确定import Cropper from 'cropperjs'export default {components: {},data () {retur...
头像上传和图片裁剪功能(cropper.js)
weixin_51305414的博客
08-22 484
更改用户头像,然后裁剪功能
cropperjs裁剪头像功能实现总结
功能总结
01-28 1651
cropperjs裁剪头像功能实现总结
JavaScript实现仿微信头像裁剪（前端完成裁剪）
jilijo的博客
09-26 1665
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=0.5,minimum-scale=0.5,maximum-scale=0.5,user-scalable=no" /> <title>Title&l
cropperjs裁剪上传头像使用方法
LOxia的博客
07-22 462
cropperjs 可做移动端，pc端头像更换，纯原生js 可使用在jquery或vue中
基于cropperjs和vue3的头像上传组件
weixin_41897680的博客
03-20 2854
基于cropperjs和vue3的头像上传组件
cropper.js的使用
10-11
Cropper.js 是一个用于图片裁剪的 JavaScript 库。它可以用于在前端实现用户自定义的图片裁剪功能。以下是使用 Cropper.js 的基本步骤： 1. 引入 Cropper.js 相关文件。在 HTML 页面中，通过 `<script>` 标签引入 Cropper.js 库文件和样式文件： ```html <link rel="stylesheet" href="path/to/cropper.css"> <script src="path/to/cropper.js"></script> ``` 2. 创建一个 `<img>` 元素，用于显示待裁剪的图片： ```html <img id="image" src="path/to/image.jpg"> ``` 3. 初始化 Cropper.js。在 JavaScript 中，找到该 `<img>` 元素，并使用 `new Cropper(element, options)` 初始化 Cropper.js 的实例。`element` 参数是需要进行裁剪的 `<img>` 元素，`options` 参数是一个对象，用于配置裁剪的各种行为和样式： ```javascript var image = document.getElementById('image'); var cropper = new Cropper(image, { // 配置参数 }); ``` 4. 可选：配置 Cropper.js 的参数。可以根据需要配置 Cropper.js 的各种参数，例如裁剪框的大小、裁剪比例、裁剪结果的输出等。具体的参数配置可以参考 Cropper.js 的官方文档。 5. 获取裁剪结果。使用 `cropper.getCroppedCanvas()` 方法获取裁剪后的图像内容，并进行进一步的处理，比如上传到服务器或显示在页面上： ```javascript var croppedCanvas = cropper.getCroppedCanvas(); // 对裁剪结果进行处理 ``` 6. 销毁 Cropper.js 实例。在不需要使用 Cropper.js 时，可以使用 `cropper.destroy()` 方法销毁实例，释放资源。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值