Skip to content

Instantly share code, notes, and snippets.

@mike-hogan

mike-hogan/index.html

Created July 22, 2016 09:00
Show Gist options
  • Save mike-hogan/b34400b81e8c3b227d145437dc432500 to your computer and use it in GitHub Desktop.
Save mike-hogan/b34400b81e8c3b227d145437dc432500 to your computer and use it in GitHub Desktop.
Download ZIP
Editor for spreadshirt shirt, with printing area calculated and shown
Raw
index.html
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<canvas id="canvas" width="820" height="1000" style="border: 1px solid black;"></canvas>
</div>
<div class="col-md-1"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"></script>
<script type="text/javascript">
//All mm, taken from http://api.spreadshirt.net/api/v1/shops/100028471/productTypes/812
var width=813.7299771167048;
var height=813.7299771167048;
var offsetX=241.213;
var offsetY=151.121;
var drawWidth=308.054919906;
var drawHeight=569.610983966;
//image of this size loaded below...
var shirtImageWidthPx = 800;
var shirtImageHeightPx = 800;
var pixelsPerMm = shirtImageWidthPx / width;
var rect = new fabric.Rect({
left: offsetX * pixelsPerMm,
top: offsetY * pixelsPerMm,
width: drawWidth * pixelsPerMm,
height: drawHeight * pixelsPerMm,
fill:'transparent',
stroke: 'black',
strokeWidth: 1
});
var canvas = new fabric.Canvas('canvas');
canvas.add(rect);
fabric.Image.fromURL('http://image.spreadshirtmedia.net/image-server/v1/productTypes/812/views/1/appearances/231?width=800&height=800', function(oImg) {
oImg.set('selectable', false);
canvas.add(oImg);
canvas.sendToBack(oImg);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment