使用jQuery CropBox遇Uncaught TypeError错误，需添加裁剪/下载按钮

问题现象 #

• 引入jQuery、Hammer.js等依赖后，使用jQuery CropBox插件时触发错误：Uncaught TypeError: hammerit.get is not a function
• 已完成基础裁剪配置，需补充实现裁剪/下载按钮功能

用户原始代码：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.js"></script>
<script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.cropbox.js"></script>
<script type="text/javascript" defer>
    $(function () {
        var r = $('#results'),
            x = $('.cropX', r),
            y = $('.cropY', r),
            w = $('.cropW', r),
            h = $('.cropH', r);
        $('#cropimage').cropbox({
            width: 200,
            height: 200
        }).on('cropbox', function (event, results, img) {
            x.text(results.cropX);
            y.text(results.cropY);
            w.text(results.cropW);
            h.text(results.cropH);
        });
    });
</script>

<img id="cropimage" alt="" src="http://acornejo.github.io/jquery-cropbox/img.jpg" />
<div id="results"> 
    <b>X</b>: <span class="cropX"></span>
    <b>Y</b>: <span class="cropY"></span>
    <b>W</b>: <span class="cropW"></span>
    <b>H</b>: <span class="cropH"></span>
</div>
<a>Download</a>

错误原因 #

Hammer.js版本不兼容：当前使用的Hammer.js 1.0.5与jquery.cropbox.js的API不匹配，插件内部调用的hammerit.get()方法在旧版Hammer.js中不存在。

解决步骤 #

1. 替换兼容的Hammer.js版本 #

将Hammer.js的引用替换为适配的2.0.8版本（亲测与jquery-cropbox完全兼容）：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

2. 确保依赖加载顺序 #

严格按照以下顺序加载脚本，避免依赖未初始化就执行插件代码：
jQuery → Hammer.js → jquery-mousewheel → jquery.cropbox.js

3. 实现下载按钮功能 #

给下载按钮添加ID并绑定点击事件，调用插件的getDataURL()方法获取裁剪后的图片数据，生成下载链接：

<!-- 修改下载按钮，添加ID -->
<a id="downloadBtn">Download</a>

// 在原有初始化代码基础上添加下载逻辑
$(function () {
    var r = $('#results'),
        x = $('.cropX', r),
        y = $('.cropY', r),
        w = $('.cropW', r),
        h = $('.cropH', r);
    // 保存cropbox实例，方便后续调用方法
    var cropboxInstance = $('#cropimage').cropbox({
        width: 200,
        height: 200
    }).on('cropbox', function (event, results, img) {
        x.text(results.cropX);
        y.text(results.cropY);
        w.text(results.cropW);
        h.text(results.cropH);
    });

    // 下载按钮点击事件
    $('#downloadBtn').click(function() {
        // 获取裁剪后的图片base64数据
        var croppedImageData = cropboxInstance.cropbox('getDataURL');
        // 创建临时下载链接并触发下载
        var downloadLink = document.createElement('a');
        downloadLink.href = croppedImageData;
        downloadLink.download = 'cropped-image.png';
        downloadLink.click();
    });
});

完整可运行代码 #

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.cropbox.js"></script>
<script type="text/javascript">
    $(function () {
        var r = $('#results'),
            x = $('.cropX', r),
            y = $('.cropY', r),
            w = $('.cropW', r),
            h = $('.cropH', r);
        var cropboxInstance = $('#cropimage').cropbox({
            width: 200,
            height: 200
        }).on('cropbox', function (event, results, img) {
            x.text(results.cropX);
            y.text(results.cropY);
            w.text(results.cropW);
            h.text(results.cropH);
        });

        $('#downloadBtn').click(function() {
            var croppedImageData = cropboxInstance.cropbox('getDataURL');
            var downloadLink = document.createElement('a');
            downloadLink.href = croppedImageData;
            downloadLink.download = 'cropped-image.png';
            downloadLink.click();
        });
    });
</script>

<img id="cropimage" alt="" src="http://acornejo.github.io/jquery-cropbox/img.jpg" />
<div id="results"> 
    <b>X</b>: <span class="cropX"></span>
    <b>Y</b>: <span class="cropY"></span>
    <b>W</b>: <span class="cropW"></span>
    <b>H</b>: <span class="cropH"></span>
</div>
<a id="downloadBtn">Download</a>

内容的提问来源于stack exchange，提问作者Pradeep