Canvas Греческие шрифты Google не отображаются правильно

Question

Я предполагаю, что это ошибка, но если кто-либо из вас знает какую-либо работу, пожалуйста, дайте мне знать.

Прежде всего, шрифты загружаются 101%.

1. загружает шрифты Google синхронно

2. проверяет с интервалом, чтобы убедиться, что загружен шрифт.

3. преобразовать строку в изображение (с ниже функцией), используя холст с успехом (когда я использую английские символы)

4. После рендеринга пары английских символов я пытаюсь сделать греческое слово но холст падает на шрифт браузера по умолчанию.

5. У Firefox нет никаких проблем, он отлично работает. Вопрос: с Chrome.

пыльник это функция, которая создает фон ленточная этикетки изображение на верхнем левом углу от заданной строки (PS: эта функция возвращает ImageData которые были слиты с другими ImageData позже):

ImageProcessor.prototype.createLabelImageData = function (str, size, font, color, backgroundColor, shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur, width, height) { 

    this.canvas.width = width || this.settings.width; 
    this.canvas.height = height || this.settings.height; 
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); 

    this.ctx.font = "Bold " + (size || 64) + "px " + (font || "Arial"); 
    this.ctx.textAlign = "center"; 
    this.ctx.textBaseline = "middle"; 

    var labelHeight = (size || 64) + ((size || 64)/4); 
    var labelTop = this.canvas.height/2 - labelHeight/2; 
    var labelWidth = this.canvas.width; 

    var strLen = this.ctx.measureText(str + " ").width; 
    var side = Math.sqrt((strLen * strLen)/2); 
    var distance = Math.sqrt((side * side) - ((strLen/2) * (strLen/2))); 

    this.ctx.save(); 
    this.ctx.rotate(-Math.PI/4); 
    this.ctx.translate(-this.canvas.width/2, -this.canvas.height/2 + distance); 

    this.ctx.fillStyle = (backgroundColor || '#f00'); 
    this.ctx.beginPath(); 
    this.ctx.moveTo(0, labelTop); 
    this.ctx.lineTo(labelWidth, labelTop); 
    this.ctx.lineTo(labelWidth, labelTop + labelHeight); 
    this.ctx.lineTo(0, labelTop + labelHeight); 
    this.ctx.closePath(); 
    this.ctx.fill(); 

    if (shadowColor) { 

     this.ctx.shadowColor = shadowColor; 
     this.ctx.shadowOffsetX = (shadowOffsetX || 0); 
     this.ctx.shadowOffsetY = (shadowOffsetY || 0); 
     this.ctx.shadowBlur = (shadowBlur || size || 64); 

    } 

    this.ctx.fillStyle = (color || "#fff"); 
    this.ctx.fillText(str, this.canvas.width/2, this.canvas.height/2); 
    this.ctx.restore(); 

    var imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height); 

    this.canvas.width = this.settings.width; 
    this.canvas.height = this.settings.height; 

    return imageData; 

}; 

Answer 1

Ну после некоторых испытаний, проб и ошибок, и много много часов чтения ...

я узнал, что это не имеет значения, если шрифт был загружен, когда вы хотите использовать его в холсте. Что работало для меня раньше всего, и любая проверка заключалась в создании n * 2 элементов div (n количество загруженных шрифтов) и размещение их вне порта вида. n * 2, потому что в некоторых я добавил font-weight:bold.

Суть в том, что точный шрифт, который вы хотите использовать в холст должен быть:

1. Поджатая
2. Создать фиктивный Dóm элемент с innerHTML текстом всех языковых вариаций (латинская & Грека в моем случае).

Держите в середине, что вам нужно создать дополнительные элементы для смелой вариации шрифта.

Вот код, который я использую для предварительной загрузки шрифтов и обеспечения их доступности на холсте.

Vise.prototype.initializeFonts = function (settings, globalCallback) { 



    var that = this; // reference to parent class 



    /******************************************** 
    ******************************************** 
    ** 
    ** 
    **  Default settings 
    ** 
    ** 
    ******************************************** 
    ********************************************/ 



    var defaults = { 
     interval: 100, 
     timeout: 10000, 
     families: [ 
      'Open+Sans+Condensed:300,300italic,700:latin,greek', 
      'Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800:latin,greek', 
      'Roboto+Condensed:300italic,400italic,700italic,400,700,300:latin,greek', 
      'Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic:latin,greek' 
     ] 
    }; 

    // initialization 

    this.fonts = new Fonts($.extend(true, defaults, settings)); 
    this.fonts.onload = globalCallback; 
    this.fonts.load(); 

}; 



/******************************************** 
******************************************** 
** 
** 
**  Fonts class 
** 
** 
******************************************** 
********************************************/ 



function Fonts(settings) { 

    this.settings = settings; 
    this.success = []; 
    this.fail = []; 
    this.interval = null; 
    this.elapsedTime = this.settings.interval; 
    this.fontDetective = new Detector(); 

} 

Fonts.prototype.load = function() { 

    WebFont.load({ 
     google: { 
      families: this.settings.families 
     } 
    }); 

    for (var i in this.settings.families) { 

     var el, elBold; 
     var familyStr = this.settings.families[ i ]; 
     var family = familyStr.split(':')[ 0 ].replace(/[+]/gi, ' '); 

     el = document.createElement("div"); 
     el.innerHTML = "Font loader Φόρτωμα γραμματοσειράς"; 
     el.style.fontFamily = family; 
     el.style.color = "#f00"; 
     el.style.position = "fixed"; 
     el.style.zIndex = 9999; 
     el.style.left = "9999px"; 
     document.body.appendChild(el); 

     elBold = document.createElement("div"); 
     elBold.innerHTML = "Font loader Φόρτωμα γραμματοσειράς"; 
     elBold.style.fontFamily = family; 
     elBold.style.fontWeight = "bold"; 
     elBold.style.color = "#f00"; 
     elBold.style.position = "fixed"; 
     elBold.style.zIndex = 9999; 
     elBold.style.left = "9999px"; 
     document.body.appendChild(elBold); 

    } 

    this.interval = setInterval(this.areLoaded.bind(this), this.settings.interval); 

}; 

Fonts.prototype.areLoaded = function() { 

    for (var i in this.settings.families) { 

     var familyStr = this.settings.families[ i ]; 
     var family = familyStr.split(':')[ 0 ].replace(/[+]/gi, ' '); 
     var successIdx, failIdx; 

     if (this.fontDetective.detect(family)) { 

      successIdx = this.success.indexOf(family); 
      failIdx = this.fail.indexOf(family); 

      if (successIdx === -1) { 
       this.success.push(family); 
       console.log("[" + family + "] was successfully loaded."); 
      } 

      if (failIdx > -1) { 
       this.fail.splice(failIdx, 1); 
      } 

     } else { 

      successIdx = this.success.indexOf(family); 
      failIdx = this.fail.indexOf(family); 

      if (successIdx > -1) { 
       this.success.splice(successIdx, 1); 
      } 

      if (failIdx === -1) { 
       this.fail.push(family); 
      } 

     } 

    } 

    if (this.elapsedTime >= this.settings.timeout) { 

     clearInterval(this.interval); 

     var err = new Error("Unable to load fonts: " + this.fail.toString()); 

     this.onload(err, null); 

     return; 
    } 

    if (this.success.length === this.settings.families.length) { 

     clearInterval(this.interval); 

     this.onload(null, null); 

     return; 
    } 

    this.elapsedTime += this.settings.interval; 

}; 

Это то, что сработало для меня, если у кого-то другая проблема на хроме.

PS: Посмотрите на fontdetect.js, который я использую в своем коде.