【踩坑】为base64编码的图片生成截图不显示

最新推荐文章于 2022-08-13 10:26:54 发布

原创最新推荐文章于 2022-08-13 10:26:54 发布 · 6.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#base64 #截图 #图片

前端-问题集锦专栏收录该内容

2 篇文章

订阅专栏

本文主要介绍了在effevo中遇到的base64编码的图片在生成截图时不显示的问题。问题在于使用img.src设置base64字符串后，图片的高度和宽度可能为0，导致图片不显示。解决方法是确保在设置src后等待图片加载完成再进行截图操作，以保证图片的正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

在effevo中设置个人头像时，会有无法显示的情况，还不稳定重现，终于抓到问题原因，下面分享下解决方法

解决方法

先看下原始写法

var imgBase64='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFOSURBVFhH7ZOxTsMwEIZ9qVh5ChqLBalDI/EEvEUHJnbeg4fgWVgoEhtCtOI1GKr0jFNdIsf22ecuMPiTKv9Oznf/nRtVqVT+GqBVjG47tAt77mu3LcopDraFDUkRUiPZoHbZHQDUBW2LyRlpaI0ydJ0qDqju7Fg2tI2SmxzrjjuY66j0XPRhLEkswRgXedfYd0fSE7EcwRVwHbi0y3Xvxg3a/oavY8TVE7HcMwNccd85ACxIusxiuJH7NSYDXHEfrdcPJAO07u5JJnFrJb+CGIjwQzKg6c0rSTGTAW5kPvv99plkwOf32wfJJG4t0QSC60EMRo3GrEiekF5p0DV3EI16st0/0vbEGOtP7/rqdoXN8Z22M4I/NK0zUu5zV1V6lk0mGiH0N8bAJajFCz1h4Yyf3U0JqaklDYycayR3XQMiAy45M5KilUrlH6HUL3vJg2G2lVw/AAAAAElFTkSuQmCC'



var img = window.document.createElement('img');
img.src = imgBase64;


//裁剪

console.log('img.width , img.height', img.width, img.height);
            if (!img.width || !img.height) {
                console.log('img', img);
                throw { msg: '裁剪图片失败，请重新选择图片' };
            }


            if (img.width > img.height) {
                var sx = (img.width - img.height) / 2;
                var sy = 0;
                var maxSize = img.height;
            }
            else {
                var sx = 0;
                var sy = (img.height - img.width) / 2;
                var maxSize = img.width;
            }
var canvas = document.createElement('canvas');
            canvas.width = size;
            canvas.height = size;
            var context = canvas.getContext("2d");
            context.drawImage(img, sx, sy, maxSize, maxSize, 0, 0, size, size);


            var base64 = canvas.toDataURL('image/png');
            var imgData = base64.split(',')[1];
            var binaryData = window.atob(imgData);
            var ia = new Uint8Array(binaryData.length);
            for (var i = 0; i < binaryData.length; i++) {
                ia[i] = binaryData.charCodeAt(i);
            }
            var blob = new Blob([ia], { type: "image/png" });
            console.log('blob.size', blob.size);
            return blob;

如上代码在99%的情况下都没有问题，但偶尔：

console.log('img.width , img.height', img.width, img.height);

这句话会输出：

img.width , img.height',0,0

注意，图片高度、宽度为0！！！！！！

图片是有高度和宽度的，但这种写法却没有，导致图片不显示！！！

如下写才是安全的：

img.onload=function(e){

console.log('img.width , img.height', img.width, img.height);  

//开始截图等代码

}

也就是说img.src=imgBase64后，不能保证img对象同步生成

effevo技术团队出品（https://effevo.com）
这里写图片描述