Imagenerator
[0.0.1-beta.01]
Imagenerator
[0.0.1-beta.01]
All (Default) Options
// All options with descriptions
new Imagenerator({
direction: 'ltr', // "ltr" || "rtl"
type: 'jpeg', // "png" || "jpeg" || "webp"
quailty: 0.75, // "0.25" <-> "1"
fontFix: false, // double-check for external font families (e.g. Google Fonts, etc...)
background: {
url: '...', // background url
crossorigin: 'anonymous', // crossorigin
width: 1920, // width
height: 1920, // height
overlayColor: 'rgba(0,0,0,0.4)', // background overlay color
},
title: {
use: true, // use title
positionTop: 300, // title position top
text: 'Imagenerator', // title text
maxLength: 120, // title text max length
fontFamily: 'sans-serif', // title text font family
fontSize: 80, // title text font size
fontWeight: 600, // title text font weight
textAlign: 'center', // title text alignment => "left" || "center" || "right"
color: '#fff', // title text color
shadowColor: 'rgba(0,0,0,0.2)', // title text shadow color
shadowBlur: 120, // title text shadow blur
},
icon: {
use: true, // use icon
url: '...', // icon url
crossorigin: 'anonymous', // crossorigin
width: 240, // width
height: 240, // height
positionTop: 480, // icon position top
align: 'center', // icon alignment => "left" || "center" || "right"
opacity: 1, // icon opacity
shadowColor: 'rgba(0,0,0,0.2)', // icon shadow color
shadowBlur: 120, // icon shadow blur
},
description: {
use: true, // use description
positionTop: 900, // description position top
text: 'There are two Mustafa Kemal: One is me, flesh and bone, a temporary Mustafa Kemal... I cannot express the other Mustafa Kemal with the word "I"; it is us, not me! The other one is an intellectual and warrior community in every corner of the country striving for new ideas, new life, and great ideals. I am representing their dreams. My attempts are to satisfy what they long for. That Mustafa Kemal is you; you are all. The other Mustafa Kemal, who is not temporary, has to live and be successful!', // description text
maxLength: 500, // description text max length
fontFamily: 'sans-serif', // description text font family
fontSize: 50, // description text font size
fontWeight: 400, // description text font weight
textAlign: 'center', // description text alignment => "left" || "center" || "right"
color: '#f8f8f8', // description text color
shadowColor: 'rgba(0,0,0,0.2)', // description text shadow color
shadowBlur: 120, // description text shadow blur
},
author: {
use: true, // use author
positionTop: 1600, // author position top
text: '- Mustafa Kemal ATATURK -', // author text
maxLength: 120, // author text max length
fontFamily: 'sans-serif', // author text font family
fontSize: 40, // author text font size
fontWeight: 400, // author text font weight
textAlign: 'center', // author text alignment => "left" || "center" || "right"
color: '#c4c4c4', // author text color
shadowColor: 'rgba(0,0,0,0.2)', // author text shadow color
shadowBlur: 120, // author text shadow blur
},
footer: {
use: true, // use footer
positionBottom: 100, // footer position bottom
text: 'github.com/furcan', // footer text
maxLength: 120, // footer text max length
fontFamily: 'sans-serif', // footer text font family
fontSize: 35, // footer text font size
fontWeight: 400, // footer text font weight
textAlign: 'center', // footer text alignment => "left" || "center" || "right"
color: '#a9a9a9', // footer text color
shadowColor: 'rgba(0,0,0,0.2)', // footer text shadow color
shadowBlur: 120, // footer text shadow blur
},
});
GetBase64();
// Imagenerator.GetBase64();
new Imagenerator({
// initialize...
}).GetBase64(function (response) {
// The "response" argument is an object and has two properties.
// The "response.loading" can be used while the image is being generated.
// The "response.base64" is the generated image as Base64.
if (response.loading) {
// Can be shown a loading spinner, etc...
} else {
// The Base64 data can be used for an image as src to display it, and/or an anchor attribute as href to download...
var base64 = response.base64;
exampleImgElement.setAttribute('src', base64);
}
});