Question

我正在尝试在我正在研究的Meteor项目中实现名为Cropper的Jquery插件，它给了我一些令人困惑的结果。

因此，我通过命令行将cropper作为npm导入，然后使用cropper中的方法设置有问题的图像进行裁剪，并且工作正常。但是，当我将一个裁剪器功能附加到同一模板中的按钮时，我在控制台中收到“cropper not defined”错误。

我的代码如此看起来像这样：客户端/ main.html中：

<head>
  <title>Testing Cropper</title>
</head>


<body>
    <div>
        {{> StudentImageDisplay}}
    </div>
</body>

<template name="StudentImageDisplay">
    Click and drag a box to select the portion of the image you would like to use.<br>
    Double click image to shift between selection box and image draggning<br>
    Click the Save button below to save to database. <br>
    <div class="StudentImage">
        <img src="/Science.jpg" alt="studentimage">
    </div>
    <div>   
        <button class="CropImage">Crop</button>
    </div>
</template>

main.js

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

import './main.html';

Template.StudentImageDisplay.onRendered(function () {
    $('.StudentImage > img').cropper({
        aspectRatio: 0.75,
        autoCropArea: 0.65,
        strict: false,
        guides: false,
        highlight: false,
        dragCrop: false,
        cropBoxMovable: false,
        cropBoxResizable: false
    });
});

Template.StudentImageDisplay.events({
   'click .CropImage': function (event) {
    event.preventDefault();
    cropper.getCroppedCanvas();
    console.log("Cropped image to Canvas for realsies");
   }
});

问题出现在底部附近的cropper.getCroppedCanvas（）调用，因为它只会引发错误“Uncaught Exception：cropper is not defined”。

我认为我在这里遗漏了一些非常基本的东西，比如它没有被正确导入或者它超出了范围，但是我现在已经习惯了大约一个小时，并且不能很好地破译示例代码找到我的问题。如果有人能告诉我我在这里缺少的东西会非常感激。

Answer 1

不应该是：

$().cropper('getCroppedCanvas');

我认为这是您使用的插件：https://github.com/fengyuanchen/cropper

无法在Meteor中执行外部脚本的功能

1 个答案: