Save image on t-shirt

Save image on t-shirt

by Varun sharma

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>

<div class="container">
            <div class='row'>
                <div class="col-sm-12">                    
                  
                    <input type="file" id="file" class="btn btn-success">                 
                    <br/>
                    <span>
                        Front <span style="margin-left:50px">Back</span><br>
                        <a href='' class='txt' target="_blank"> <img width="60" height="80" src="http://www.regalocasila.com/image/data/personalized-t-shirt-front-side-print.jpg"></a>
                    </span>
                    <span>
                        <a href='' class='txt' target="_blank"> <img width="60" height="80" src="http://www.regalocasila.com/image/data/personalized-t-shirt-front-side-print.jpg"></a>
                    </span>
                    <canvas id="canvas" width="640" height="650" style="float:left;border: 1px solid black;  box-shadow: rgba(0,0,0,0.8) 0 0 10px;"></canvas>
                    <img id="preview" />
                    <!--                    <a href='' id='txt' target="_blank" class="btn btn-success">Click Me!!</a><br />-->

                </div>
            </div>
        </div>

JavaScript

var canvas = new fabric.Canvas('canvas');

            // initialize fabric canvas and assign to global windows object for debug        
            canvas.setBackgroundImage('https://c1.staticflickr.com/5/4051/4510967899_293f0dd5ac_z.jpg',
                    canvas.renderAll.bind(canvas), {crossOrigin: 'anonymous'});
            document.getElementById('file').addEventListener("change", function (e) {
                var file = e.target.files[0];
                var reader = new FileReader();
                console.log("reader   " + reader);
                reader.onload = function (f) {

                    var data = f.target.result;
                    fabric.Image.fromURL(data, function (img) {
                        var oImg = img.set({left: 70, top: 100, width: 250, height: 200, angle: 0}).scale(0.9);
                        canvas.add(oImg).renderAll();
                        canvas.setActiveObject(oImg);
                    });
                };
                reader.readAsDataURL(file);
            });

            document.querySelector('.txt').onclick = function (e) {
                e.preventDefault();
                canvas.deactivateAll().renderAll();
                console.log("ncbfnbfgnmfd   " + canvas.toDataURL());
                document.querySelector('#preview').src = canvas.toDataURL();
            };

           
            $('#remove').on('click', function () {
                canvas.getActiveObject().remove();
            });