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

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

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

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

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

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

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

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

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.