异步调用 AngularJS 不适用于 Canvas HTML

Question

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

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

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

谢谢。

main - 假设 $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)
      });

填充Canvas()

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(canvas选项)

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/

异步调用 AngularJS 不适用于 Canvas HTML

Asynchronous call AngularJS not working with Canvas HTML

javascript

angularjs

canvas

asynchronous