Develop Reference

FabricJS convert json to png

I have created the following image as fabricjs-json:
The json looks like the following:
{
"version": "5.2.1",
"objects": [
{
"type": "circle",
"version": "5.2.1",
"originX": "center",
"originY": "center",
"left": "100",
"top": "100",
"width": "60",
"height": "60",
"fill": "#e53e3e",
"name": "a",
"radius": "30",
"stroke": null,
"padding": "0"
},
{
"type": "triangle",
"version": "5.2.1",
"originX": "center",
"originY": "center",
"left": "80",
"top": "229.13",
"fill": "#e0da2e",
"name": "b",
"height": "100",
"width": "100",
"stroke": null,
"padding": "0"
},
{
"type": "rect",
"version": "5.2.1",
"originX": "center",
"originY": "center",
"left": "303.02",
"top": "69.96",
"width": "50",
"height": "50",
"fill": "#4976d0",
"name": "c",
"rx": "0",
"ry": "0",
"stroke": null,
"padding": "0"
},
{
"type": "image",
"version": "5.2.1",
"originX": "center",
"originY": "center",
"left": "272.23",
"top": "287.63",
"width": "400",
"height": "400",
"scaleX": "0.58",
"scaleY": "0.58",
"name": "d",
"rx": "0",
"ry": "0",
"stroke": null,
"padding": "0",
"src": "https:\/\/picsum.photos\/id\/1014\/400",
"crossOrigin": null
},
{
"type": "textbox",
"version": "5.2.1",
"originX": "center",
"originY": "center",
"left": "210.97",
"top": "100",
"width": "265.14180221557615",
"height": "25.99",
"fill": "#000000",
"angle": "33.4",
"name": "e",
"text": "This awesome image",
"textAlign": "left",
"fontSize": "23",
"charSpacing": "7",
"lineHeight": "1.16",
"fontWeight": "400",
"fontFamily": "Inter",
"fontStyle": "normal",
"textBackgroundColor": null,
"maxHeight": "487",
"stroke": null,
"padding": "20"
}
],
"background": "#24bd0f"
}
I created the following script to convert the json to an image:
var fs = require('fs'),
fabric = require('fabric').fabric,
out = fs.createWriteStream(__dirname + '/output.png');
let jsonstr = fs.readFileSync(__dirname + '/json/test_json.json', 'utf-8');
let json = JSON.parse(jsonstr);
var canvas = new fabric.StaticCanvas(null, { width: 500, height: 500 });
canvas.loadFromJSON(json, function() {
canvas.renderAll.bind(canvas);
var dataUrlOutput = canvas.toDataURL(); // png is default format
console.log(dataUrlOutput)
fs.writeFile(__dirname + '/output/output.png', dataUrlOutput, function(err) {
if (err) throw err;
});
});
This is my package.json:
{
"name": "jsonToImage",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"canvas": "^2.9.3",
"fabric": "^5.2.4"
}
}
However, when opening the image I get:
I created the following sandbox to parse the json:
Codesandbox Example - JSONtoIMAGE
Any suggestions what I am doing wrong?
UPDATE
I checked the dataUrlOutput from the script and I get the following:
As you can see half of the elements are there.

There seem to be a few things going on, namely the formatting of your JSON, rendering the canvas, and saving the file in Node.
Formatting your JSON
The numbers in your json file are enclosed in quotes (e.g. "left": "100"), while for those numerical values, fabric.js expects them not to be in quotes (e.g. "left": 100). When there are quotes around the numbers, fabric.js seems to quasi-load some objects, but not others.
When you're saving your canvas as JSON, you can use JSON.stringify to ensure that the formatting is preserved. For example, JSON.stringify(canvas.toJSON());
Rendering the canvas
You're calling canvas.renderAll.bind(canvas), which creates a new function but doesn't call it. It should just be canvas.renderAll().
Saving an image
Saving a data url directly as a text file does not create an image in an encoded binary file. While you could use the data url to create a binary file (like from this answer), fabric.js adds some convenience functions to save a file, namely canvas.createPNGStream().
It looks something like this (thanks to this answer):
var out = fs.createWriteStream(__dirname + '/output.png');
var stream = canvas.createPNGStream();
stream.pipe(out);
All together
With the modified JSON and code, the results look something like this:
Your data file, 'json/test_json.json'
{
"version": "5.2.1",
"objects": [
{
"type": "circle",
"version": "5.2.1",
"originX": "center",
"originY": "center",
"left": 100,
"top": 100,
"width": 60,
"height": 60,
"fill": "#e53e3e",
"name": "a",
"radius": 30,
"stroke": null,
"padding": 0
},
{
"type": "triangle",
"version": "5.2.1",
"originX": "center",
"originY": "center",
"left": 80,
"top": 229.13,
"fill": "#e0da2e",
"name": "b",
"height": 100,
"width": 100,
"stroke": null,
"padding": 0
},
{
"type": "rect",
"version": "5.2.1",
"originX": "center",
"originY": "center",
"left": 303.02,
"top": 69.96,
"width": 50,
"height": 50,
"fill": "#4976d0",
"name": "c",
"rx": 0,
"ry": 0,
"stroke": null,
"padding": 0
},
{
"type": "image",
"version": "5.2.1",
"originX": "center",
"originY": "center",
"left": 272.23,
"top": 287.63,
"width": 400,
"height": 400,
"scaleX": 0.58,
"scaleY": 0.58,
"name": "d",
"rx": 0,
"ry": 0,
"stroke": null,
"padding": 0,
"src": "https:\/\/picsum.photos\/id\/1014\/400",
"crossOrigin": null
},
{
"type": "textbox",
"version": "5.2.1",
"originX": "center",
"originY": "center",
"left": 210.97,
"top": 100,
"width": 265.14180221557615,
"height": 25.99,
"fill": "#000000",
"angle": 33.4,
"name": "e",
"text": "This awesome image",
"textAlign": "left",
"fontSize": 23,
"charSpacing": 7,
"lineHeight": 1.16,
"fontWeight": 400,
"fontFamily": "Inter",
"fontStyle": "normal",
"textBackgroundColor": null,
"maxHeight": 487,
"stroke": null,
"padding": 20
}
],
"background": "#24bd0f"
}
And your node.js program:
var fs = require('fs'),
fabric = require('fabric').fabric,
out = fs.createWriteStream(__dirname + '/output.png');
let jsonstr = fs.readFileSync(__dirname + '/json/test_json.json', 'utf-8');
let json = JSON.parse(jsonstr);
var canvas = new fabric.StaticCanvas(null, { width: 500, height: 500 });
canvas.loadFromJSON(json, function() {
canvas.renderAll();
var stream = canvas.createPNGStream();
stream.pipe(out);
out.on('finish', function () {
// do something here
});
});
More reading:
http://fabricjs.com/fabric-intro-part-4 (the 'Fabric on Node.js' section)

how can I used a variable inside the chart ( the chart gets the values in json formats)

I have a chart in my side nav and I want to show some data on the chart, but when I used the variable it said that the variable is undefined. I used the https://www.zingchart.com/ library for my chart. I want to know what should I do to set the my value in the chart.
here is my code:
const a = 100;
const b = 200;
var myConfig = {
"type": "funnel",
"scale-y": {
"placement": "opposite",
"labels": ["Arash", "Trial Downloads", "Quote Requests", "Sales", "Renewals"],
"item": {
"font-color": "#999999",
"font-family": "Georgia"
}
},
"plot": {
"value-box": {
"text": "%v",
"placement": "left-out", //"auto"/"in", "top", "bottom", "left", "right", "left-out", or "right-out"
"font-color": "gray",
"font-family": "Georgia",
"font-size": 12,
"font-weight": "normal"
},
"min-exit": "10%",
"hover-state": {
"background-color": "purple",
"border-color": "gray",
"border-width": 3,
"line-style": "dashdot"
}
},
"series": [{
"values": [a],
"text": "Arash-arash",
"background-color": "red"
},
{
"values": [b],
"text": "arash2",
"background-color": "orange"
},
{
"values": [90],
"text": "Quote Requests",
"background-color": "yellow"
},
{
"values": [30],
"text": "Sales",
"background-color": "green"
},
{
"values": [15],
"text": "Renewals",
"background-color": "blue"
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: "100%",
width: "100%"
});

screenshot from zingchart documentation
you are not defining the property correctly, in the screenshot above from the documentation, it should be scaleY rather scale-y as defined in your code above

Shopify Buy Button Max Quantity

using a Shopify buy button to release a free product to users of a webapp. Need to make sure the users can only order a maximum of 1 item. Any ideas for how I can do this?
Shopify extensions are a no go, as the buy button does not load them. Also experimented with checkout links, and those will not be able to prevent double orders.
Here is the code for the buy button:
<script type="text/javascript">
/*<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
var script = document.createElement('script');
script.async = true;
script.src = scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: 'heavysoundlabs.myshopify.com',
storefrontAccessToken: '28703a091818546612d47f7c83047f6f',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '4713512665151',
node: document.getElementById('product-component-1598466400618'),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"styles": {
"product": {
"#media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px"
}
},
"title": {
"font-family": "PT Sans, sans-serif",
"font-weight": "normal"
},
"button": {
"font-family": "PT Sans, sans-serif",
"font-size": "14px",
"padding-top": "15px",
"padding-bottom": "15px",
":hover": {
"background-color": "#e3ac00"
},
"background-color": "#fcbf00",
":focus": {
"background-color": "#e3ac00"
},
"padding-left": "14px",
"padding-right": "14px"
},
"quantityInput": {
"font-size": "14px",
"padding-top": "15px",
"padding-bottom": "15px"
},
"price": {
"font-family": "PT Sans, sans-serif"
},
"compareAt": {
"font-family": "PT Sans, sans-serif"
},
"unitPrice": {
"font-family": "PT Sans, sans-serif"
}
},
"buttonDestination": "checkout",
"contents": {
"img": false,
"title": false,
"price": false
},
"text": {
"button": "Get it now!"
},
"googleFonts": [
"PT Sans"
]
},
"productSet": {
"styles": {
"products": {
"#media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true
},
"styles": {
"product": {
"#media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
"font-family": "PT Sans, sans-serif",
"font-size": "14px",
"padding-top": "15px",
"padding-bottom": "15px",
":hover": {
"background-color": "#e3ac00"
},
"background-color": "#fcbf00",
":focus": {
"background-color": "#e3ac00"
},
"padding-left": "14px",
"padding-right": "14px"
},
"quantityInput": {
"font-size": "14px",
"padding-top": "15px",
"padding-bottom": "15px"
}
},
"googleFonts": [
"PT Sans"
],
"text": {
"button": "Add to cart"
}
},
"option": {
"styles": {
"label": {
"font-family": "PT Sans, sans-serif"
},
"select": {
"font-family": "PT Sans, sans-serif"
}
},
"googleFonts": [
"PT Sans"
]
},
"cart": {
"styles": {
"button": {
"font-family": "PT Sans, sans-serif",
"font-size": "14px",
"padding-top": "15px",
"padding-bottom": "15px",
":hover": {
"background-color": "#e3ac00"
},
"background-color": "#fcbf00",
":focus": {
"background-color": "#e3ac00"
}
}
},
"text": {
"total": "Subtotal",
"button": "Checkout"
},
"googleFonts": [
"PT Sans"
]
},
"toggle": {
"styles": {
"toggle": {
"font-family": "PT Sans, sans-serif",
"background-color": "#fcbf00",
":hover": {
"background-color": "#e3ac00"
},
":focus": {
"background-color": "#e3ac00"
}
},
"count": {
"font-size": "14px"
}
},
"googleFonts": [
"PT Sans"
]
}
},
});
});
}
})();
/*]]>*/
</script>```

You cannot mess with buy button. It is nothing more than getting a variant ID into a Shopify session so a cart can process that ID. You cannot expect the button to actually contain business logic too. For that, you need to work inside Shopify itself.

You could go for a workaround and create a discount code, which gives you the specific product as free addon. There you can set a limit, for example that the discount code can only be used once per customer.

Shopify add to cart button redirection to and Upsell Page

I have the buy button code which works just fine. What I need to do is after click on button the page redirects to another page, an upsell page. The sell page is outside shopify, so I use the buy button code shopify offers. The issue is I need the page where button is embeded redirect to another page after the button is clicked, so the product is added to the cart before the redirection.
This is the buy button code
<div id='product-component-NUMBER'></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
var script = document.createElement('script');
script.async = true;
script.src = scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: 'THESHOP.myshopify.com',
apiKey: 'APIKEY',
appId: '6',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: [8888888888],
node: document.getElementById('product-component-NUMBER'),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"variantId": "all",
"width": "380px",
"contents": {
"imgWithCarousel": false,
"variantTitle": false,
"description": false,
"buttonWithQuantity": true,
"button": false,
"quantity": false
},
"styles": {
"product": {
"#media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0",
"margin-bottom": "50px"
}
},
"button": {
"background-color": "#e43030",
"font-family": "Lato, sans-serif",
"font-size": "18px",
"padding-top": "17px",
"padding-bottom": "17px",
"padding-left": "50px",
"padding-right": "50px",
":hover": {
"background-color": "#cd2b2b"
},
":focus": {
"background-color": "#cd2b2b"
},
"font-weight": "bold"
},
"quantityInput": {
"font-size": "18px",
"padding-top": "17px",
"padding-bottom": "17px"
},
"compareAt": {
"font-size": "12px"
}
},
"googleFonts": [
"Lato"
]
},
"cart": {
"contents": {
"button": true
},
"styles": {
"button": {
"background-color": "#e43030",
"font-family": "Lato, sans-serif",
"font-size": "18px",
"padding-top": "17px",
"padding-bottom": "17px",
":hover": {
"background-color": "#cd2b2b"
},
":focus": {
"background-color": "#cd2b2b"
},
"font-weight": "bold"
},
"footer": {
"background-color": "#ffffff"
}
},
"googleFonts": [
"Lato"
]
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"variantTitle": false,
"buttonWithQuantity": true,
"button": false,
"quantity": false
},
"styles": {
"product": {
"#media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
"background-color": "#e43030",
"font-family": "Lato, sans-serif",
"font-size": "18px",
"padding-top": "17px",
"padding-bottom": "17px",
"padding-left": "50px",
"padding-right": "50px",
":hover": {
"background-color": "#cd2b2b"
},
":focus": {
"background-color": "#cd2b2b"
},
"font-weight": "bold"
},
"quantityInput": {
"font-size": "18px",
"padding-top": "17px",
"padding-bottom": "17px"
}
},
"googleFonts": [
"Lato"
]
},
"toggle": {
"styles": {
"toggle": {
"font-family": "Lato, sans-serif",
"background-color": "#e43030",
":hover": {
"background-color": "#cd2b2b"
},
":focus": {
"background-color": "#cd2b2b"
},
"font-weight": "bold"
},
"count": {
"font-size": "18px"
}
},
"googleFonts": [
"Lato"
]
},
"productSet": {
"styles": {
"products": {
"#media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
}
}
});
});
}
})();
/*]]>*/
</script>

You can use jQuery as Shopify loads it in all their themes. Then just use preventDefault() and then send the shopper wherever you'd like. The click event would look like this:
$("#idOfMyButton").click(function(event){
event.preventDefault();
window.location.href = "http://sendtowherever.com";
});

Interactive javascript chart without jQuery and with cursor plotting

I'm trying to find a free charting library for JS that does not require jQuery and is able to add vertical cursor bars at indicated locations. Interactivity would be nice. I only need a line chart, no doughnuts required. Anyone know if this creature exists?

var chartJSON = {
"type": "line",
"background-color": "#fff",
"border-color": "#dae5ec",
"border-width": "1px",
"title": {
"margin-top": "7px",
"margin-left": "12px",
"text": "TODAY'S SALES",
"background-color": "none",
"shadow": 0,
"text-align": "left",
"font-family": "Arial",
"font-size": "11px",
"font-color": "#707d94"
},
"plot": {
"animation": {
"effect": "ANIMATION_SLIDE_LEFT"
}
},
"plotarea": {
"margin": "50px 25px 70px 46px"
},
"scale-y": {
"values": "0:100:25",
"line-color": "none",
"guide": {
"line-style": "solid",
"line-color": "#d2dae2",
"line-width": "1px",
"alpha": 0.5
},
"tick": {
"visible": false
},
"item": {
"font-color": "#8391a5",
"font-family": "Arial",
"font-size": "10px",
"padding-right": "5px"
}
},
"scale-x": {
"line-color": "#d2dae2",
"line-width": "2px",
"values": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
"tick": {
"line-color": "#d2dae2",
"line-width": "1px"
},
"guide": {
"visible": "false"
},
"markers": [{
"type": "area",
"range": [5, 7],
"background-color": "red",
"alpha": 0.3,
"label": {
"text": "Summer Sale",
"alpha": 0.5
}
}],
"item": {
"font-color": "#8391a5",
"font-family": "Arial",
"font-size": "10px",
"padding-top": "5px"
}
},
"legend": {
"layout": "2x2",
"background-color": "none",
"shadow": 0,
"margin": "auto auto 15 auto",
"border-width": 0,
"item": {
"font-color": "#707d94",
"font-family": "Arial",
"padding": "0px",
"margin": "0px",
"font-size": "9px"
},
"marker": {
"show-line": "true",
"type": "match",
"font-family": "Arial",
"font-size": "10px",
"size": 4,
"line-width": 2,
"padding": "3px"
}
},
"crosshair-x": {
"lineWidth": 1,
"line-color": "#707d94",
"plotLabel": {
"shadow": false,
"font-color": "#ffffff",
"font-family": "Arial",
"font-size": "10px",
"padding": "5px 10px",
"border-radius": "5px",
"alpha": 1
},
"scale-label": {
"font-color": "#ffffff",
"background-color": "#707d94",
"font-family": "Arial",
"font-size": "10px",
"padding": "5px 10px",
"border-radius": "5px"
}
},
"tooltip": {
"visible": false
},
"series": [{
"values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
"text": "Kenmore",
"line-color": "#4dbac0",
"line-width": "2px",
"shadow": 0,
"marker": {
"background-color": "#fff",
"size": 3,
"border-width": 1,
"border-color": "#36a2a8",
"shadow": 0
},
"palette": 0
}, {
"values": [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
"text": "Craftsman",
"line-width": "2px",
"line-color": "#25a6f7",
"shadow": 0,
"marker": {
"background-color": "#fff",
"size": 3,
"border-width": 1,
"border-color": "#1993e0",
"shadow": 0
},
"palette": 1,
"visible": 1
}, {
"values": [42, 43, 30, 50, 31, 48, 55, 46, 48, 32, 50, 38],
"text": "DieHard",
"line-color": "#ad6bae",
"line-width": "2px",
"shadow": 0,
"marker": {
"background-color": "#fff",
"size": 3,
"border-width": 1,
"border-color": "#975098",
"shadow": 0
},
"palette": 2,
"visible": 1
}, {
"values": [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
"text": "Land's End",
"line-color": "#f3950d",
"line-width": "2px",
"shadow": 0,
"marker": {
"background-color": "#fff",
"size": 3,
"border-width": 1,
"border-color": "#d37e04",
"shadow": 0
},
"palette": 3
}]
}
zingchart.render({
id: "myChart",
height: 300,
width: 500,
data: chartJSON
});
<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>
Are you referring to something like this? This was done with ZingChart, which is free to use. A marker was set on the x-axis with a range and lowered opacity.
Let me know if you were looking for something else and I'll put together another demo. I'm on the team at ZingChart and happy to help :)

You can do this with amCharts, here is a stacked area chart demo. If you don't need a fill, simply set fillAlphas to 0. and stackType of value axis to "none"
Disclaimer: I am the author of amCharts.

Here is an example made with D3js Framework, it might interest you..