我试图使用Daniel Eden的animate.css版本3.5.1和Dirk Groenen的jquery-viewport-checker版本1.8.7在特定网页上为不同的动画类元素添加"延迟".
我试着像使用setTimeout函数一样...
setTimeout(function () {
jQuery('.fadeinleft1').addClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInLeft',
offset: 100
});
}, 500
);
但这显然也影响了隐藏的阶级.我只需要在到达视口时延迟动画,我可以相应地延迟每个对象.一直在寻找,但还没有找到答案.
Croppie使用DIV容器而不是CANVAS进行裁剪。我试图找出如何将由此DIV生成的裁剪图像保存到服务器上的目录，例如通过SAVE按钮。
这是我的HTML代码...
<!-- begin snippet: js hide: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>Demo Croppie</title>
<link rel="Stylesheet" type="text/css" href="css/croppie.css" />
<link rel="Stylesheet" type="text/css" href="css/sweetalert.css" />
</head>
<body>
<div id="testCanvas"></div>
<div class="actions" style="margin-left: auto; margin-right: auto; width:250px;">
<button class="vanilla-result">Result</button>
<button class="vanilla-rotate" data-deg="-90">Rotate Left</button>
<button class="vanilla-rotate" data-deg="90">Rotate Right</button>
</div>
<p><button onclick="function();">Save</button></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/croppie.js"></script>
<script src="js/demo.js"></script>
<script src="js/sweetalert.min.js"></script>
<script>
Demo.init();
</script>
</body>
</html>
这是我的JavaScript配置...
function demoVanilla() {
var vanilla = new Croppie(document.getElementById('testCanvas'), {
viewport: { width: 300, …我试图使用按钮旋转Croppie脚本.由于看起来是不同的语法或其他东西,它不适用于此特定脚本.我不是一个狂热的JavaScript编码器.但是下面的代码就是我所拥有的,并尝试使用按钮进行旋转工作.到目前为止还不好!哦! 我在croppie.js中默认启用了Orientation,因为由于语法原因我不知道如何在下面的脚本中添加它,以防你想知道.
$( document ).ready(function() {
var $uploadCrop = $('#upload-demo');
$uploadCrop.croppie({
viewport: {
width: 450,
height: 450,
type: 'square'
},
boundary: {
width: 500,
height: 500
}
});
$uploadCrop.croppie('bind', 'imgs/cat.jpg');
$('.vanilla-rotate').on('click', function(ev) {
vanilla.rotate(parseInt($(this).data('deg'))); //<-------
});
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'original'
}).then(function (resp) {
$('#imagebase64').val(resp);
$('#form').submit();
});
});
});
在我看来,我注释箭头的线是问题所在.但我可能是错的.
我在html页面上有一个按钮
<button class="vanilla-rotate" data-deg="-90">Rotate</button>
他们的Vanilla演示具有旋转功能,但我试图让它在上传演示中工作,他们没有旋转功能.