为什么toDataURL出来的base64是空白的？

Question

问题描述

为什么toDataURL出来的base64是空白的？

问题出现的环境背景及自己尝试过哪些方法

更具已经知道的坐标点，生成图片，转base64

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
var area = {

  'ship'  : {'x':10,'y':10,'w':100,'h':25},
  'order'  : {'x':15,'y':40,'w':110,'h':35},
  'port'  : {'x':90,'y':100,'w':180,'h':55}      

}

var base = get_base64('1212121.jpg',area);

for(var i in base){

var img = '<img src="'+base[i]+'">';
$('body').append(img);

}

function get_base64(url,area){

 base=[];
  for(var i in area){
    var base64 = canvas_to_base64(area[i].x,area[i].y,area[i].w,area[i].h,url);
    base.push(base64);
  }
  return base;

}
function canvas_to_base64(ax,ay,aw,ah,url){

  var imgCanvas = $("<canvas id='cava'>")[0];
      imgCanvas.width = aw;
      imgCanvas.height = ah;
  var imgContext = imgCanvas.getContext("2d");
  var img = new Image(); 
  img.src = url;
  img.addEventListener('load',imgeve,false)
  function imgeve(){
    drawScreen();
  }
  function drawScreen(){
    imgContext.drawImage(img, 0, 0);
    imgContext.drawImage(img,ax,ay,aw,ah,0,0,aw,ah);
  }
  // 插入到body中可以显示出来
  $('body').append(imgCanvas);
  // 生成的base64是空白的  
  console.log(imgCanvas.toDataURL('image/jpg'));
  return imgCanvas.toDataURL('image/jpg');

}
// 问题截出的是透明，只截到画布？图片没插到画布里面？图片还没加载完毕，画布已经截好了？

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

正如你的猜想，图片还没加载完毕，画布已经截好了。

imgCanvas.toDataURL('image/jpg')执行的时候,drawScreen函数还没运行，所以你获取不到数据。body中可以显示，因为是等待图片加载完成才执行的drawScreen函数。

Answer 2

老板有解决吗，我也遇到这种情况啦