cropper.js裁剪图片的使用

这两天难得有时间可以整理一下最近学习的东西,这两天项目中用到了头像上传裁剪的功能,这里只介绍头像的裁剪吧。

单独实现图片剪裁的功能还是挺容易的,入门级别的。看一遍官方给的文档,基本上就明白了。大家如果不想看英文版的官网介绍,可以看这篇博客,讲的特别好。

官网地址:http://fengyuanchen.github.io/cropper/

附上网址:https://blog.csdn.net/weixin_38023551/article/details/78792400

这篇文章讲的很好。

我先说一下自己的需求:就是想要实现图片裁剪的功能,并且要有预览区域,获得裁剪后的图片后点击确认后上传。

预览的页面结构、样式要自己设置,为了页面美观,可以根据裁剪框的比例来设置,根据aspectRatio这个属性,如果不设置这个属性的话,那这个属性的值就是NAN。一般还是根据需求页面需要的图片比例来设置,这样上传到服务器上的图片就是需求要求的图片了。

具体的选项介绍可以看这篇博客,我就贴一下代码吧。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <link rel="stylesheet" href="../css/cropper.css"/>
    <title>cropper 裁剪图片并上传demo</title>
    <style>
        .container {
            width: 70%;
            float: left;
        }

        .img {
            width: 50%;
        }

        .preview-box {
            width: 320px;
            height: 180px;
            overflow: hidden;
            float: right;
            margin-right: 20px;

        }
    </style>
</head>
<body>
<div class="container" id="container">
    <img src="../image/demo_img.jpg" alt="" class="img" id="demoImg"/> <!--真实项目中的路径需要动态获取用户选中图片的路径,可以采用base64编码的形式-->
</div>
<div class="preview-box"></div><!--预览框的容器-->

<script src="../js/jquery-2.1.3.min.js"></script>
<script src="../js/cropper.js"></script>
<script>
    $(‘#demoImg‘).cropper({
        aspectRatio: 16 / 9,//裁剪框比例
        viewMode: 0,//视图模式
        dragMode: ‘move‘,//裁剪框的模式
        minCanvasWidth: 300,//canvas的最小宽度,如果不设置的话,值是0
        minCanvasHeight: 300,
        minCropBoxWidth: 400,//裁剪层的最小宽度,值为0
        minCropBoxHeight: 400,
        preview: ‘.preview-box‘
    })
</script>
</body>
</html>

附上效果图

右侧是预览区域,左侧是裁剪区域

原文地址:https://www.cnblogs.com/bllx/p/9530161.html

时间: 2024-11-05 23:35:21

cropper.js裁剪图片的使用的相关文章

简单的JS裁剪图片并存储

就我而言,页面上的设计比较灵动的部分,其实不是很多,诸如滑动验证码,图片裁剪等比较好的交互设计. 从刚开始工作的时候,我就想把这些东西了解下,无奈一直没这个需求,乘着今天的空闲,研究了一下午,期间遇到了大大小小的问题,一直备受折磨,这其实也反映一个问题,我的 还是比较薄弱. 话不多说,先大概讲下效果: 用户点击上传图片后,页面显示所上传的图片,并且出现裁剪框和两个预览区域,最后点击裁剪按钮保存裁剪的图片到服务器上. 效果很简单,整个过程我遇到的两个难点,第一个是裁剪的JS效果,第二个则是图片数据

cropper.js实现图片裁剪预览并转换为base64发送至服务端。

一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时记得引入cropper.css 3. 此处后端使用的nodejs,不过不懂node的影响也不大. 二 . 图片裁剪并预览 1.首先利用cropper完成图片裁剪并预览: <input type="file" name="" id="imgBtn"

移动端图片裁剪上传—jQuery.cropper.js

jQuery.cropper.js是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. 一.移动端获取本地相册兼容 安卓:<input type="file" accept="image/*" capture="camera" > ios:<input type="file" accept="ima

cropper.js图片裁剪

最近做电子名片的项目,可是个人照片展示上出现了 用户上传的图片尺寸严重失调,所以要求进行图片裁剪,再此我对图片裁剪进行调研 还不太成熟 以后再改 这个实现的原理是 前台获取到 坐标 图片的尺寸 原图文件 传给后台进行裁剪 这个是我在网上找的一个插件 cropper功能很强大 这里是官方文档 首先使用cropper必须引入对应得css和js,还有jquery <script src="jquery.js"></script> <link href="

使用 FocusPoint.js 实现图片的响应式裁剪

通常网站的布局都不是单一的.例如图像在电脑.平板和智能手机上可能显示的形状是不同的.特别是如果你使用的是全屏图像,在你必须使用相同的图像文件的情况下,你的主题可能会被截断或完全缺失,或者看起来很尴尬. FocusPoint 这款 jQuery 插件可以确保你的图像中的任何容器看起来都很棒,它提出了“响应裁剪”的概念,确保你的图片的重要组成部分被裁剪出来,动态图像裁剪以填充可用空间又不会裁剪掉图像的主题部分. 效果演示      源码下载 使用方法: 1. 计算图片的聚焦点 图像的聚焦点是由X(水

C#MVC和cropper.js实现剪裁图片ajax上传的弹出层

 首先使用cropper.js插件,能够将剪裁后的图片返回为base64编码,后台根据base64编码解析保存图片. jQuery.cropper: 是一款使用简单且功能强大的图片剪裁jquery插件.该图片剪裁插件支持图片放大缩小,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用 网站:http://fengyuanchen.github.io/cropper/ 可以自己搜索中文API 前台代码: @{ Layout = null; } <!DOCTYPE html> &

Jcrop裁剪图片[一] :前端js总结

最近项目中有一个截取图片的效果,于是在用到了Jcrop框架,使用中看API然后网上查阅一些文章勉勉强强算完成了这个功能,现将过程总结如下 实现思路 Jcrop来获取截取图片的起点XY和终点xy,另外还有截取范围的wh,--将这些数据传递给服务器端,然后由服务器端相应语言的API进行裁剪或者透明等等操作. 官网URL:          http://code.ciaoca.com/jquery/jcrop/ 实现效果如下图: 裁剪后 功能描述 将原图进行固定范围裁剪,然后等比缩小[相应的图片内容

支持移动端裁剪图片插件Jcrop(结合WebUploader上传)

(此教程包括前端实现图片裁剪,后端进行获取裁剪区并保存) 最近有一个需求,微信公众号上传图片,支持自定义裁剪. 以前用过一款裁剪插件cropper,很久没用了,不知道对移动端操作兼容如何,重新从网上搜索更合适的插件 首先试过PhotoClip,这个插件裁剪区域是固定的,不能自定义缩放(也许需求太匆忙没有研究透,亦或者可以修改原文件优化这一点),对于用户体验不够好,故,放弃 然后又遇到一款插件---Jcrop,完美符合需求,项目结合百度插件 WebUploader上传获取原图,可适配移动端选取相册

cropper.js头像剪裁

引入和使用 <link href="/path/to/cropper.css" rel="stylesheet"> <script src="/path/to/cropper.js"></script> HTML结构 <div class="demo"> <img id="demoImg" src="default.png"/>