White paper: Templates in web-to-print.  Free download
Welcome Guest! You need to login or register to make posts.

Notification

Icon
Error

Options
Go to last post Go to first unread
benadams  
#1 Posted : Monday, February 3, 2020 1:59:20 AM(UTC)
benadams

Rank: Advanced Member

Groups: Member
Joined: 3/20/2018(UTC)
Posts: 53

Thanks: 4 times
Hi Everybody, I hope you all well.

Is anybody know how to hide crop mark and foot notes on preview.
and show them only on final rendering.

I use theses configuration but
rendering: {
hiResOutputDpi: 250,
hiResOutputChannelContainersToSeparateFiles: false,
hiResOutputChannelContainersRenderEmptyPage: true,
proofImageSafetyLinesEnabled: false,
proofImageSpineAndFoldingLinesEnabled: false,
proofImageFileFormat: "png",
proofImageWatermarkEnabled: false,
proofImageCropSafetyLine: false,
hiResOutputColorSpace: "CMYK",
//hiResOutputFileFormat: "PDF",
hiResOutputFileFormat:PDF
//hiResOutputDpi: 300
hiResOutputDpi: 300
},

Thanks, you are all Helpful
VictorTolstov  
#2 Posted : Monday, February 3, 2020 2:35:50 AM(UTC)
VictorTolstov

Rank: Member

Groups: Member, Administration, Moderator
Joined: 11/14/2019(UTC)
Posts: 22

Was thanked: 1 time(s) in 1 post(s)
Hello Ben,

Such functionality is not provided for hiding crop marks for previews. The fact is that the user must know that this part will be trimmed, respectively, if you remove the crop marks this can lead the user astray. As a solution to this problem, you can crop the picture by safety lines, thereby showing the user how the product will look after cropping. To do this, use the setting

let product = {
defaultCropMarks: [{
margin: {
horizontal: 5,
vertical: 10
},
length: {
horizontal: 4,
vertical: 9
},
color: "rgb(0,0,0)",
widthPx: 1
}],
"surfaces": [{
"printAreas": [{
"designFile": "business-card",
safetyLines: [{
name:"trim",
margin: 9,
color: "rgba(0,255,0,1)",
altColor: "rgba(255,255,255,0)",
stepPx: 5,
widthPx: 1
}]
}]
}]
};

configuration = {
"rendering": {
"proofImageCropSafetyLine": "trim", //name of your safety line
},
};

Let me know if you have any questions

Regards, Victor
benadams  
#3 Posted : Tuesday, February 4, 2020 2:27:33 AM(UTC)
benadams

Rank: Advanced Member

Groups: Member
Joined: 3/20/2018(UTC)
Posts: 53

Thanks: 4 times
HI VICTOR,

you are right, but I built my own admin editor to create more design from a psd template product, so I can save them as stateID and load them like new product.
I need to generate previews without marker as product preview. My users can't use this functionality.

Relatively to my problem.
I Found a trick:
I reduce the margin of cropmark(0) to make theme invisible at preview according to user level. This trick works fine only on PSD template product, not on STATEID LOADED

Now I NEED HELP to add custom cropmark
for Loaded STATEID .

Thanks gain
VictorTolstov  
#4 Posted : Tuesday, February 4, 2020 3:03:41 AM(UTC)
VictorTolstov

Rank: Member

Groups: Member, Administration, Moderator
Joined: 11/14/2019(UTC)
Posts: 22

Was thanked: 1 time(s) in 1 post(s)
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>
Users browsing this topic
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.