Comments (7)
from node-pureimage.
Glad to hear that! love this pure js canvas lib so much.
from node-pureimage.
I've finished and merged the refactor branch. Could you get the latest build and see if there is still a problem?
from node-pureimage.
Very thx for the updating!
there seems some other problems:
1.SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
would be fixed if you add a "use strict";
to the src/text.js
2.TypeError: FONT.loadSync is not a function
Not sure how to fix this.
from node-pureimage.
I can fix the let/const stuff. Can you send me the code you are running so I can identify the loadsync part?
from node-pureimage.
@joshmarinacci It's a part of my project which is big.
'use strict';
const _ = require('lodash');
const co = require('co');
const fs = require('fs');
const path = require('path');
const PImage = require('pureimage');
const Promise = require('bluebird');
const config = require('../config/index.js');
module.exports = (User, options) => {
const avatarDir = path.resolve(__dirname, '../../client', config.userAvatarMixin.avatarDir);
if (!fs.existsSync(avatarDir)) {
fs.mkdir(avatarDir);
}
const encodePNG = Promise.promisify((img, fileName, callback) => {
PImage.encodePNG(
img,
fs.createWriteStream(fileName),
(err) => {
callback(err, fileName);
});
});
const SIZE = config.userAvatarMixin.size;
const FONT = PImage.registerFont(
path.resolve(__dirname, '../../client', config.userAvatarMixin.font),
'AVATAR FONT');
FONT.loadSync();
const BGCOLORS = config.userAvatarMixin.backgroundColors;
User.observe('after save', (ctx, next) => {
co(function*() {
if (ctx.instance && !ctx.instance.avatar) {
const user = ctx.instance;
const avatar = PImage.make(SIZE, SIZE);
const g2d = avatar.getContext('2d');
g2d.fillStyle = BGCOLORS[_.random(BGCOLORS.length - 1)];
// g2d.fillRect(0, 0, SIZE, SIZE);
g2d.fillRect(-1, -1, SIZE + 1, SIZE + 1);
g2d.fillStyle = '#FFFFFF';
g2d.setFont('AVATAR FONT', config.userAvatarMixin.fontSize);
const name = user.username.substr(0, 1).toUpperCase();
const dimention = g2d.measureText(name);
dimention.height = dimention.emHeightAscent + dimention.emHeightDescent;
g2d.fillText(
name,
(SIZE - dimention.width) / 2 + 1,
(SIZE - dimention.height / 2));
const avatarDir = path.resolve(__dirname, '../../client', config.userAvatarMixin.avatarDir);
const file = yield encodePNG(avatar, `${avatarDir}/avatar-${user.id}.png`);
yield user.updateAttribute('avatar', `/${path.basename(avatarDir)}/${path.relative(avatarDir, file)}`);
}
next();
}).catch((err) => {
console.error(err);
next(err);
});
});
};
I paste it here directly and hope it would help.
from node-pureimage.
Ah yes. LoadSync doesn't exist anymore. You must load fonts asynchronously using .load(). It works like this
var fnt = PImage.registerFont('tests/fonts/SourceSansPro-Regular.ttf','Source Sans Pro');
fnt.load(function() {
var img = PImage.make(200,200);
.. do stuff that uses the font
});
from node-pureimage.
Related Issues (20)
- Please support lineCap
- Transparent background HOT 2
- Create a virtual Canvas (without `canvas#data` object)
- Image transparency overwrites existing content
- Error: export 'make' (imported as 'PImage') was not found in 'pureimage' (module has no exports) HOT 7
- [feature request] setting the encode option (e.g. PNG compression level) HOT 4
- Can this run on the browser? HOT 2
- NPM packages are missing TypeScript types HOT 6
- make() is deprecated HOT 2
- Setting background colour on large canvas takes a LONG time HOT 3
- Error [ERR_MODULE_NOT_FOUND]: Cannot find package in version 0.4.11 HOT 4
- NPM version 0.4.11 is missing the dist folder. HOT 2
- fillText problem HOT 3
- strokeRect doesn't respect lineWidth HOT 1
- very bad performance HOT 5
- Filled counters in text HOT 2
- lineTo stops without success or error HOT 1
- Fails to import pureimage with moduleResolution: nodenext
- fillText is drawn in only one font out of many. HOT 2
- context.drawImage method "scuffs" the original image HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from node-pureimage.