So what i want :
select an image with input type file, downscale with blueimp, crop that image with cropper.js
so the blueimp part is working fine, the image gets resized to maxWidth property and is appended as <img> tag to "#imagearea" then i want to initialize cropper.js based on that tag, like in the docs, heres my code
document.getElementById('file-input').onchange = function (e) {
var loadingImage = loadImage(
e.target.files[0],
function (img) {
$(img).attr("style","max-width: 100%;")
$('#imagearea').append(img)
// now i see the image and when i inspect dom its a <img> tag
// so lets initialize the cropper
$('#imagearea').find("img").cropper({
aspectRatio: 16 / 9,
crop: function(e) {
}
});
},
{maxWidth: 1280}
);
};
but when initializing the cropper, first i get an 404 error like
GET blob:http://foo.bar/64c77709-29f7-44ba-8772-49517e7976e5 404 (Not Found)
and then
Uncaught RangeError: Offset is outside the bounds of the DataView at DataView.getUint8 () at m (6eaf333.js:7051) at e.value (6eaf333.js:7051) at XMLHttpRequest.n.onload (6eaf333.js:7051)
Please use "noRevoke " option.
document.getElementById('file-input').onchange = function (e) {
var loadingImage = loadImage(
e.target.files[0],
function (img) {
$(img).attr("style","max-width: 100%;")
$('#imagearea').append(img)
// now i see the image and when i inspect dom its a <img> tag
// so lets initialize the cropper
$('#imagearea').find("img").cropper({
aspectRatio: 16 / 9,
crop: function(e) {
}
});
},
{maxWidth: 1280,noRevoke: true}
);
};