Question

我想在Canvas HTML填充图像源addBanner()后添加横幅fillCanvas()。但是，根据我目前的设置，当我需要时，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)
      });

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/

异步调用AngularJS不能使用Canvas HTML

1 个答案: