when i'm generating qr images using easyqrcodejs-nodejs and save it in the azure storage texts in the image turns to squares. why is this happens? i used pdfkit and jspdf as the pdf generator. this also happens when i generating and saving the pdf also
var options = {
text: link,
logo: "https://spadesprodblob.blob.core.windows.net/file-storage/restaurant/1641807876154-lg1.png",
width: 220,
height: 220,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
title:`Table#${title}`,
titleFont: "normal normal bold 20px Arial", //font. default is "bold 16px Arial"
titleColor: "#000", // color. default is "#000"
titleBackgroundColor: "#fff", // background color. default is "#fff"
titleHeight: 30, // height, including subTitle. default is 0
titleTop: 10, // draws y coordinates. default is 30
subTitle: wifi,
subTitleFont: "normal normal normal 14px Arial", // font. default is "14px Arial"
subTitleColor: "#000", // color. default is "4F4F4F"
subTitleTop: 320, // draws y coordinates. default is 0
quietZoneColor: "rgba(255, 255, 255,0)",
quietZone: 75,
backgroundImage: 'https://spadesprodblob.blob.core.windows.net/file-storage/restaurant/1641802309587-background.png', // Background Image
backgroundImageAlpha: 1, // Background image transparency, value between 0 and 1. default is 1.
autoColorDark: "rgba(0, 0, 0, .6)",
binary: true,
};
// New instance with options
var qrcode = new QRCode(options);
const qr_code_url = await RestaurantService.uploadImageByPath(imageTemppath);
console.log(QRRes)
const image_base_url = await qrcode.toDataURL().then(data => {
return data
});
var doc = new jsPDF();
doc.addImage(image_base_url, 'PNG', 2, 20, 200, 200);
Related
how to solve this issue while typing text is correct after is not correct. seen in images
After
While Typing
var textInput = this.add.sprite(400, 380, 'textinput').setScale(0.6, 0.6);
const text = this.add.text(0, 0, '', { fixedWidth: 200, fixedHeight: 36 })
text.setOrigin(0.5, 0.5)
text.setInteractive().on('pointerdown', () => {
this.rexUI.edit(text)
})
Phaser.Display.Align.In.Center(text, textInput);
The problem is the parameter { fixedWidth: 200, fixedHeight: 36 }. Since those fixed sizes are used for the calculation, and by default the text is aligned top-right.
If you remove that parameter the text should be align in the center of the sprite. Alternativly you could try setting the alignment of the text, with the function setAlgin (link to documentation), but this only will change the horizontal alignment, not the vertical one.
var config = {
type: Phaser.AUTO,
width: 400,
height: 160,
scene: {
create
}
};
function create () {
let rect1 = this.add.rectangle(150, 80, 100, 50, 0xffffff)
.setOrigin(0);
let rect2 = this.add.rectangle(150, 10, 100, 50, 0xffffff)
.setOrigin(0);
let text1 = this.add.text(0, 160, 'TEXT 1 TEXT 1 TEXT 1')
.setBackgroundColor('#ff00ff');
let text2 = this.add.text(0, 160, 'TEXT 2 TEXT 2', { fixedWidth: 200, fixedHeight: 36 })
.setBackgroundColor('#ff00ff')
.setAlign('center');
Phaser.Display.Align.In.Center(text1, rect1)
Phaser.Display.Align.In.Center(text2, rect2)
}
new Phaser.Game(config);
<script src="//cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
Using Padding { fixedWidth: 200, fixedHeight: 40, padding: 8, })
I have an issue with OpenLayers (v 6.14.1 from npm) where the text on the text label is rather fuzzy.
See the attached image. Compare the text labels with the text in the dialog to the right.
I create the map with pixelRatio: 1, but that shouldn't affect this (?)
const map = new Map({
target: div,
view: new View({
center: fromLonLat ([startLocation.lon, startLocation.lat]),
zoom: startLocation.zoom,
constrainResolution: true,
}),
pixelRatio: 1, //Important, otherwise tiles (WMS) with strange size will be requested
});
I create the text label thus:
export default function (feature, resolution, options) {
return new Text ({
font: 'Normal 14px serif', // Normal 14px Arial
text: getText (feature, resolution, options),
fill: new Fill ({ color: 'black' }),
stroke: new Stroke ({ color: 'white', width: 2 }),
offsetX: -12,
offsetY: -8,
textAlign: 'right',
textBaseline: 'bottom',
placement: 'point',
});
}
I've already tried other fonts (e.g. a sans-serif).
I did as #Mike suggested - see their comment under the question - here's the result:
I think the labels are now a fair bit sharper. Picture doesn't show this too well tho'.
I'm using version 3.6.6 of fabricJS.
When double clicking on the text, I can no longer change the color of it. This is definitely a bug. Anyone find a workaround for this?
Here's the fiddle:
// Do some initializing stuff
fabric.Object.prototype.set({
transparentCorners: false,
cornerColor: 'rgba(102,153,255,0.5)',
cornerSize: 12,
padding: 5
});
var canvas = window._canvas = new fabric.Canvas('c');
let text = new fabric.IText('Some Selectable Text Here', {
strokeWidth: 0,
stroke: "#ffffff",
paintFirst: "stroke",
fill: '#000000',
fontFamily: 'Courier',
fontSize: 20,
typeOfObject: "text",
charSpacing: 0,
top:25,
left: 25,
});
// Set canvas width / height to one of watermarks boundary dimensions
canvas.setWidth(400);
canvas.setHeight(200);
canvas.backgroundColor = '#efefef';
// Add watermark to new canvas
canvas.add(text);
$('#cc').click( function() {
console.log(text);
text.set("fill", '#CC0000');
canvas.renderAll();
});
https://jsfiddle.net/busatlic/ok3rs0ay/60/
How to encounter the bug:
Double click select a portion of text
Type something to change it
Click "Change Color"
Output after following steps.
Thanks!
Trying to change style after having double clicked it and changed some text.
It should change the color of the whole text, but instead only changes the color of all of the text that was NOT double click selected and edited.
I am using fabric js version 1.7.22
I am working on one project in which I need to add text and it's editing.
When I add new iText in canvas and write some text and erase it. It shows me old cursor line in place of erased character,
I Can't generate this issue in fiddle So please check GIF.
I don't know where I am wrong.
Please Help Me.
My Itext added code is like this:
var text = new fabric.IText('Example heading', {
left: 10,
top: 10,
fontFamily: 'Roboto-Regular',
angle: 0,
fontSize: fontSize,
fill: '#000000',
fontWeight: '',
charSpacing: 0,
shadow: {
"color": "#000000",
"blur": 0,
"offsetX": 0,
"offsetY": 0,
"affectStroke": false
},
hasRotatingPoint: true
});
canvas.add(text);
this issue is caused due to text scaling.
the solution is also applied in a fiddle. but if the canvas is in zoom-out mode then the issue will regenerate.
I have Attach one fiddle for that :
https://jsfiddle.net/Mark_1998/ro8gc3zh/5/
When the IText cursor moves, fabric calls text._clearTextArea() to clear the canvas that draws the cursor. One possible solution would be to extend this area a little bit - just enough to remove the traces of the blinking cursor in all possible cases - by patching the fabric.IText.prototype._clearTextArea() method:
fabric.IText.prototype._clearTextArea = function(ctx) {
// was 'this.width + 4'
var width = this.width + this.fontSize * this.scaleX, height = this.height + 4;
ctx.clearRect(-width / 2, -height / 2, width, height);
}
Here's your example with the patch applied:
fabric.IText.prototype._clearTextArea = function(ctx) {
var width = this.width + this.fontSize * this.scaleX, height = this.height + 4;
ctx.clearRect(-width / 2, -height / 2, width, height);
}
var canvas = window._canvas = new fabric.Canvas('c');
var text = new fabric.IText('this is example text', {
left: 20,
top: 50,
fill: 'red',
scaleX: 0.5,
fontFamily: 'verdana'
});
canvas.add(text);
canvas.setActiveObject(text);
canvas.getActiveObject().enterEditing();
canvas.renderAll();
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
<h1>
Try to erase text from end
</h1>
<canvas id="c" width="300" height="150"></canvas>
This looks somewhat hacky, but it does the trick, for the lack of a better solution. A better way would be to back-port the IText from fabric v2 - this bug is fixed there.
I am developing a navigation application, which draws planned route on a map. Planned route consists of points connected with a line. Each point is labelled with distance and direction. When I initially draw the route on the map, I calculate text position in a way, where it doesn't interfere with the line - I use offsetX, offsetY and rotation style attributes. Unfortunately, when the map view is rotated, not of the mentioned attributes is changed - text is not rotated. Is there a way, how to rotate the text with the view, so it will remain on it's position relative to the point? I have already tried rotateWithView: true with both image and text parts.
My style is defined like:
return [new ol.style.Style({
image: new ol.style.Circle({
radius: 20,
fill: new ol.style.Fill({color: 'black'}),
stroke: new ol.style.Stroke({color: 'black', width: 1})
}),
text: new ol.style.Text({
textAlign: "center",
textBaseline: "middle",
font: 'normal 1.5rem Arial',
text: "This is my text",
fill: new ol.style.Fill({color: 'black'}),
stroke: new ol.style.Stroke({color: 'black', width: 1}),
offsetX: 10,
offsetY: 15,
rotation: 0.3
})
})];
Update feature rotation on map view property change event.
map.getView().on('propertychange', function(event) {
textStyle.setRotation(this.getRotation());
mySource.changed();
});
var textStyle = new ol.style.Text({
// ...
});
var layer = new ol.layer.Vector({
source: mySource,
style: new ol.style.Style({
text: textStyle,
// ...
})
});