Hello Ben,
You can manipulate crop marks by changing the object model. See code bellow
Nevertheless, could you tell us in more detail about your creation process, do I understand you correctly that after your rendering from psd there are no crop marks on your state file? Or am I missing something in this situation?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script id="CcIframeApiScript" src="/Resources/SPEditor/Scripts/IFrame/IframeApi.js"></script>
<title>Test</title>
<style>
iframe {
border: none;
width: 100%;
height: 80vh;
}
</style>
</head>
<script>
document.addEventListener('DOMContentLoaded', async () => {
let product = {
surfaces: [{
width: 400,
height: 400
}]
};
configuration = {
};
document.getElementById("cc-version").innerHTML = "Version: " + CustomersCanvas.VERSION;
// Customer's Canvas is loaded with this line. See the JSON objects above for params.
var editor = await CustomersCanvas.IframeApi.loadEditor(document.getElementById("editorFrame"), product,configuration)
document.getElementById("nextButton").removeAttribute("disabled");
document.getElementById('nextButton').addEventListener('click', async () => {
let result = await editor.finishProductDesign();
console.log("finishProductDesign returned this structure: ", result);
let link = document.createElement("a");
link.style = "position:absolute; top:-99999999; left:-9999999; visibility:hidden";
link.download = 'printfile.pdf';
link.href = result.hiResOutputUrls[0];
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
window.editor = editor
$("#add_crop").click(async function () {
let product = await editor.getProduct();
let productModel = await product.getProductModel();
let Model = CustomersCanvas.DesignAtoms.ObjectModel;
const surface = productModel.surfaces.get(0);
const printArea = surface.printAreas.get(0);
const cropMark = new Model.CropMark();
// here you can set the parameters of cropMark
cropMark.name = "myCropMark"
cropMark.color=Model.ColorFactory.createColor("rgb(10,20,30)");
cropMark.margin = {horizontal:5, vertical: 10};
cropMark.length = {horizontal: 4, vertical: 9};
printArea.cropMarks.setRange([cropMark]);
product.setProductModel(productModel);
$("#add_crop").attr("disabled", true);
$("#del_crop").attr("disabled", false);
$("#crop_text").text("Crop Marks are added");
});
$("#del_crop").click(async function () {
let product = await editor.getProduct();
let productModel = await product.getProductModel();
const surface = productModel.surfaces.get(0);
const printArea = surface.printAreas.get(0);
printArea.cropMarks.clear();
product.setProductModel(productModel);
$("#add_crop").attr("disabled", false);
$("#del_crop").attr("disabled", true);
$("#crop_text").text("Crop Marks are removed");
});
});
</script>
<body>
<div class="ui container" style="padding-top: 16px;" id="wrapper">
<div id="content">
<!-- The design page -->
<div id="editorPage" class="ui segment">
<div id="iframeWrapper">
<iframe id="editorFrame" width="100%" height="800px"></iframe>
</div>
<div id="saveAndNextButtonsWrapper" class="ui vertical segment">
<span class="ui orange ribbon label"><span id="cc-version"></span></span>
<button id="nextButton" class="ui green right floated button" disabled="disabled">Finish design<i
class="right arrow icon"></i></button>
</div>
</div>
<!--The approval page -->
<div id="approvePage" class="ui segment" style="display: none">
<div class="container-fluid">
<h1>Approve Your Product</h1>
<!-- Proof images -->
<div class="ui medium images" id="proof-images">
</div>
</div>
<div id="approveButtonWrapper" class="ui vertical segment">
<button id="lnkEditAgain" class="ui orange button"><i class="left arrow icon"></i> I want to make
some changes</button>
<button id="approveButton" class="ui green right floated button">Approve<i
class="right arrow icon"></i></button>
</div>
</div>
<!-- The finish page -->
<div id="finishOrderPage" class="ui segment" style="display: none">
<h1 class="">Your Product is Ready</h1>
<div class="ui info message">
<ul class="list">
<li>Design is saved and can be reopened for editing in the future</li>
<li>Now you can download PDF file or go back to the editor</li>
</ul>
</div>
<form enctype="multipart/form-data" id="layers-form" class="ui form">
<a id="newDesign" class="ui red button">Make new design</a>
<a id="hiResLink" class="ui green button"><i class="download icon"></i>Get pdf</a>
</form>
</div>
</div>
<button id="add_crop" class="ui primary button">Add Crop Marks</button>
<button id="del_crop" disabled="true" class="ui primary button">Remove Crop Marks</button>
<p id="crop_text">Crop Marks are removed</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.js"></script>
</body>
</html>