画布 - 火狐问题

在我的一个项目上工作时，我意识到我在使用canvas和JQuery来显示图像所呈现的文本时遇到问题。画布 - 火狐问题

代码：

//get values 
     var current = $(".activeText a div").attr('id'); 

     //get font family 
     var fFamily = $(".activeText a .fontType-cont").val(); 

     // default remove old 
     $(".customize-Container #draggable").remove(); 
     //create a canvas for image converting 

     $(".customize-Container").append("<div id='draggable'><canvas id='"+current+"'></canvas></div>"); 
     //create canvas 

     var canvas = document.getElementById(current), 
     ctx = canvas.getContext('2d'), 
     img = document.createElement('img'); 
     //draw it 
     img.onload = drawSmall; 
     img.src = $(".activeGColor").find('img').attr('src'); 

     function drawSmall() { 
      var text = $("#fontEnter").val(); 
      //define new font size 
      howMuch = startFontSize - howMuch; 
      //define var with new font size 
      startFontSize = howMuch; 
      //define text font size and family 
      ctx.font = howMuch + 'px ' + fFamily; 
      //fill with the text 
      ctx.fillText(text, 10, 100); 
      //draw text 
      ctx.globalCompositeOperation = 'source-in'; 
      ctx.drawImage(img, 10, 20, 500, 100); 
     }

这里是发生了什么，这是一个重新分级机内部的功能。这个特殊的功能减少了文字的大小。现在发生的事情是，在我使用类似的代码来显示文本之前，这是完美的。现在，一旦选择了该功能，文本就会消失，并且不会完成其处理，从而将画布留空。

我用alert()看它停在哪里，它似乎停止在img.onload = drawSmall;没有进入drawSmall()函数。

这个作品在Chrome浏览器中很完美（<-wow right？）让我知道你的建议。

大卫

UPDATE：

刚刚意识到Firefox是告诉我这一点：

[14:08:46.456] ReferenceError: drawSmall is not defined @ ../wp-content/themes/twentytwelve/js/jquery-latest.min.js:297

来源

2013-07-12 David Biga

是的，令人惊讶的是，IE目前比Firefox好。这是因为从版本4开始Firefox就已经被吸引了，我真的希望他们能够让自己的屁股变得有用。与Chrome一样，程度较低。他们花了四年的时间来修复我报告的错误，并花了10分钟的时间才真正解决了这个问题... –

@Kolink没有什么比Chrome ...反正任何想法？ –

我不同意。 Chrome仍然不支持'linear-gradient'，'transition'，'transform'，'animation'等前缀不正确的代码，导致大量的“Chrome专用”代码......然而，IE10完全跳过了很多这些前缀阶段，支持正确的版本。 –

滑稽的方式火狐的作品。这是需要发生：

function drawSmall() { 
     ... 
} 
//get values 
var current = $(".activeText a div").attr('id'); 
var text = $("#fontEnter").val(); 
//get font family 

..the rest

function drawSmall()是declared before画布正在申报需要。

来源

2013-07-12 19:13:13

画布 - 火狐问题

回答

相关问题