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

I'm trying to implement the Jquery plugin called Cropper in a Meteor project I'm working on and it's giving me some confusing results.

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

Thusfar I've imported cropper as an npm through the command line and then used a method from within cropper to set up the image in question for cropping and that has worked fine. However when I attach a cropper function to a button within the same template I'm getting an error of "cropper not defined" in the console.

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

My code thusfar looks like this: Client/main.html:

因此我的代码看起来像这样:Client / 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");
   }
});

The problem arises in that cropper.getCroppedCanvas() call near the bottom, as it just throws an error of "Uncaught Exception: cropper is not defined".

问题出现在cropper.getCroppedCanvas()调用底部附近,因为它只抛出一个错误“Uncaught Exception:cropper is defined defined”。

I think I'm missing something really basic here, like that it's not been imported properly or it's outside of scope but I've been fiddling with it for about an hour now and can't decipher the example code well enough to find my problem. If anyone could tell me what I'm missing here that would be hugely appreciated.

我想我在这里遗漏了一些非常基本的东西,比如没有正确导入它或者它超出了范围,但我现在已经摆弄了大约一个小时,并且不能很好地解释示例代码以找到我的问题。如果有人能告诉我我在这里缺少的东西将非常感激。

1 个解决方案

#1

Shouldn't it be:

不应该是:

$().cropper('getCroppedCanvas');

I assume this is the plugin you use: https://github.com/fengyuanchen/cropper

我假设这是你使用的插件:https://github.com/fengyuanchen/cropper

#1