H5 图片裁剪 - cropper 插件使用

本篇文章需要 js，jquery 等基础

cropper 下载

cropper 是一款 js 插件，下载地址：https://github.com/fengyuanchen/cropper/blob/master/README.md

jquery 下 cropper 使用步骤

引入文件

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/cropper.js"></script><!-- Cropper.js is required -->
<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/jquery-cropper.js"></script>

在 html 中放入一个 img 标签

<div>
  <img id="image" src="picture.jpg">
</div>

在 js 中对 img 标签使用 cropper 方法

$('#image').cropper({
        aspectRatio: 1 / 1,
        viewMode: 1
});
//aspectRatio 规定了裁剪框的比例，其他参数查看官方文档

截至目前，img标签会出现一个裁剪框，怎么获得裁剪框区域内的图像呢？以下

var cas = $('#image').cropper('getCroppedCanvas');
var dataURL = cas.toDataURL("image/jpeg");
//dataURL 是base64格式的图片

jquery 下 cropper 完整例子

另存为html，并引入相应的文件，即可运行

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/css/cropper.min.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/cropper.min.js"></script>
</head>
<body>
<div>
    <img id="image" src="test.jpg" style="max-width: 100%;">
</div>
<button id="edit">
    裁剪
</button>
<button id="cancel">
    取消
</button>
<button id="save">
    保存
</button>
<script>
    $('#edit').click(function () {
        $('#image').cropper({
            aspectRatio: 1,
            viewMode: 1
        });
    });
    $('#cancel').click(function () {
        $('#image').cropper('destroy');
    });
    $('#save').click(function () {
        var cas = $('#image').cropper('getCroppedCanvas');
        var dataURL = cas.toDataURL("image/jpeg");
        $('#image').attr("src", dataURL);
        $('#image').cropper('destroy');
    });
</script>
</body>
</html>

来源：CSDN

作者：南城柳旧时人

链接：https://blog.csdn.net/SudaDays/article/details/104194286

标签

cropper

cropper使用

脚本