前端 canvas toDataURL() 转图片生成空白图片问题

前端 canvas toDataUrl() 转图片生成空白图片问题

前言：如果你在开发过程中，也发生该类似情况，不妨尝试一下以下方法！

感谢大神

感谢 stackoverflow 格曼大神的答案
原文链接：Canvas toDataURL() returns blank image

解决方法

// 页面初始化时候，自执行该函数
<script>
HTMLCanvasElement.prototype.getContext = function(origFn) {
   
  return function(type, attributes) {
   
    if (type === 'webgl') {
   
      attributes = Object.assign({
   }, attributes, {
   
        preserveDrawingBuffer: true,
      });
    }
    return origFn.call(this, type, attributes);
  };
}(HTMLCanvasElement.prototype.getContext);
</script>

问题发生

用过百度、高德、谷歌等任意地图的你，必然有遇上这么一个情况：当你快速放大/缩小地图时，必然会优先预加载一块一块白布，然后主要地图内容才跟着展示出来（网速慢的时候更明显！࿰