英文:
Uncaught TypeError: hammerit.get is not a function - jquery cropbox
问题
I see you have provided code and an error message related to using jQuery Cropbox with Hammer.js. Here's the translated portion of your content:
在使用 jQuery Cropbox 与 Hammer.js 时出现以下错误:
Uncaught TypeError: hammerit.get 不是一个函数
我还需要裁剪或下载按钮
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.cropbox.js"></script>
<script type="text/javascript" defer>
$(function () {
var r = $('#results'),
x = $('.cropX', r),
y = $('.cropY', r),
w = $('.cropW', r),
h = $('.cropH', r);
$('#cropimage').cropbox({
width: 200,
height: 200
}).on('cropbox', function (event, results, img) {
x.text(results.cropX);
y.text(results.cropY);
w.text(results.cropW);
h.text(results.cropH);
});
});
</script>
<img id="cropimage" alt="" src="http://acornejo.github.io/jquery-cropbox/img.jpg" />
<div id="results"><b>X</b>: <span class="cropX"></span> <b>Y</b>: <span class="cropY"></span> <b>W</b>: <span class="cropW"></span> <b>H</b>: <span class="cropH"></span></div>
<a>下载</a>
错误图像如下:
[![在此输入图片描述][1]][1]
[1]: https://i.stack.imgur.com/kdkGa.png
Please note that I've provided the translation without any code or other content.
英文:
getting this error when using jquery cropbox
Uncaught TypeError: hammerit.get is not a function
I need also Crop or download button
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.cropbox.js"></script>
<script type="text/javascript" defer>
$(function () {
var r = $('#results'),
x = $('.cropX', r),
y = $('.cropY', r),
w = $('.cropW', r),
h = $('.cropH', r);
$('#cropimage').cropbox({
width: 200,
height: 200
}).on('cropbox', function (event, results, img) {
x.text(results.cropX);
y.text(results.cropY);
w.text(results.cropW);
h.text(results.cropH);
});
});
</script>
<img id="cropimage" alt="" src="http://acornejo.github.io/jquery-cropbox/img.jpg" />
<div id="results"> <b>X</b>: <span class="cropX"></span>
<b>Y</b>: <span class="cropY"></span>
<b>W</b>: <span class="cropW"></span>
<b>H</b>: <span class="cropH"></span>
</div>
<a>Download</a>
答案1
得分: 1
更新jQuery并在任何其他jQuery插件之前加载它。
还要将crop jQuery和CSS添加到代码片段中。
由于某种原因,最新的hammer.js不起作用,所以我留下了它。
这在JSFiddle上运行,但可能因为iFrame安全性而无法在SO上运行。
要上传而不是下载,请使用https://stackoverflow.com/questions/13333378/how-can-javascript-upload-a-blob
function cropAndSave(src, x, y, w, h) {
var canvas = document.createElement("canvas");
//document.body.appendChild(canvas); // 用于测试
var ctx = canvas.getContext("2d");
canvas.width = w;
canvas.height = h;
ctx.fillRect(0, 0, w, h);
ctx.drawImage(src, -x, -y);
return {
save: function(filename) {
var a = document.createElement("a");
canvas.toBlob(function(blob) {
a.href = URL.createObjectURL(blob);
a.download = filename;
console.log("trying to download", filename);
a.click();
});
}
}
}
$(function() {
let img = $("#cropimage")[0];
let r = $('#results'),
x = $('.cropX', r),
y = $('.cropY', r),
w = $('.cropW', r),
h = $('.cropH', r);
$('#cropimage').cropbox({
width: 200,
height: 200
}).on('cropbox', function(event, results, img) {
x.text(results.cropX);
y.text(results.cropY);
w.text(results.cropW);
h.text(results.cropH);
});
$("#save").on("click", (e) => {
e.preventDefault();
cropAndSave(img,
x.text(),
y.text(),
w.text(),
h.text()
).save("test");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-cropbox@0.1.3/jquery.cropbox.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/jquery-cropbox@0.1.3/jquery.cropbox.min.css" rel="stylesheet">
<img id="cropimage" crossorigin="anonymous" alt="" src="http://acornejo.github.io/jquery-cropbox/img.jpg" />
<div id="results"> <b>X</b>: <span class="cropX"></span>
<b>Y</b>: <span class="cropY"></span>
<b>W</b>: <span class="cropW"></span>
<b>H</b>: <span class="cropH"></span>
</div>
<a href="#" id="save">Download</a>
英文:
Update the jQuery and load it before any other jQuery plugin.
Also add the crop jQuery and CSS to the snippet.
For some reason does the newest hammer.js not work, so I left it
This works in a JSFiddle but possibly not on SO due to iFrame security
to upload instead of download use https://stackoverflow.com/questions/13333378/how-can-javascript-upload-a-blob
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function cropAndSave(src, x, y, w, h) {
var canvas = document.createElement("canvas");
//document.body.appendChild(canvas); // for testing
var ctx = canvas.getContext("2d");
canvas.width = w;
canvas.height = h;
ctx.fillRect(0, 0, w, h);
ctx.drawImage(src, -x, -y);
return {
save: function(filename) {
var a = document.createElement("a");
canvas.toBlob(function(blob) {
a.href = URL.createObjectURL(blob);
a.download = filename;
console.log("trying to download",filename);
a.click();
});
}
}
}
$(function() {
let img = $("#cropimage")[0];
let r = $('#results'),
x = $('.cropX', r),
y = $('.cropY', r),
w = $('.cropW', r),
h = $('.cropH', r);
$('#cropimage').cropbox({
width: 200,
height: 200
}).on('cropbox', function(event, results, img) {
x.text(results.cropX);
y.text(results.cropY);
w.text(results.cropW);
h.text(results.cropH);
});
$("#save").on("click", (e) => {
e.preventDefault();
cropAndSave(img,
x.text(),
y.text(),
w.text(),
h.text()
).save("test");
});
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.js"></script>
<script src="
https://cdn.jsdelivr.net/npm/jquery-cropbox@0.1.3/jquery.cropbox.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/jquery-cropbox@0.1.3/jquery.cropbox.min.css
" rel="stylesheet">
<img id="cropimage" crossorigin="anonymous" alt="" src="http://acornejo.github.io/jquery-cropbox/img.jpg" />
<div id="results"> <b>X</b>: <span class="cropX"></span>
<b>Y</b>: <span class="cropY"></span>
<b>W</b>: <span class="cropW"></span>
<b>H</b>: <span class="cropH"></span>
</div>
<a href="#" id="save">Download</a>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论