異步調用AngularJS無法與Canvas HTML一起使用

Question

我想添加一個橫幅addBanner()畫布HTML已經充滿圖像源后fillCanvas() 但是，在我當前的設置中，當我需要時，遞延項不會觸發。

現在發生的是，在addBanner中，它認為畫布大小為150x300。 但是，在調用fillCanvas（）之后，圖像要大得多，為800xZ。 加載完所有內容后，畫布會加載完整的圖片（800xZ），因此橫幅廣告放置在錯誤的位置。

那么，如何首先調用filLCanvas（）以及完成后如何調用addBanner（）？

謝謝。

主 -假設$ Q在控制器中注入

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)

        }

請參閱提琴http://jsfiddle.net/tedvt37c/1/