将图像保存在画布Html5 javascript中的背景图像上

我正在使用HTML5和Java脚本。我在画布上设置背景图像（T恤）。并通过用户在t恤上上传图像。第一次显示t恤正面，但我想添加t恤背面作为背景图像。我会给你看屏幕截图，我想要什么

点击正面小图片后。这将节省开支

HTML:

您可以看到这个JSFIDLE：
但我想，当用户点击背面T恤时，背景图像（正面T恤）应替换为T恤背面，并保存T恤上的设计

点击背面图像后，保存正面设计和 将背景图像更改为背面图像

单击正面t恤的正面，然后保存背面 设计并更改背景图像与正面图像

---

我的主要动机是更改背景图像，并将设计保存在t恤上。

但您正在使用

个性化t恤正面打印。jpg

分别用于正面和背面视图。@vivekkupadhyay。是的，这不是问题，因为我的动机是t恤的两面。

<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>

 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();
            });