Uncaught TypeError: hammerit.get is not a function – jquery cropbox

huangapple go评论71阅读模式
英文:

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

&lt;script type=&quot;text/javascript&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;
    src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.cropbox.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; defer&gt;
    $(function () {
        var r = $(&#39;#results&#39;),
            x = $(&#39;.cropX&#39;, r),
            y = $(&#39;.cropY&#39;, r),
            w = $(&#39;.cropW&#39;, r),
            h = $(&#39;.cropH&#39;, r);
        $(&#39;#cropimage&#39;).cropbox({
            width: 200,
            height: 200
        }).on(&#39;cropbox&#39;, function (event, results, img) {
            x.text(results.cropX);
            y.text(results.cropY);
            w.text(results.cropW);
            h.text(results.cropH);
        });
    });
&lt;/script&gt;


&lt;img id=&quot;cropimage&quot; alt=&quot;&quot; src=&quot;http://acornejo.github.io/jquery-cropbox/img.jpg&quot; /&gt;
    &lt;div id=&quot;results&quot;&gt; &lt;b&gt;X&lt;/b&gt;: &lt;span class=&quot;cropX&quot;&gt;&lt;/span&gt;
     &lt;b&gt;Y&lt;/b&gt;: &lt;span class=&quot;cropY&quot;&gt;&lt;/span&gt;
     &lt;b&gt;W&lt;/b&gt;: &lt;span class=&quot;cropW&quot;&gt;&lt;/span&gt;
     &lt;b&gt;H&lt;/b&gt;: &lt;span class=&quot;cropH&quot;&gt;&lt;/span&gt;
    
    &lt;/div&gt;
&lt;a&gt;Download&lt;/a&gt;

Error image is:
Uncaught TypeError: hammerit.get is not a function – jquery cropbox

答案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(&quot;canvas&quot;);
//document.body.appendChild(canvas); // for testing
var ctx = canvas.getContext(&quot;2d&quot;);
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(&quot;a&quot;);
canvas.toBlob(function(blob) {
a.href = URL.createObjectURL(blob);
a.download = filename;
console.log(&quot;trying to download&quot;,filename);
a.click();
});
}
}
}
$(function() {
let img = $(&quot;#cropimage&quot;)[0];
let r = $(&#39;#results&#39;),
x = $(&#39;.cropX&#39;, r),
y = $(&#39;.cropY&#39;, r),
w = $(&#39;.cropW&#39;, r),
h = $(&#39;.cropH&#39;, r);
$(&#39;#cropimage&#39;).cropbox({
width: 200,
height: 200
}).on(&#39;cropbox&#39;, function(event, results, img) {
x.text(results.cropX);
y.text(results.cropY);
w.text(results.cropW);
h.text(results.cropH);
});
$(&quot;#save&quot;).on(&quot;click&quot;, (e) =&gt; {
e.preventDefault();
cropAndSave(img,
x.text(),
y.text(),
w.text(),
h.text()
).save(&quot;test&quot;);
});
});

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;
https://cdn.jsdelivr.net/npm/jquery-cropbox@0.1.3/jquery.cropbox.min.js
&quot;&gt;&lt;/script&gt;
&lt;link href=&quot;
https://cdn.jsdelivr.net/npm/jquery-cropbox@0.1.3/jquery.cropbox.min.css
&quot; rel=&quot;stylesheet&quot;&gt;
&lt;img id=&quot;cropimage&quot; crossorigin=&quot;anonymous&quot; alt=&quot;&quot; src=&quot;http://acornejo.github.io/jquery-cropbox/img.jpg&quot; /&gt;
&lt;div id=&quot;results&quot;&gt; &lt;b&gt;X&lt;/b&gt;: &lt;span class=&quot;cropX&quot;&gt;&lt;/span&gt;
&lt;b&gt;Y&lt;/b&gt;: &lt;span class=&quot;cropY&quot;&gt;&lt;/span&gt;
&lt;b&gt;W&lt;/b&gt;: &lt;span class=&quot;cropW&quot;&gt;&lt;/span&gt;
&lt;b&gt;H&lt;/b&gt;: &lt;span class=&quot;cropH&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;a href=&quot;#&quot; id=&quot;save&quot;&gt;Download&lt;/a&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月25日 20:08:09
  • 转载请务必保留本文链接:https://go.coder-hub.com/76332118.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定