Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/core/operations/RenderImage.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,8 @@ class RenderImage extends Operation {
// Add image data to URI
dataURI += "base64," + toBase64(data);

return "<img src='" + dataURI + "'>";
// style tag for image responsiveness
return "<img src='" + dataURI + "' style='max-width:100%;max-height:100vh;display:block;margin:auto;' alt='Rendered image'>";
}

}
Expand Down
6 changes: 3 additions & 3 deletions tests/operations/tests/Image.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ TestRegister.addTests([
{
name: "Render Image: raw gif",
input: GIF_ANIMATED_HEX,
expectedOutput: "<img src='data:image/gif;base64,R0lGODlhDwAPALMLAEJCQv/nAP/vAP/OAAAAAP+1AP+cAP//lP//EP//xv//7////wAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFMgALACwAAAAADwAPAAAEWnBJCWqdeFWVzhkXBnAIEgTCYAAT0J3oma7UERCEgOIp65o4GU9VOZgESFRyUCjGYjoUs3J86nRTwEBAkHkJRM22q+QOQJQzFxcMp8/wgrsFKNgLK1aGYtFPIgAh+QQFCgALACwDAAkACQABAAAEBTBIMWUEACH5BAUKAAsALAQACgAHAAEAAAQFMKw5QwQAIfkEBQoACwAsBAAEAAcAAQAABAVQBClDBAAh+QQFCgALACwDAAQACQACAAAECjAQIoKYV1xZSQQAIfkEBQoACwAsAwAEAAkAAgAABAkwCEkpIUFeEQEAIfkEBTIACwAsBAAEAAcAAQAABAWQkEVlBAAh+QQFGQALACwDAAQACAACAAAECZCssJYMUtQbAQAh+QQFGQALACwDAAQACQACAAAECTAIQmSgEotJIgAh+QQFCgALACwEAAQACAACAAAECXAFseoksmIRAQAh+QQFCgALACwDAAQACQACAAAECjAQIoKYV1xZSQQAIfkEBQoACwAsAwAEAAkAAgAABAkwCEkpIUFeEQEAIfkEBTIACwAsBAAEAAcAAQAABAWQkEVlBAAh+QQFGQALACwEAAMABwADAAAECpCQRSW9VIgrQgQAIfkEBRkACwAsAwADAAgAAgAABAmQrLCWFJLaGQEAIfkEBRkACwAsAwADAAkAAgAABArwBEJEmCQIqnEEACH5BAUZAAsALAUAAwAHAAMAAAQKMIRFxaCYEoJ3BAAh+QQFHgALACwEAAQACAACAAAECZAssZYUMtQbAQAh+QQFCgALACwEAAoABwABAAAEBZCsOUkEACH5BAUKAAsALAMACQAJAAEAAAQFkKxJF4kAOw=='>",
expectedOutput: "<img src='data:image/gif;base64,R0lGODlhDwAPALMLAEJCQv/nAP/vAP/OAAAAAP+1AP+cAP//lP//EP//xv//7////wAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFMgALACwAAAAADwAPAAAEWnBJCWqdeFWVzhkXBnAIEgTCYAAT0J3oma7UERCEgOIp65o4GU9VOZgESFRyUCjGYjoUs3J86nRTwEBAkHkJRM22q+QOQJQzFxcMp8/wgrsFKNgLK1aGYtFPIgAh+QQFCgALACwDAAkACQABAAAEBTBIMWUEACH5BAUKAAsALAQACgAHAAEAAAQFMKw5QwQAIfkEBQoACwAsBAAEAAcAAQAABAVQBClDBAAh+QQFCgALACwDAAQACQACAAAECjAQIoKYV1xZSQQAIfkEBQoACwAsAwAEAAkAAgAABAkwCEkpIUFeEQEAIfkEBTIACwAsBAAEAAcAAQAABAWQkEVlBAAh+QQFGQALACwDAAQACAACAAAECZCssJYMUtQbAQAh+QQFGQALACwDAAQACQACAAAECTAIQmSgEotJIgAh+QQFCgALACwEAAQACAACAAAECXAFseoksmIRAQAh+QQFCgALACwDAAQACQACAAAECjAQIoKYV1xZSQQAIfkEBQoACwAsAwAEAAkAAgAABAkwCEkpIUFeEQEAIfkEBTIACwAsBAAEAAcAAQAABAWQkEVlBAAh+QQFGQALACwEAAMABwADAAAECpCQRSW9VIgrQgQAIfkEBRkACwAsAwADAAgAAgAABAmQrLCWFJLaGQEAIfkEBRkACwAsAwADAAkAAgAABArwBEJEmCQIqnEEACH5BAUZAAsALAUAAwAHAAMAAAQKMIRFxaCYEoJ3BAAh+QQFHgALACwEAAQACAACAAAECZAssZYUMtQbAQAh+QQFCgALACwEAAoABwABAAAEBZCsOUkEACH5BAUKAAsALAMACQAJAAEAAAQFkKxJF4kAOw==' style='max-width:100%;max-height:100vh;display:block;margin:auto;' alt='Rendered image'>",
recipeConfig: [
{ op: "From Hex", args: ["Space"] },
{ op: "Render Image", args: ["Raw"] }
Expand All @@ -32,15 +32,15 @@ TestRegister.addTests([
{
name: "Render Image: hex png",
input: PNG_HEX,
expectedOutput: "<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAFGElEQVRYw8VXXWwUVRT+7szszKzb3bbglqXbzbbQbYDQYJBGbWlTRUq1KtCmVYmECsHQKjE8mJrwYoIPpmIQEw2aaLA2PDRhATVpCxiLcYPBP0RQbIEVulNatt3SYX9mf2auD7QVlt3uLq3xPE3mnnvPd8/5zs8luD9hOzs7l1sslvJQKMR6PJ4fWlpafgWgAWAA0MnvlELSNEimDt65c6dpx44dB3JychplWUYgEGAAUFmWvxofHz9nNpvrwuHw72vXrt0KQJ0tAOJ0Oh8pKSlpFQRhmaZpAQB6o9FYBgATExPaJAAAAKWUEkKIqqq3Kisr7R0dHY+Lojhvw4YNnyXzyEwAiMvlai0sLNxHCNElUogHcKcoijIoCIIVADwez9aNGzd+nkiPS2bd6XSustvtSY2nElEUbVOO0bTkdGCS3d7hcLQwDKPDLCUcDt/YvHnz0WTeTgaAEQRheUoCEZKSxIIgLDh+/PhvPT09exOBSBYCSilV5iqLRFG0q6r62OSF1XQ8oAUCgVNpnE3TDIMUCoV+TJQJyQCgu7v7w2g0OjSjdUppOhxYt27d8tra2l2JACcFsHv37uEzZ848qyhK/2xIKAhCXmdn5wvJ6gAz0+bGxsZf1qxZU6FpWjRTw6FQyE0pVSmlmqZpkUzTcFrcbreSbqynRFXVYFVV1cMDAwP1kiS9Ul9ffzCZLof/QDRNUyilyqZNm75MpcvgfxZmrlItrkCl3Y7TCUHI5XJ9YzQan4pfGBoawvDwcCICngIQnSsAuuLiYgfLsvcs8DyPnJycRBxYDIBNxwszAli2wCC+uHrJq+y1n4sIc3e09PMKaLbeSCVJopIk3bUWi8Uc1dXVT/b19XXPppYz7euXHHji0ZXbBV53z7ai6q24FuW1n/r7GafTCVVV46tkNBqNlvb29v51XyR8adVCq9nAvTxw+QpijDD9X1ZULFxVD8ODdgBAbm4uyp4uQzg3/O/AyLLgef57n8/nq6mpKWYTxS9VCErMhkoCcBOyjIKKLTDoBby+Zw+sS1dA9akoWxjGoNtNqMGA/cb9sDXYUMVVoXSkFIQQuFyucpPJdEKn05U2NDQ0d3V1fZG2B1oqbEXWbOGDaSWGhd5kRlnZavRf+ANF+fkIyTKCExPE7/djm20bBoODWCQsgtlshiiKvlgs5uZ5fgUhhHAcl5eRB5bmGXaxDJkf/397UxO2NzVB1TQEJtNvdHQU5cZylGeVA6HpBjTm9XrbrFbrsUAg8OmhQ4fez4QDjI4jK1O0WIjcbexjY2OJ0pDJyspaPQmmoqampigTAFTTMJKixSJyu+RRWZYRPxYoirLIZDK9AQAcxy21WCyvZRIC6vVHPn6A168nBAnZyzIMDGYzHKWlYCwWJBgNSSQSOSvL8ttGo/E5SZL2ZcSBt3ovn3jnGUdrXhb/LgDTHa6FJMsw6PVgOQ7nLl4kPX19NBaLwWAwqHV1dSzLsgQAotHot0eOHDkM4PD9VEL65tcDnzQ9ZDlWNF9fy/H6/QCyGYaBRa/HjUuXEBobgzoyQm02G83Pz4fNZmOnpmSe5wclSXpvrt6G5MLJk88XFxbu5XU6650Lf16/rl32epm4YWTo5s2brc3NzcfSeuWmo/RRR8d5TdMOLlm8+JbA84Ucy+YCwKjfT8eDQTJp2BMMBvedPn16S1tb29m0W3fGAwTD8N91dS2zFxSs+Nvny77i9fr9fv/59vb2s1evXo1ket4/oXgLrXNMZZcAAAAASUVORK5CYII='>",
expectedOutput: "<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAFGElEQVRYw8VXXWwUVRT+7szszKzb3bbglqXbzbbQbYDQYJBGbWlTRUq1KtCmVYmECsHQKjE8mJrwYoIPpmIQEw2aaLA2PDRhATVpCxiLcYPBP0RQbIEVulNatt3SYX9mf2auD7QVlt3uLq3xPE3mnnvPd8/5zs8luD9hOzs7l1sslvJQKMR6PJ4fWlpafgWgAWAA0MnvlELSNEimDt65c6dpx44dB3JychplWUYgEGAAUFmWvxofHz9nNpvrwuHw72vXrt0KQJ0tAOJ0Oh8pKSlpFQRhmaZpAQB6o9FYBgATExPaJAAAAKWUEkKIqqq3Kisr7R0dHY+Lojhvw4YNnyXzyEwAiMvlai0sLNxHCNElUogHcKcoijIoCIIVADwez9aNGzd+nkiPS2bd6XSustvtSY2nElEUbVOO0bTkdGCS3d7hcLQwDKPDLCUcDt/YvHnz0WTeTgaAEQRheUoCEZKSxIIgLDh+/PhvPT09exOBSBYCSilV5iqLRFG0q6r62OSF1XQ8oAUCgVNpnE3TDIMUCoV+TJQJyQCgu7v7w2g0OjSjdUppOhxYt27d8tra2l2JACcFsHv37uEzZ848qyhK/2xIKAhCXmdn5wvJ6gAz0+bGxsZf1qxZU6FpWjRTw6FQyE0pVSmlmqZpkUzTcFrcbreSbqynRFXVYFVV1cMDAwP1kiS9Ul9ffzCZLof/QDRNUyilyqZNm75MpcvgfxZmrlItrkCl3Y7TCUHI5XJ9YzQan4pfGBoawvDwcCICngIQnSsAuuLiYgfLsvcs8DyPnJycRBxYDIBNxwszAli2wCC+uHrJq+y1n4sIc3e09PMKaLbeSCVJopIk3bUWi8Uc1dXVT/b19XXPppYz7euXHHji0ZXbBV53z7ai6q24FuW1n/r7GafTCVVV46tkNBqNlvb29v51XyR8adVCq9nAvTxw+QpijDD9X1ZULFxVD8ODdgBAbm4uyp4uQzg3/O/AyLLgef57n8/nq6mpKWYTxS9VCErMhkoCcBOyjIKKLTDoBby+Zw+sS1dA9akoWxjGoNtNqMGA/cb9sDXYUMVVoXSkFIQQuFyucpPJdEKn05U2NDQ0d3V1fZG2B1oqbEXWbOGDaSWGhd5kRlnZavRf+ANF+fkIyTKCExPE7/djm20bBoODWCQsgtlshiiKvlgs5uZ5fgUhhHAcl5eRB5bmGXaxDJkf/397UxO2NzVB1TQEJtNvdHQU5cZylGeVA6HpBjTm9XrbrFbrsUAg8OmhQ4fez4QDjI4jK1O0WIjcbexjY2OJ0pDJyspaPQmmoqampigTAFTTMJKixSJyu+RRWZYRPxYoirLIZDK9AQAcxy21WCyvZRIC6vVHPn6A168nBAnZyzIMDGYzHKWlYCwWJBgNSSQSOSvL8ttGo/E5SZL2ZcSBt3ovn3jnGUdrXhb/LgDTHa6FJMsw6PVgOQ7nLl4kPX19NBaLwWAwqHV1dSzLsgQAotHot0eOHDkM4PD9VEL65tcDnzQ9ZDlWNF9fy/H6/QCyGYaBRa/HjUuXEBobgzoyQm02G83Pz4fNZmOnpmSe5wclSXpvrt6G5MLJk88XFxbu5XU6650Lf16/rl32epm4YWTo5s2brc3NzcfSeuWmo/RRR8d5TdMOLlm8+JbA84Ucy+YCwKjfT8eDQTJp2BMMBvedPn16S1tb29m0W3fGAwTD8N91dS2zFxSs+Nvny77i9fr9fv/59vb2s1evXo1ket4/oXgLrXNMZZcAAAAASUVORK5CYII=' style='max-width:100%;max-height:100vh;display:block;margin:auto;' alt='Rendered image'>",
recipeConfig: [
{ op: "Render Image", args: ["Hex"] }
]
},
{
name: "Render Image: base64 jpg",
input: JPG_B64,
expectedOutput: "<img src='data:image/jpeg;base64,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'>",
expectedOutput: "<img src='data:image/jpeg;base64,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' style='max-width:100%;max-height:100vh;display:block;margin:auto;' alt='Rendered image'>",
recipeConfig: [
{ op: "Render Image", args: ["Base64"] }
]
Expand Down
Loading