編集：好ましくは、ページの読み込み

Question

EDIT（コードの下底のオリジナルのポスト）**なしのHTML の閲覧可能なアールを切り替え

フィドル：https://jsfiddle.net/Tron4949/oezuz1g9/9/ （フィドルの例では、バックグラウンドを持っていないだろう、それが証明するために、不必要なのですコンソールログには、現在表示されているビュー、保存された内容などの詳細がコンソールログに表示されます）

以下の提案に基づく私の試みです。 多くの場合、回 - 現在ユーザーが画像を読み込んで希望の位置に配置した後、別のビューに切り替えると、アップロードされた画像がその別のビューに引き継がれます（これは望ましくありません。特定のレイアウト）。

さまざまなキャンバスビューに対応するために、 'front'、 'side'、および 'back'ボタンを追加しました。あなたが前後に切り替えると、私はセッション記憶域のキャンバス・ビュー（「前」、「後」、または「後」）を追跡し、最初は「前」にデフォルト設定されます。どのボタンが押されたかに応じて（それはビューのために）、sessionStorage内の文字列を再定義して、前のビューの内容を知るようにします。 次にキャンバスの内容を、直前のビューに応じてdataURLとしてストレージに保存します。 （*キャンバスをクリアして、ユーザーが先に選択した背景画像の正しい位置のためにdataURLにアクセスします。これは、フィドルには表示されません）。

この時点から、私は物事を再構成しなければならないところです。それを正しく実行させるための解決策が見つからない、つまり、画像を持ち越さずに動作させることはできません。

ユーザーがアップロードした画像は、他の画像を切り替えるときに他の画像に引き継がれるだけでなく、その画像や新しくアップロードされた画像でも引き継がれます3つのアップロードされた画像および位置のそれぞれがすべて同じである（予期しない/望ましくない）ポイントまでのビュー間の間隔である。

Aがバージョンダウン剥奪 - '意見' は基本的に同じであるための3つのクリックハンドラを：

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> 

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

JS

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

}); 

ORIGINAL POST（下）：

私は、ユーザーが（ハットを作成するために）対話できるキャンバスを持っています。前面と背面に3つの「セクション」がある背景画像が1つあります。今のところ、ユーザーは自分の画像をアップロードしてキャンバス上で操作して独自のデザインを作成することができます。画像操作にはFabric.jsを使用しています。

私の目標：背景画像は3つの「セクション」を持つ1つの大きな画像ですが、ユーザーは一度にこれらのセクションの1つを見ることができ、前後に切り替えられるようにしたいそれらの3人のうちの誰かが画像/作成を行います（ページを読み込まずにページを読み込んでもアップロードされた画像は削除されます）。

私の考え：キャンバスの視認可能な領域をクリックで変更する - 特定の視認可能な領域を作る方法を理解することはできませんが、これは私が考えることができる最良の選択肢だと感じています。私はちょうどキャンバスよりも小さい「表示ウィンドウ」を持つ方法を理解する必要があります。サムネイルやボタンを使って、変更する必要のあるパラメータを変更して別のキャンバスに見えるようにすることができます再ロードせずに画像を削除します）。

これは現実的か可能ですか？私が考慮していない特定の/より良い方法がありますか？私は本当にアプリを（ほとんど）手に入れたいと思っているが、もしすべてを絶対に変えなければならないが、私は誰かが私が提案していることをやる方法を知っていることを望んでいる。あなたのお時間をありがとうございました。

Answer 1

あなたがやろうとしていることは、簡単な解決策だと思います。ファブリックインスタンスへの参照がある場合は、var currentCanvasData = canvas.toObject()を使用してオブジェクト全体の状態を取得することができます。後でキャンバスを再作成するために渡すことができる素敵なjavascriptオブジェクトが得られます。 canvas.clear()はキャンバスからすべてを削除し、canvas.loadFromJSON(currentCanvasData)はすべてをバックアップします。 loadFromJSONの後にcanvas.renderAll()に必ず電話してください。

これにより、3つの異なる作業スペースを簡単に切り替えることができます。

var canvas = new fabric.Canvas('c'); 
 
var currentView = 1; 
 
var view1Save = {}; 
 
var view2Save = {}; 
 

 
var view1 = document.querySelector('.one'); 
 
var view2 = document.querySelector('.two'); 
 

 
view1.onclick = (function() { 
 
    if (currentView === 2) { 
 
    view2Save = canvas.toObject(); 
 
    canvas.clear(); 
 
    canvas.loadFromJSON(view1Save, canvas.renderAll.bind(canvas)); 
 
    currentView = 1; 
 
    view1.disabled = true 
 
    view2.disabled = false 
 
    } 
 
}); 
 

 
view2.onclick = (function() { 
 
    if (currentView === 1) { 
 
    view1Save = canvas.toObject(); 
 
    canvas.clear(); 
 
    canvas.loadFromJSON(view2Save, canvas.renderAll.bind(canvas)); 
 
    currentView = 2; 
 
    view1.disabled = false 
 
    view2.disabled = true 
 
    } 
 
}); 
 

 
var addRect = document.querySelector('.rect'); 
 
addRect.onclick = (function() { 
 
    canvas.add(new fabric.Rect({ 
 
    left: 100, 
 
    top: 100, 
 
    width: 50, 
 
    height: 50, 
 
    fill: 'red' 
 
    })); 
 
}); 
 

 
var addImg = document.querySelector('.image'); 
 
addImg.onclick = (function() { 
 
    var imgElement = new Image(); 
 
    imgElement.src = 'http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.png'; 
 
    imgElement.onload = (function() { 
 
    canvas.add(new fabric.Image(imgElement, { 
 
     left: 100, 
 
     top: 100, 
 
     angle: 30, 
 
     opacity: 0.85 
 
    })); 
 
    }); 
 
});

canvas { border: 1px solid #ccc; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script> 
 
different views: 
 
<button class="one" disabled>view 1</button> 
 
<button class="two" >view 2</button> 
 
<br /> 
 
<button class="rect">add rect</button> 
 
<button class="image">add image</button> 
 
<canvas id="c" width="600" height="600"></canvas>