javascript - 异步调用 AngularJS 不适用于 Canvas HTML

Question

我试图在 Canvas HTML 填充图像源 fillCanvas() 后添加横幅 addBanner()。但是，根据我当前的设置，延迟不会在我需要时触发。

现在发生的情况是，在 addBanner 中它认为 Canvas 大小是 150x300。然而，在调用 fillCanvas() 后，图像要大得多，为 800xZ。加载所有内容后， Canvas 会加载完整的图像 (800xZ) 大，因此横幅放置在错误的位置。

那么如何首先调用 filLCanvas() 并在完成后调用 addBanner() ？

谢谢。

ma​​in - 假设 $q 被注入(inject) Controller

fillCanvas("empty").then(function(canvasOpt) {
          window.alert(canvasOpt.cw) // shows 300, but it should be far larger
          addBanner(canvasOpt);
      },
      function(err) {
          window.alert(err)
      });

fillCanvas()

function fillCanvas() {

    // $q
    var deferred = $q.defer()

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var img=new Image();
    img.onload=start;
    img.src = "img/struddle.jpg"


    // *****************
    // resize image to 800xZ or Zx800
    // *****************
    var imgOrigWidth = img.width;
    var imgOrigHeight = img.height;


    var resizeRatio = 1;
    if (imgOrigHeight >= imgOrigWidth) {
      resizeRatio = 800/imgOrigHeight;
    } else {
      resizeRatio = 800/imgOrigWidth;
    }


    function start() {        


      canvas.width = img.width*resizeRatio;
      canvas.height = img.height*resizeRatio + 100;

      ctx.drawImage(img, 0, 0, img.width*resizeRatio, img.height*resizeRatio);

      var cw=canvas.width;
      var ch=canvas.height-100;


      }



      var canvasOpt = {
      ch: canvas.height,
      cw: canvas.width
      }

    // $q
    deferred.resolve(canvasOpt);

    // HERE I WANT IT TO SHOW THE SIZE OF THE RESIZED IMAGE, BUT IT SHOWS 150x300 (default value)
    window.alert("start: " + canvasOpt.cw + "x" + canvasOpt.ch)


    return deferred.promise;
}

addBanner(canvasOpt)

function addBanner(canvasOpt) {

  var element = document.getElementById('canvas');
  if (!element || !element.getContext) {
  return;
  }

  var context = element.getContext('2d');
  if (!context || !context.drawImage) {
   return;
  }


  // THIS SHOULD BE THE SIZE OF THE RESIZED IMAGE
  var cw = canvasOpt.cw;
  var ch = canvasOpt.ch;

  window.alert("addBanner: " + ch + "x" + cw)      

  context.fillStyle   = '#0066FF'; // set canvas background color
  context.fillRect  (0, ch-100, cw, 100);  // now fill the canvas 

  context.fillStyle    = '#FFFFFF';  // set text color
  context.font         = '16px Verdana';  // set text font
  context.textBaseline = 'top';  // set text position 
  context.fillText  ('Scan the QR code', ch-100, cw);  // set the text with my blogs URL


  // create and draw the google generated qr-code image  
  var google_img = new Image();
  google_img.addEventListener('load', function () {
    context.drawImage(this, 0, ch-100, 50, 50);
  },false);

  var chlStr = "Hello Fabrice"
  google_img.src = "https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=" + chlStr + "&choe=UTF-8";


} // addBanner()

Answer 1

将“deferred.resolve(canvasOpt)”移至fillcanvas方法中的start函数中，同时将图像计算部分移至start方法中。

function start() {

            // *****************
            // resize image to 800xZ or Zx800
            // *****************
            var imgOrigWidth = img.width;
            var imgOrigHeight = img.height;


            var resizeRatio = 1;
            if (imgOrigHeight >= imgOrigWidth) {
                resizeRatio = 800 / imgOrigHeight;
            } else {
                resizeRatio = 800 / imgOrigWidth;
            }


            canvas.width = img.width * resizeRatio;
            canvas.height = img.height * resizeRatio + 100;

            ctx.drawImage(img, 0, 0, img.width * resizeRatio, img.height * resizeRatio);

            var cw = canvas.width;
            var ch = canvas.height - 100;

            var canvasOpt = {
                ch: canvas.height,
                cw: canvas.width
            }

            // $q
            deferred.resolve(canvasOpt);

            // HERE I WANT IT TO SHOW THE SIZE OF THE RESIZED IMAGE, BUT IT SHOWS 150x300 (default value)
            window.alert("start: " + canvasOpt.cw + "x" + canvasOpt.ch)

        }

引用 fiddle http://jsfiddle.net/tedvt37c/1/