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

问题

在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）