微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

将图像裁剪输出反应到 base64 不起作用

如何解决将图像裁剪输出反应到 base64 不起作用

我正在尝试裁剪图像然后上传到服务器,但 api 服务器接受图像为 base64 格式,它似乎不起作用,如果有任何解决办法?非常感激!!!我将图像作为 blob,我不知道如何将其转换为 base64。

这是我从图像标签中得到的输出

src="blob:http://localhost:3000/c61ee692-8697-43c3-b9c0-5077322940eb"

请看下面的代码


 getCroppedImg(image,crop,fileName) {
        const canvas = document.createElement('canvas');
        const scaleX = image.naturalWidth / image.width;
        const scaleY = image.naturalHeight / image.height;
        canvas.width = crop.width;
        canvas.height = crop.height;
        const ctx = canvas.getContext('2d');
        ctx.imageSmoothingQuality = 'high';
        ctx.drawImage(
            image,crop.x * scaleX,crop.y * scaleY,crop.width * scaleX,crop.height * scaleY,crop.width,crop.height
        );
        // As Base64 string
        const base64Image = canvas.toDataURL('image/jpeg');

        return new Promise((resolve,reject) => {
            canvas.toBlob(blob => {
                if (!blob) {
                    console.error('Canvas is empty');
                    return;
                }
                blob.name = fileName;
                window.URL.revokeObjectURL(this.fileUrl);
                this.fileUrl = window.URL.createObjectURL(blob);
                resolve(this.fileUrl);
            },'image/jpeg');
        });
    }

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。