I’m trying to add an overlay parameter to the preview image in the tab effects panel. This is to show a bleed that gets applied to the image while printing. I have already implemented this feature for one of our products, but that has a different workflow.
You can try here: https://www.tinyme.com.au/photo-studio/index/studio/?id=2858
Overlay applied
But this only works for the first preview load, as soon as you so an edit/effect the overlay will go way.
In the previous build, I set the value of the widget to have the overlay, but in this case, I don’t see a logical way to set the value after the widget is loaded. Any idea how to overcome this issue?
Another challenge I’ll be facing with the overlay is switched the overlay image based on the crop aspect ratio. Because we’ll be offering 2-3 aspect ratios, so depending on the crop I may need to switch the overlay UUID.
Thank you for the question! I couldn’t get the overlay visible even on the first preview in the second product, but I’ve written another code snippet to make the overlay appear on the preview image every time.
uploadcare.registerTab("preview", uploadcareTabEffects);
var overlay = {
'1:1': '0bdb41a9-1b88-4c26-97b4-06b6fba5940a',
'2:3': '06282412-32b1-4072-b640-13a0fbe5d434'
};
var currentCrop = '1:1'
// detects current crop preset
document.addEventListener('click', function (e) {
if (e.target.classList.contains('uploadcare--crop-sizes__item') || e.target.classList.contains('uploadcare--crop-sizes__icon')) {
currentCrop = document.querySelector('.uploadcare--crop-sizes__item_current').dataset.caption;
}
});
// draws overlay
var widget = uploadcare.Widget("[role=uploadcare-uploader]");
widget.onDialogOpen(function (dialog) {
dialog.dialogElement[0].addEventListener('load', function (e) {
var tab = dialog.dialogElement[0].querySelector('.uploadcare-tab-effects--title').innerText;
if (e.target.classList.contains('uploadcare--preview__image') && !e.target.style.length && tab !== 'Crop') {
if (e.target.src.indexOf('overlay') < 0) {
e.target.src += '-/overlay/' + overlay[currentCrop] + '/100px100p/center/';
}
}
}, true);
});
There are a lot of checks and “if” statements in the code because the crop UI is a part of the preview tab, and when you click the crop icon, there’s no tab switch occurs, so using the dialog.onTabVisibility won’t work in this case. Also, there’s no way to get the current crop preset from the widget’s API, so in my code, I 'm using a click event listener to detect clicks on crop preset buttons and read the corresponding caption to get the preset selected.
Awesome!! Thanks for the solution. I’m working on implementing this solution. Looks like with a rotation applied its not working properly. Wonder we can apply a rotation to the overlay as well.
One other thing is that with a scenario where there is one aspect ratio, the widget apply the aspect ratio as soon as file is uploaded. So there is no way to the user to rotate the original image, and then crop. Is there a way to overcome this issue?
Unfortunately, there’s no way to apply rotation to the overlay image. Even if you add the rotate operation after the overlay one, it will be applied to the base image only. I’ll add a feature request on your behalf, and hopefully, a way to rotate the overlay image will be implemented in the furure.
If your crop settings contain the “free” preset, no aspect ratios will be applied to the uploaded image by default. A user will need to click the crop icon and crop the image manually. Otherwise, the image is not cropped. For example,
Hi Alex
Thanks, for raising a feature request for the rotate, that’ll be a very helpful feature to have. So as a solution I have created a function to rotate the overlay after calculating the aspect ratio manually.
Thanks for your help
