javascript - cropper.js 无法初始化没有显示任何错误
问题描述
大家好,我被javascript库cropper.js困住了。我想在上传图片时初始化裁剪器。我做了一个名为 temp 的函数,当输入类型文件更改时触发查看代码 html
<input
type="file"
name="cropableImage"
id="cropableImageId"
onchange="temp(this)"
/>
javascript
function temp(input) {
if(input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#previewHolder').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
$("#main_image_section").show();
$("#choose_file").hide();
$("#tools_section").show();
const image=document.getElementById('previewHolder');
cropper = new Cropper(image, {
zoomable: true,
scalable:true,
rotatable:true,
autoCropArea:0.5,
background:false,
modal:true,
autoCrop: true,
viewMode: 0,
cropBoxResizable:true,
setDragMode:true,
});
} else {
alert('select a file to see preview');
$('#previewHolder').attr('src', '');
}
}
当我选择图像时,功能正在运行并加载图像。控制台中没有显示错误。但裁剪器没有初始化。
当我以另一种方式执行此操作时,它会起作用。就像我做了一个按钮,当点击按钮时,函数运行并且cropper被初始化。
但我需要在加载图像时对其进行初始化。
解决方案
必须花reader
一些时间才能读取您上传的文件。这意味着在函数运行之前new Cropper
调用它。reader.onload
如果您希望在读取文件后运行裁剪器,则在分配预览持有者图像之后移动回调Cropper
内部的初始化。onload
src
let cropper;
const previewHolder = document.getElementById("previewHolder");
function temp(input) {
if (input.files.length) {
const reader = new FileReader();
reader.onload = function (e) {
// Here the image is loaded.
// Set it to the preview holder.
previewHolder.src = e.target.result;
// Now the cropper should be able to use the loaded image.
cropper = new Cropper(previewHolder, {
zoomable: true,
scalable: true,
rotatable: true,
autoCropArea: 0.5,
background: false,
modal: true,
autoCrop: true,
viewMode: 0,
cropBoxResizable: true,
setDragMode: true,
});
};
reader.readAsDataURL(input.files[0]);
}
}
推荐阅读
- jq - 过滤带有句点的属性名称
- angularjs - .htaccess 不重定向(版本 1.6.10)
- html - 引导程序中具有不同图像大小的图像库
- delphi - Delphi - 使用 TEdit.tagObject 指向另一个对象
- android - OpenGL ES:在顶点着色器中计算顶点位置时性能不佳
- php - phpmyadmin 无法登录 mysql 服务器
- javascript - 在 jquery 中动态添加内容问题
- javascript - 如何在 Koa 中的 ctx.body 之后 fs.writefile?
- visual-studio-code - vscode 将不再在 mac 上打开
- javascript - Express.js:API 调用时的异步问题