异步调用 AngularJS 不适用于 Canvas HTML

Asynchronous call AngularJS not working with Canvas HTML

本文关键字：Canvas HTML 适用于 不适用 调用 AngularJS 异步      更新时间：2023-09-26

我正在尝试在画布 HTML 填充图像源fillCanvas()后添加横幅addBanner()。但是，使用我当前的设置，defferred 不会在我需要时触发。

现在发生的事情是，在addBanner中，它认为画布大小为150x300。但是，在调用 fillCanvas（） 后，图像要大得多 800xZ。加载完所有内容后，画布将加载完整的图像 （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)
      });

填充画布（）

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()

将"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/

相关文章：