javascript - 在cropperjs中使用具有非本地url的图像

Question

我是网络应用程序开发的初学者，如果我的问题不是什么大问题，请提前道歉。我正在尝试实现一个图像上传器，让您首先裁剪图像。

首先，我在 html 中使用此代码作为图像选择器

<input style="display: none" type="file" (change)="onFileChanged($event)" accept="image/*" #fileInput>
<button (click)="fileInput.click()">Select an image</button>

然后在TS文件中可以将图像作为文件发送（希望我说的是正确的）或base64图像

在这里，我将图像作为文件发送

if (event.target.files && event.target.files[0]) {
    const image = event.target.files[0]
    this.modal.openCroppingImagePopup(image)
}

在裁剪图像弹出窗口中，据我所知，我必须在 中添加图像的本地地址src，而我在这里没有（类似于 ./assest/... ）

<div class="img-container">
    <img #image [src]="imageUrl" crossorigin>
</div>
<img [src]="imageDestination" class="img-preview">

在这种情况下，我从某个地方读到我可以将图像转换为 base64

 var reader = new FileReader();
 reader.readAsDataURL(data.image);
 reader.onload = (event) => {
 this.imageUrl = reader.result
 }

这data.image来自我首先向您展示的另一页。因此，使用此代码，裁剪页面不会加载任何内容。所以我从某个地方读到它，如果我改变[src]它[attr.src]可以解决问题，它确实

<div class="img-container">
    <img #image [attr.src]="imageUrl" crossorigin>
</div>
<img [src]="imageDestination" class="img-preview">

它在裁剪页面中打​​开图像，但裁剪功能消失了，我无能为力。

你能帮我看看我应该在这里做什么吗？您的帮助将不胜感激。

标签： javascripthtmltypescriptcropperjs