所以我想要的是:
选择输入类型文件的图像, 缩小blueimp , 使用 cropper.js 裁剪该图像
因此 blueimp 部分工作正常,图像大小调整为 maxWidth 属性并附加为 <img>
标记为“#imagearea”,然后我想根据该标记初始化cropper.js,就像在文档中一样,这是我的代码
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}
);
};
但是在初始化裁剪器时, 首先我收到 404 错误,例如
GET blob:http://foo.bar/64c77709-29f7-44ba-8772-49517e7976e5 404 (Not Found)
然后
未捕获的范围错误:偏移量超出了 DataView 的范围 在DataView.getUint8() 在米(6eaf333.js:7051) 在 e.value (6eaf333.js:7051) 在 XMLHttpRequest.n.onload (6eaf333.js:7051)
最佳答案
请使用“noRevoke”选项。
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}
);
};
关于javascript - cropper.jscant 通过 blueimp 初始化 blob 图像 <img> 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43669679/