获取Canvas内图片Base64数据异常：更换图片后数据无变化求助

问题根源在于图片加载是异步操作，你当前代码里的canvas.toDataURL()是在调用make_base()后立刻执行的，此时图片还没加载完成，画布上根本没绘制任何内容，所以每次导出的都是空画布的Base64数据，自然换图片也不会有变化。

解决方法很直接：把获取Base64的代码放到图片的onload回调函数内部，确保图片绘制完成后再导出数据。同时注意变量声明，避免全局变量污染。

修改后的代码示例：

<!DOCTYPE html>
<html>
    <body>
        <canvas id="viewport" style="border:1px solid #d3d3d3;"></canvas>
        <script>
            var canvas = document.getElementById('viewport'),
                context = canvas.getContext('2d');

            make_base();

            function make_base() {
                // 用let声明变量，避免全局污染
                let base_image = new Image();
                base_image.src = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
                base_image.onload = function(){
                    // 先完成图片绘制
                    context.drawImage(base_image, 0, 0);
                    // 绘制完成后再获取Base64数据
                    const base64Canvas = canvas.toDataURL("image/jpeg").split(';base64,')[1];
                    document.write('<br>');
                    document.write(base64Canvas);
                }
            }
        </script>
    </body>
</html>

额外提示：如果后续需要切换不同图片，也要确保每次更换图片资源后，都在新图片的onload回调里重新执行绘制和导出操作，不能在回调外部直接调用导出方法，否则还是会拿到旧画布内容或空画布的数据。

内容的提问来源于stack exchange，提问作者Saeed Eisakhani