問題

在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物件同步生成