Javascript 已编辑：在HTML的可查看区域之间切换<；帆布>；最好没有页面加载

编辑（代码下方底部的原始帖子）**

小提琴： （fiddle示例没有背景，不需要演示问题，控制台日志会显示有关您在哪个视图上、刚刚保存了什么等的更多详细信息。）

下面是我根据下面的建议所做的尝试。它已经改变了很多次形式-当前，当用户加载一个图像，并将其放置在他们想要的位置，然后切换到另一个视图时，上载的图像会转移到另一个视图（这是不需要的-每个视图都应该有自己的特定布局）

我添加了“正面”、“侧面”和“背面”按钮，以对应不同的画布视图。在会话存储中来回切换时，我跟踪画布视图（“前”、“侧”或“后”），一开始默认为“前”。根据按下哪个按钮（针对哪个视图），它会在sessionStorage中重新定义字符串，以便我们知道前一个视图应该是什么。 然后，它将画布的内容保存到存储器中，作为一个数据URL，根据它刚刚来自的视图。（*然后清除画布并访问dataURL，以获取用户先前选择的背景图片的正确位置-这不会显示在小提琴中）

从这一点上讲，我必须不断地重新配置东西，我无法找到一个解决方案使它正常运行，也就是说，使它在没有图像的情况下运行

实际上，用户上传的图像不仅会在您切换其他视图时传递到其他视图，而且我对该图像或新上传的图像所做的任何操作都会在您在视图之间来回切换时继续传递，直到三个上传的图像和位置都相同（意外/意外）

精简版-“视图”的三个单击处理程序基本相同：

HTML

原职（见下文）：

我有一个用户可以交互的画布（创建帽子）。它有一个背景图像，正面和背面有三个“部分”。到目前为止，用户可以上传自己的图像，并在画布上对其进行操作，以制作自己的设计-我使用Fabric.js进行图像操作

我的目标是：虽然背景图像是一个大图像，上面有三个“部分”，但我只希望用户一次能够看到其中一个部分，然后在他们制作图片/创建时能够在这三个部分中的任何一个之间来回切换（无需页面加载-页面加载会删除上载的图像）

我的想法：点击改变画布的可视区域-我不知道如何制作一个特定的可视区域，但我觉得这是我能想到的最好的选择。我只需要能够弄清楚如何拥有一个比画布小的“查看窗口”，然后我可以使用缩略图或按钮来更改我需要更改的任何参数，使其看起来是一个不同的画布（无需重新加载-它将删除图像）

---

这是现实的还是可能的？有没有我没有考虑过的特别/更好的方法？我真的很想让这个应用程序（大部分）保持得体，但如果我必须改变一切，那么我会的，但我希望有人知道如何做我的建议。非常感谢您的时间。

我认为有一个比您正在尝试的更简单的解决方案。如果您有对fabric实例的引用，则可以使用以下命令获取整个对象状态：

var currentCanvasData=canvas.toObject（）

。您将得到一个很好的javascript对象，您可以稍后传入该对象以重新创建画布

canvas.clear（）

将从画布中删除所有内容，

canvas.loadFromJSON（currentCanvasData）

将全部备份。确保在

loadFromJSON

之后调用

canvas.renderal（）

这将便于您和用户在3个不同的工作空间之间切换

var canvas=newfabric.canvas（'c'）；
var-currentView=1；
var view1Save={}；
var view2Save={}；
var view1=document.querySelector（'.one'）；
var view2=document.querySelector（'.two'）；
view1.onclick=（函数（）{
如果（currentView==2）{
view2Save=canvas.toObject（）；
canvas.clear（）；
loadFromJSON（view1Save、canvas.renderal.bind（canvas））；
currentView=1；
view1.disabled=真
view2.disabled=错误
}
});
view2.onclick=（函数（）{
如果（currentView==1）{
view1Save=canvas.toObject（）；
canvas.clear（）；
loadFromJSON（view2Save、canvas.renderAll.bind（canvas））；
currentView=2；
view1.disabled=false
view2.disabled=真
}
});
var addRect=document.querySelector（'.rect'）；
addRect.onclick=（函数（）{
canvas.add（new fabric.Rect({
左:100,，
前100名，
宽度：50，
身高：50，
填充：“红色”
}));
});
var addImg=document.querySelector（'.image'）；
addImg.onclick=（函数（）{
var imgElement=新图像（）；
imgElement.src=http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.png';
imgElement.onload=（函数（）{
canvas.add（新结构）图像（imgElement{
左:100,，
前100名，
角度：30，
不透明度：0.85
}));
});
});
canvas{border:1px solid#ccc；}

不同意见：
视图1
视图2


添加矩形
添加图像
我认为有一个比您正在尝试的更简单的解决方案。如果您有对fabric实例的引用，则可以使用以下命令获取整个对象状态：
var currentCanvasData=canvas.toObject（）
。您将得到一个很好的javascript对象，您可以稍后传入该对象以重新创建画布
canvas.clear（）
将从画布中删除所有内容，
canvas.loadFromJSON（currentCanvasData）
将全部备份。确保调用
ca
<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>

<canvas id="c" width="740" height="500" style="border-left: 3px solid black; border-top: 3px solid black; border-radius: 10px;"></canvas>

<button class="btn" id="customer-chosen-background-image">Set A Background Image</button>
<input class="btn" type="file" id="files" name="files[]"/>
<button class="btn" id="sessionInfoClear">Clear My Session</button>

<hr>
<button class="btn view-btn" id="front-hat-view-button">Front</button>
<button class="btn view-btn" id="side-hat-view-button">Side</button>
<button class="btn view-btn" id="back-hat-view-button">Back</button>

<canvas id="d" width="740" height="250" style="border-left: 3px solid black; border-top: 3px solid black; border-radius: 10px;"></canvas>

$(document).ready(function() {

  var canvas = new fabric.Canvas('c');
  var canvas2 = new fabric.Canvas('d');
  var scopeTesterOne = "testing scope";//SOMETHING I DO OCCASIONALLY

  document.getElementById('files').addEventListener("change", function (e) {
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = function (f) {
      var data = f.target.result;                    
      fabric.Image.fromURL(data, function (img) {
        var oImg = img.set({left: 350, top: 300, angle: 00,width:100, height:100}).scale(0.9);
        canvas.add(oImg).renderAll();
        var a = canvas.setActiveObject(oImg);
      });
    };
    reader.readAsDataURL(file);
    $('#files').css({'background-color': 'white', 'color': 'black', 'border': '2px solid black'});

  });

$('#customer-chosen-background-image').click(function() {
   var backgroundImageFilePath = 'http://store-1p9yfoynqe.mybigcommerce.com/product_images/Viewsforfiddle.png';
      // var backgroundURL = "url(" + backgroundImageFilePath + ")"
      canvas.setBackgroundImage(backgroundImageFilePath, canvas.renderAll.bind(canvas), {
        top: 0,
        left: 50,
        scaleY: .8,
        scaleX: .8
      });  
  });

var whatIsTheHatViewOnCanvas = function() {//INITIALLY THIS IS HOW WE TELL/TRACK/SET WHAT THE PREVIOUS VIEW WAS
    var doesTrackingDataExist = sessionStorage.getItem('viewForHatCanvas');
    if (doesTrackingDataExist) {
      console.log("traker has previous view data");
    } else {
      console.log("traker has no previous view data");
      sessionStorage.setItem('viewForHatCanvas', "front");

      var consoleTestttt = sessionStorage.getItem('viewForHatCanvas');
      console.log(consoleTestttt);
    }
  };
  whatIsTheHatViewOnCanvas();

  function loadCanvas(dataURL) { //THIS IS FOR THE MAIN CANVAS
    var canvas = document.getElementById('c');
    var context = canvas.getContext('2d');

    var imageObj = new Image();
    imageObj.onload = function() {
      context.drawImage(this, 0, 0);
    };
    imageObj.src = dataURL;
  }
  function loadPreviewCanvasFront(dataURL) {//IMAGES FOR THE 'PREVIEW' CANVAS
    var canvas2 = document.getElementById('d');
    var context = canvas2.getContext('2d');

    var imageObj = new Image();
    imageObj.onload = function() {
      context.drawImage(this, 0, 0, 185, 125);
    };
    imageObj.src = dataURL;
  }

  function loadPreviewCanvasSide(dataURL) {//IMAGES FOR THE 'PREVIEW' CANVAS
    var canvas2 = document.getElementById('d');
    var context = canvas2.getContext('2d');

    var imageObj = new Image();
    imageObj.onload = function() {
      context.drawImage(this, 185, 0, 185, 125);
    };
    imageObj.src = dataURL;
  }

  function loadPreviewCanvasBack(dataURL) {//IMAGES FOR THE 'PREVIEW' CANVAS
    var canvas2 = document.getElementById('d');
    var context = canvas2.getContext('2d');

    var imageObj = new Image();
    imageObj.onload = function() {
      context.drawImage(this, 370, 0, 185, 125);
    };
    imageObj.src = dataURL;
  }



  $('#front-hat-view-button').click(function() {
    console.log(scopeTesterOne);

    var context = canvas.getContext('2d');
    var previousHatView = sessionStorage.getItem('viewForHatCanvas');
    sessionStorage.setItem('viewForHatCanvas', "front");
    console.log("from " + previousHatView + " to front");

    canvas.deactivateAll().renderAll();  
    var savingCanvasContentF = canvas.toDataURL("image");

    if (previousHatView === "side") {
      sessionStorage.setItem('storedSideHatCreation', savingCanvasContentF);
      console.log("from " + previousHatView + " to front - STORED AS SIDE VIEW");
    }
    if (previousHatView === "back") {
      sessionStorage.setItem('storedBackHatCreation', savingCanvasContentF); 
      console.log("from " + previousHatView + " to back - STORED AS BACK VIEW");
    }
    // canvas.clear();
    context.clearRect(0, 0, canvas.width, canvas.height);

    var imgToLoadOnFrontView = sessionStorage.getItem('storedFrontHatCreation');
    //var backgroundImageFilePath = 
    //var backgroundURL = "url(" + backgroundImageFilePath + ")"
    //canvas.setBackgroundImage(backgroundImageFilePath, canvas.renderAll.bind(canvas), {
      //top: 0,
      //left: 50,
      //scaleY: .8,
      //scaleX: .8
    //});

    if (imgToLoadOnFrontView != null) {
      context.clearRect(0, 0, canvas.width, canvas.height);
      console.log("says there is an image to load on front");
      loadCanvas(imgToLoadOnFrontView);
      loadPreviewCanvasFront(imgToLoadOnFrontView);
    }
  });

$('#side-hat-view-button').click(function() {
  var context = canvas.getContext('2d');
  var previousHatView = sessionStorage.getItem('viewForHatCanvas');
  var currentHatView = "side";
  sessionStorage.setItem('viewForHatCanvas', "side");

  canvas.deactivateAll().renderAll();  
  var savingCanvasContentS = canvas.toDataURL("image");

  if (previousHatView === "front") {
    sessionStorage.setItem('storedFrontHatCreation', savingCanvasContentS);
    console.log("from " + previousHatView + " to side - STORED AS FRONT VIEW");
  }
  if (previousHatView === "back") {
    sessionStorage.setItem('storedBackHatCreation', savingCanvasContentS); 
    console.log("from " + previousHatView + " to side - STORED AS BACK VIEW");
  }
  // canvas.clear();
  context.clearRect(0, 0, canvas.width, canvas.height);


  var imgToLoadOnSideView = sessionStorage.getItem('storedSideHatCreation');
//  var backgroundImageFilePath = sessionStorage.getItem('hatImageLocation');
//  var backgroundURL = "url(" + backgroundImageFilePath + ")"
//  canvas.setBackgroundImage(backgroundImageFilePath, canvas.renderAll.bind(canvas), {
//    top: -560,
//    left: 50,
//    scaleY: .8,
//    scaleX: .8
//  });

  if (imgToLoadOnSideView != null) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    console.log("says there is an image to load on side");
    loadCanvas(imgToLoadOnSideView);
    loadPreviewCanvasSide(imgToLoadOnSideView);
  } 
});

$('#back-hat-view-button').click(function() {
  var context = canvas.getContext('2d');
  var previousHatView = sessionStorage.getItem('viewForHatCanvas');
  sessionStorage.setItem('viewForHatCanvas', "back");
  console.log("from " + previousHatView + " to back");

  canvas.deactivateAll().renderAll();  
  var savingCanvasContentB = canvas.toDataURL("image");

  if (previousHatView === "front") {
    sessionStorage.setItem('storedFrontHatCreation', savingCanvasContentB);
    console.log("from " + previousHatView + " to back - STORED AS FRONT VIEW");
  }
  if (previousHatView === "side") {
    sessionStorage.setItem('storedSideHatCreation', savingCanvasContentB); 
    console.log("from " + previousHatView + " to back - STORED AS SIDE VIEW");
  }
  // canvas.clear();
  context.clearRect(0, 0, canvas.width, canvas.height);


  var imgToLoadOnBackView = sessionStorage.getItem('storedBackHatCreation');
  //var backgroundImageFilePath = sessionStorage.getItem('hatImageLocation');
  //var backgroundURL = "url(" + backgroundImageFilePath + ")"
  //canvas.setBackgroundImage(backgroundImageFilePath, canvas.renderAll.bind(canvas), {
  //  top: -1065,
  //  left: 50,
  //  scaleY: .8,
  //  scaleX: .8
  //});

  if (imgToLoadOnBackView != null) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    console.log("says there is an image to load on back");
    loadCanvas(imgToLoadOnBackView);
    loadPreviewCanvasBack(imgToLoadOnBackView);
  } 
});

  $('#sessionInfoClear').click(function() {
    sessionStorage.clear();
    location.reload();
  });

});