冯渊辰cropper + CA曼in meteor

Question

我在同时使用 cropper 和 caman 时遇到问题。我复制了fengyanchen提供的代码，针对Meteor稍微修改了一下。 Caman 工作，但 cropper 不启动。

代码： http://codepen.io/chenfengyuan/pen/wMrVQY

HTML

<template name="Test">
{{ > index   }}
<div class="container">
    <h1 class="page-header">Use Cropper with CamanJS</h1>
    <p id="upload">
        <input id="file" type="file">
    </p>
    <p id="handle" style="display:none">
        <button class="btn btn-primary" id="brightness">Brightness</button>
        <button class="btn btn-primary" id="contrast">Contrast</button>
    </p>
    <p>
        <canvas id="canvas" style="max-width:100%;"></canvas>
    </p>
</div>

我的事件处理程序：

...（根据 link 中提供的功能复制）

Template.Test.events({
'change #file':function(event,template){

    if (URL) {
        var files = event.target.files;
        var file;

        if (files && files.length) {
            file = files[0];

            if (/^image\/\w+$/.test(file.type)) {
                startCaman(URL.createObjectURL(file));
            } else {
                window.alert('Please choose an image file.');
            }
        }

    } else {
        $file.prop('disabled', true);
    }
}

})

Answer 1

当我执行以下操作时它起作用了：

给 canvas 一个宽度和高度
删除最顶层的 var $canvas 并将其替换为真正的 canvas 选择器无处不在

冯渊辰cropper + CA曼in meteor

fengyuanchen cropper + caman in Meteor

crop

meteor