Есть ли у кого есть опыт использования урожая с метеор?Используйте Cropit в Meteor js для обрезки изображения перед загрузкой через рогатку
Я хочу обрезать изображения, прежде чем отправлять их на S3 с помощью рогатки.
Так что я установить cropit с
meteor add suxez:jquery-cropit
и основано на официальном сайте cropit, я добавить
<div class="image-editor">
<input type="file" class="cropit-image-input">
<div class="cropit-preview"></div>
<div class="image-size-label">
Resize image
</div>
<input type="range" class="cropit-image-zoom-input">
<button class="rotate-ccw">Rotate counterclockwise</button>
<button class="rotate-cw">Rotate clockwise</button>
<button class="export">Export</button>
</div>
в шаблон, и
Template.XXXXXX.onCreated(function() {
$('.image-editor').cropit({
exportZoom: 1.25,
imageBackground: true,
imageBackgroundBorderWidth: 20,
imageState: {
src: 'http://lorempixel.com/500/400/',
},
});
моего onCreated Funciton , и добавить
'click .rotate-cw': function() {
$('.image-editor').cropit('rotateCW');
},
'click .rotate-ccw': function() {
$('.image-editor').cropit('rotateCCW');
},
'click .export': function() {
var imageData = $('.image-editor').cropit('export');
window.open(imageData);
},
к моему шаблону события. и, наконец,
.cropit-preview {
background-color: #f8f8f8;
background-size: cover;
border: 5px solid #ccc;
border-radius: 3px;
margin-top: 7px;
width: 250px;
height: 250px;
}
.cropit-preview-image-container {
cursor: move;
}
.cropit-preview-background {
opacity: .2;
cursor: auto;
}
.image-size-label {
margin-top: 10px;
}
input, .export {
/* Use relative position to prevent from being covered by image background */
position: relative;
z-index: 10;
display: block;
}
button {
margin-top: 10px;
}
на мой CSS .... Однако, это не работает на всех .... Я пытался загрузить изображение, нажав на кнопку загрузки, но нет предварительного просмотра ... и кнопка экспорта не работает ни .....
Может ли кто-нибудь помочь мне с этим пожалуйста ??? :)
Существуют ли какие-либо ошибки в консоли браузера? – CodeChimp
Не совсем, есть одна ошибка «Не удалось проанализировать SourceMap: http: // localhost: 2323/packages/0f7c38a73e1fd696f71cacdd4284e82d601d2fc5.map», но я предполагаю, что это должно быть неуместно. – Nan
Я также попытался использовать cropit непосредственно с какой-то статической html-страницей, и он работает отлично, поэтому я предполагаю, что проблема возникает из-за того, что я не все хорошо установил с помощью Meteor @@ – Nan