DOMMatrixReadOnly: toJSON() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The toJSON() method of the DOMMatrixReadOnly interface returns a JSON-serializable plain object representing the DOMMatrixReadOnly object.
The method is automatically called by JSON.stringify() when a DOMMatrixReadOnly object is encountered during JSON serialization. The serialized value can then be deserialized using the DOMMatrixReadOnly.fromMatrix() function within the reviver of JSON.parse().
Syntax
toJSON()
Parameters
None.
Return value
A JSON-serializable plain object containing the following properties:
abcdefm11m12m13m14m21m22m23m24m31m32m33m34m41m42m43m44is2DisIdentity
Each property's value is copied as-is.
Examples
Calling toJSON() directly
This example creates two DOMMatrixReadOnly objects: a 2D matrix and a 3D matrix. Calling toJSON() directly returns a plain object. Its properties have the same values as the corresponding properties of the original object.
const matrix = new DOMMatrixReadOnly("translate(20px, 30px)");
const matrix3D = new DOMMatrixReadOnly("translate3d(22px, 55px, 66px)");
const json = matrix.toJSON();
console.log(json); // A plain object
console.log(typeof json); // "object"
console.log(json.is2D); // Same value as matrix.is2D
Serializing to a JSON string
The DOMMatrixReadOnly object from the previous example is serialized using JSON.stringify(), which calls the toJSON() method automatically.
console.log(JSON.stringify(matrix));
This would log a JSON string like so (formatted for readability):
{
"a": 1,
"b": 0,
"c": 0,
"d": 1,
"e": 20,
"f": 30,
"m11": 1,
"m12": 0,
"m13": 0,
"m14": 0,
"m21": 0,
"m22": 1,
"m23": 0,
"m24": 0,
"m31": 0,
"m32": 0,
"m33": 1,
"m34": 0,
"m41": 20,
"m42": 30,
"m43": 0,
"m44": 1,
"is2D": true,
"isIdentity": false
}
The matrix3D object is three-dimensional, so it has is2D set to false:
console.log(JSON.stringify(matrix3D));
This would log a JSON string like so (formatted for readability):
{
"a": 1,
"b": 0,
"c": 0,
"d": 1,
"e": 22,
"f": 55,
"m11": 1,
"m12": 0,
"m13": 0,
"m14": 0,
"m21": 0,
"m22": 1,
"m23": 0,
"m24": 0,
"m31": 0,
"m32": 0,
"m33": 1,
"m34": 0,
"m41": 22,
"m42": 55,
"m43": 66,
"m44": 1,
"is2D": false,
"isIdentity": false
}
Specifications
| Specification |
|---|
| Geometry Interfaces Module Level 1 # dom-dommatrixreadonly-tojson |