<html lang="en">
<header>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
</header>
<body>
<canvas id="canvas">
</canvas>
<script>
let json;
let pageJSON;
var canvas;
var element;
const STAGE_RESOURCE_BASE = "https://d33r26vb2a4c28.cloudfront.net/photoadking-test/";
const HOST = { USER_UPLOADED_FONT: STAGE_RESOURCE_BASE }
const json_data = {
"requestData": {
"json_data": {
"344516": {
"background_json": {
"background_image": "",
"background_color": ""
},
"sample_image": "",
"height": 800,
"width": 650,
"display_height": "800",
"display_width": "650",
"display_size_type": "px",
"user_template_category": "Flyer",
"is_featured": 0,
"is_portrait": 0,
"page_id": 344516,
"page_index": 1,
"canvasJSON": {
"objects": [
{
"type": "i-text",
"originX": "left",
"originY": "top",
"left": 136,
"top": 360,
"width": 417.94921875,
"height": 118.65,
"fill": "#000000",
"stroke": "#ffffff",
"strokeWidth": 0,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": {
"color": "#000000",
"blur": 0,
"offsetX": 0,
"offsetY": 0,
"affectStroke": false
},
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"text": "નમસ્તે Hello शहर",
"fontSize": 60,
"fontWeight": "",
"fontFamily": "Roboto-Regular",
"fontStyle": "",
"lineHeight": 1.16,
"textDecoration": "",
"textAlign": "left",
"textBackgroundColor": "",
"charSpacing": 0,
"excludeFromExport": false,
"_controlsVisibility": {
"tl": true,
"tr": true,
"br": true,
"bl": true,
"ml": false,
"mt": false,
"mr": false,
"mb": false,
"mtr": true
},
"isLocked": false,
"styles": {
"0": {
"1": {}
}
},
"customSourceType": "text_json",
"bg_image": "",
"texture_image": "",
"id": 795113,
"index": 0
}
],
"overlayImage": ""
},
"threedObject": [],
"svg_json": [],
"tool_json": []
}
},
"totalCanvasObject": 1,
"zoomLevel": 75,
"my_design_id": "7wtwv41ef91417",
"pages_sequence": [
344516
],
}
}
json = json_data.requestData;
pageStack = json_data.requestData.pages_sequence
original_pageStack = [...pageStack]
currentPage = pageStack[0];
loadCanvas(currentPage).then(() => { })
async function loadCanvas(currentPageId) {
let promises = []
let promiseLength
fabric.crossOrigin = "anonymous";
pageJSON = json.json_data[currentPageId]
if (pageJSON) {
pageJSON.canvasJSON.overlayImage = '';
element = document.getElementById('canvas');
canvas = new fabric.Canvas(element);
canvas.setWidth(pageJSON.width);
canvas.setHeight(pageJSON.height);
if (pageJSON.canvasJSON.objects.length > 0) {
for (var i = 0; i < pageJSON.canvasJSON.objects.length; i++) {
if (i == pageJSON.canvasJSON.objects.length - 1) {
loopAllFontFirst().then(async (result) => {
fabric.util.clearFabricFontCache();
canvas.loadFromJSON(pageJSON.canvasJSON, async () => {
canvas.renderAll.bind(canvas);
});
});
}
}
}
}
}
function loopAllFontFirst() {
let promises = [];
if (pageJSON.canvasJSON.objects) {
pageJSON.canvasJSON.objects.forEach(element => {
if (element.type == 'i-text' || element.type == 'curved-text') {
promises.push(loadFontToDocument(element));
} else { promises.push([]) }
});
}
if (promises.length > 0) {
return new Promise(resolve => { Promise.all(promises).then((results) => { resolve(); }).catch((e) => { resolve(); }); });
}
}
async function loadFontToDocument(element) {
return new Promise((resolve) => {
if (element.font_path && element.font_path != '') {
if (element.font_path.split('/')[0] == 'user_uploaded_fonts') {
let font_path = element.font_path.replaceAll(' ', '%20')
var f = new FontFace(element.fontFamily, `url(${HOST.USER_UPLOADED_FONT + font_path})`);
f.load(null, 5000).then(function (loadedFace) {
document.fonts.add(loadedFace);
canvas.renderAll()
resolve(element)
}).catch(function (error) {
console.log(error, "error")
});
} else {
let local_font_path = element.font_path.replaceAll(' ', '\ ')
const LOCAL_URL = `"../../assets/fonts/pak/${element.font_path.split('/')[1]}"`
var f = new FontFace(element.fontFamily, `url(${LOCAL_URL})`);
f.load().then(function (loadedFace) {
document.fonts.add(loadedFace);
canvas.renderAll();
resolve(element)
}).catch(function (error) {
console.log(error, "error")
});
}
} else {
// const LOCAL_URL = '../../assets/fonts/pak/Roboto-Regular.ttf'
const LOCAL_URL = 'https://d3jmn01ri1fzgl.cloudfront.net/photoadking/fonts/Roboto-Regular.ttf'
var f = new FontFace(element.fontFamily, `url(${LOCAL_URL})`);//'url(./fonts/Roboto-Regular.ttf)')
f.load().then(function (loadedFace) {
document.fonts.add(loadedFace);
canvas.renderAll();
resolve(element)
}).catch(function (error) {
console.log(error, "error")
});
}
})
}
</script>
</body>
</html>
In the context of Fabric Canvas i-Text, we are encountering an issue where text with Roboto-Regular fontFamily rendering behaves differently on Windows and Linux systems for non-English languages. Specifically, when we try to display text in languages other than English, the fonts used for rendering vary between the two operating systems.
my goal is to ensure uniform text rendering across both Windows and Linux platforms, especially when dealing with non-English characters.