判断tui-image-editor图片是否加载完成

在这篇博客中我记载了使用 tui-image-editor这个组件，但是这里存在一个问题，如何判断图片加载完成？

https://www.cnblogs.com/weiyanei/p/18193306

 

如下图所示，因为图片没有加载，所以我点击保存图片，即获取base64编码后保存，结果就是将一张完整的图片变成了透明图片，这张图片其实是一张完全透明的图片，只不过背景是黑色，所以看起来是黑色的。

 

解决方式其实也很简单，如下图所示，放一个原始的图片元素，隐藏起来即可。借助@error和@load判断图片加载异常和正常，图片加载完成后展示可操作的按钮即可。

<img class="container" @error='imgOnError' @load='imgLoaded' :src="imagePath" alt=""
            style="width: 1px;height: 1px;z-index: -300;position: fixed;top: -300;" />

imgOnError() {
            this.$Message.warning({
                content: '图片加载失败',
                duration: 3
            })
        },
        imgLoaded() {
            // this.$Message.success({
            //     content: '图片加载成功',
            //     duration: 3
            // })

            setTimeout(() => {
                this.showBtn = true;
            }, 500);
        },