I'm integrating Adobe Creative SDK WEB to my angularjs website.
I have followed the "Image Editor UI" guide from official Adobe website
And also a this example using angularjs:
https:// github.com/CreativeSDK/web-getting-started-samples/tree/master/image-editor-ui/image-editor-ui-angular-express>
In both cases I tried with dynamic and hard coded id and image src.
** This is working **
When I click the "edit" link, editor opens fine and start loading the image.
While loading, the image size is exactly the same as my placeholder size.
Screen capture of my table with image and link https://ibb.co/kZ5ama
** End this is working **
The problem I'm getting is this:
After the photo is loaded, the size shrinks and goes to the top left corner.
Also when I try to draw on top of it, I have to start by clicking inside the small photo and continue as if the size of the photo is the entire screen.
Screen capture of the editor here, look at the end of the red stroke and my cursor position: https://ibb.co/iYJECF
Here is my edit link
<a href="javascript:;" id="edit-image-button" class="btn btn-primary btn-block button-panel" ng-click="launchEditor('image_'+$index, item2)">
Edit Image
</a>
My image placeholder
<a ng-click="openLightboxModal(name2,'notsynced')" >
<img id="image_{{$index}}"class="img-responsive" src="{{item2}}" alt="">
</a>
$scope.getImageEditor = function() {
$scope.imageEditor = new Aviary.Feather({
apiKey: "My id is here",
onSave: function(imageID, newURL) {
$scope.currentImageSrc = newURL;
$scope.imageEditor.close();
$scope.$digest();
console.log(newURL);
},
onError: function(errorObj) {
console.log(errorObj.code);
console.log(errorObj.message);
console.log(errorObj.args);
}
});
}
$scope.launchEditor = function(imageId, imageURL) {
$scope.originalImageSrc = imageURL;
$scope.currentImageSrc = $scope.originalImageSrc;
console.log(imageId);
console.log(imageURL);
$scope.imageId = imageId;
var terms = /^https?:///;
var isUrl = $scope.currentImageSrc.match(terms);
if (isUrl) {
$scope.imageEditor.launch({
image: $scope.imageId,
url: $scope.currentImageSrc
});
}
else {
$scope.imageEditor.launch({
image: $scope.imageId
});
}
}
After removing all CSS and inspecting element by element, I have found the culprit. It was a CSS conflict, which made all CANVAS element to have a fixed height of 100px.
Thanks for reading.
Related
I'm designing a Google Chrome extension. It is designed to insert an image into text. It currently does so, but the image attached at the bottom shows my problem. The image displays over text, and I was wondering if there was a way to make the image have its own separate space, as if I was using margin - so the snake is to the left of the logo and all of the links, and everything else on the page is shifted to the right slightly. Neither marginLeft nor marginRight work, though. This is my code:
popup.js:
function imageappend() {
const img = document.createElement("img");
img.src = chrome.runtime.getURL("imageedit_1_3932659157.png");
img.style.position = "fixed";
img.style.top = "0";
img.style.left = "0";
img.style.padding = "0";
img.style.marginRight = "7%";
img.style.marginLeft = "0";
img.style.marginBottom = "0";
img.style.marginTop = "0";
img.style.width = "5%";
document.body.appendChild(img);
}
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: imageappend
});
})();
There is not easy answer. It depends much by the layout of the document you inject your script into. The script is injected in the main frame or in a specific one?
If we take as model the wiki page (which it'd seems it have not frameset) you could move all body content in a new div styled with float:right and insert your image in another div (at the same level of the previous div) styling it with float:left
Something like this:
<body>
<div id="csImg" style="float:left"> <img src="..." style="..."> <div>
<div id="mainContainer" style="position:relative; float:right"> all moved body content <div>
<body>
There are several ways to do the same thing... ... and I'm certainly not a black belt in CSS.
Note that if you style the injected image with:
position:fixed
top:"0"
left:"0"
you'll always get an overlaid image placed in the upper left corner of the document.
This is a knowledge sharing Q&A.
Cropme is a nice JS add-on for cropping and rotating an image using visual sliders. The author provided good documentation, but building a working implementation is not as simple as it should be.
The question I want to answer is this:
I want to allow my website-users to upload their profile image. That image must be exactly 240x292 pixels. The users should be able zoom and rotate their image, then crop it to that specific size and upload it to my website. How can I do all that with cropme?
These are the requires steps:
Show an empty placeholder for the image we want the user to load.
By clicking the "Get Image" button, the user can select an image from its local files.
The selected file is loaded into memory, and presented for editing using 'cropme'. The user can use visual sliders to rotate and zoom in/out
After clicking "Crop", the user is presented with the cropped image, and can decide to save the image or to cancel.
After clicking "Save", the cropped image is uploaded to a PHP server, the modal window is closed, and the placeholder image is replaced with the link to the just-uploaded image.
So how can we do this?
A fully working demo is presented here:
https://codepen.io/ishahak/pen/XWjVzLr
I will explain some of the details, step by step.
Note: usually in my code when you see obj[0], it is simply a conversion from jQuery object into a simple JS object.
1. Showing a placeholder for the image.
We can create a real SVG image on the fly using this code:
getImagePlaceholder: function(width, height, text) {
//based on https://cloudfour.com/thinks/simple-svg-placeholder/
var svg = '\
<svg xmlns="http://www.w3.org/2000/svg" width="{w}" \
height="{h}" viewBox="0 0 {w} {h}">\
<rect fill="#ddd" width="{w}" height="{h}"/>\
<text fill="rgba(0,0,0,0.5)" font-family="sans-serif"\
font-size="30" dy="10.5" font-weight="bold"\
x="50%" y="50%" text-anchor="middle">{t}</text>\
</svg>';
var cleaned = svg
.replace(/{w}/g, width)
.replace(/{h}/g, height)
.replace('{t}', text)
.replace(/[\t\n\r]/gim, '') // Strip newlines and tabs
.replace(/\s\s+/g, ' ') // Condense multiple spaces
.replace(/'/gim, '\\i'); // Normalize quotes
var encoded = encodeURIComponent(cleaned)
.replace(/\(/g, '%28') // Encode brackets
.replace(/\)/g, '%29');
return 'data:image/svg+xml;charset=UTF-8,' + encoded;
}
2. By clicking the "Get Image" button, the user can select an image from its local files.
This process involves an input element of type "file" which has no visible appearance (we set it with the 'd-none' class), and a button element which 'clicks' it to open a dialog:
<button id="btnGetImage" class="btn btn-primary">Get Image</button>
<input class="d-none" type="file" id="fileUpload" accept="image/*" />
And the relevant code:
$('#btnGetImage').on('click', function(){
//force 'change' event even if repeating same file:
$('#fileUpload').prop("value", "");
$('#fileUpload').click();
});
$('#fileUpload').on('change', function(){
CiM.read_file_from_input(/*input elem*/this, function() {
console.log('image src fully loaded');
$('#imgModal-dialog').modal('show');
});
});
When a file is selected, the 'change' event is firing, leading us to read the file into memory.
3. The selected file is loaded into memory, and presented for editing using 'cropme'. The user can use visual sliders to rotate and zoom in/out
Our read_file_from_input mentioned above is implemented like this:
imgHolder: null,
imgHolderCallback: null,
read_file_from_input: function(input, callback) {
if (input.files && input.files[0]) {
imgHolderCallback = callback;
var reader = new FileReader();
if (!CiM.imgHolder) {
CiM.imgHolder = new Image();
CiM.imgHolder.onload = function () {
if (imgHolderCallback) {
imgHolderCallback();
}
}
}
reader.onload = function (e) {
console.log('image data loaded!');
CiM.imgHolder.src = e.target.result; //listen to img:load...
}
reader.readAsDataURL(input.files[0]);
}
else {
console.warn('failed to read file');
}
}
When the FileReader is ready, we set the src for our internal image holder, and wait for the 'load' event, which signals that the img element is ready with the new content.
We listen to that 'load' event, and when triggered we show the modal. A modal in Bootstrap has several events. We listen to the one which signals that the modal is shown, meaning that the width and set and we can plan our Cropme dimensions based on it.
update_options_for_width: function(w) {
var o = CiM.opt, //shortcut
vp_ratio = o.my_final_size.w / o.my_final_size.h,
h, new_vp_w, new_vp_h;
w = Math.floor(w * 0.9);
h = Math.floor(w / o.my_win_ratio);
o.container.width = w;
o.container.height = h;
new_vp_h = 0.6 * h;
new_vp_w = new_vp_h * vp_ratio;
// if we adapted to the height, but it's too wide:
if (new_vp_w > 0.6 * w) {
new_vp_w = 0.6 * w;
new_vp_h = new_vp_w / vp_ratio;
}
new_vp_w = Math.floor(new_vp_w);
new_vp_h = Math.floor(new_vp_h);
o.viewport.height = new_vp_h;
o.viewport.width = new_vp_w;
}
We wait for the size of the modal to be set because cropme must be set with specific viewport dimensions. At the end of our shown.bs.modal handler, we create our Cropme instance.
4. After clicking "Crop", the user is presented with the cropped image, and can decide to save the image or to cancel.
Here is the save-button handler:
$('#imgModal-btnSave').on('click', function(){
uploadImage(croppedImg[0], function(path_to_saved) {
savedImg[0].src = path_to_saved;
$('#imgModal-dialog').modal('hide');
});
});
The uploadImage function goes like this:
uploadImage: function(img, callback){
var imgCanvas = document.createElement("canvas"),
imgContext = imgCanvas.getContext("2d");
// Make sure canvas is as big as the picture (needed??)
imgCanvas.width = img.width;
imgCanvas.height = img.height;
// Draw image into canvas element
imgContext.drawImage(img, 0, 0, img.width, img.height);
var dataURL = imgCanvas.toDataURL();
$.ajax({
type: "POST",
url: "save-img.php", // see code at the bottom
data: {
imgBase64: dataURL
}
}).done(function(resp) {
if (resp.startsWith('nok')) {
console.warn('got save error:', resp);
} else {
if (callback) callback(resp);
}
});
}
It is matched with a simple PHP script which appears at the end of the HTML in the codepen. I think this answer went too long, so I'll finish here.
Good luck - have fun :)
I made one email app where I want to use Adobe Creative SDK for editing images and adding text over image. All works almost great but when I click on "text" button and trying to add new layer (Add Text) I not see anything. All options is there, no erros in console just text layer not show up and I'm unable to insert text over image.
Here is my setup:
var featherEditor = new Aviary.Feather({
apiKey: '[MY-ID]',
tools : ['text','crop','resize','color'],
fileFormat : 'png,jpg,gif,jpeg',
theme:'light',
displayImageSize : true,
onSave: function(imageID, newURL) {
var img = document.getElementById(imageID);
img.src = newURL;
}
});
function launchEditor(id, src) {
featherEditor.launch({
image: id,
url: src,
cropPresets: [
'Original',
['Mail App','600x600'],
'4:3',
'16:9'
],
});
return false;
}
I also remove my CSS from this page and leave clean Adobe library and nothing chaged.
Can anyone help me?
I find solution for my problem. I just add one CSS code:
#avpw_canvas_element.avpw_position_by_transform {
z-index: 0;
}
This fix my layering problem and all work great.
I was trying to display desktop notifications on my website.As per this documentation here, I can provide a URL to the icon image.But my website is using font awesome icons, therefore I do not have a URL for icons.Any help or alternatives will be appreciated
function spawnNotification(theBody,theIcon,theTitle) {
var options = {
body: theBody,
icon: theIcon //this should be a URL can I provide an icon class of a text content?
}
var n = new Notification(theTitle,options);
}
Fontawesome icons does come in png, you can directly use a URL to the icon image.
You can host your images on your server
function spawnNotification(theBody,theIcon,theTitle) {
var options = {
body: theBody,
icon: 'http://yourdomain.com/icons/icon.png'
}
var n = new Notification(theTitle,options);
}
For more info about the icons refer here
The situation is that, I want to open an image in bootstrap popover v2.3.1
And the image is in Base64 format.
On the click of the button [id='imagePopoverButton'], the popover window is opening but the base 64 image is not appearing.
I am sharing the below code snippet, if some one can help me in trouble shooting the same.
<!-- js func, which load Base 64 img format via Ajax -->
function showImagePopover() {
$.ajax({
url : getContextPath()
+ "/app/Application/showImagePopover",
type : 'POST',
async : false,
success : function(jqXHR) {
// In this scope, i have fetched the ajax image, but i am not been able
//to show that up in popover
}
});
}
/***************************************************************/
<!-- Popover function js, html:true -->
$("#imagePopoverButton").popover({
content : showImagePopover(),
html : true,
trigger : 'click',
placement : 'right',
});
/***************************************************************/
<!-- via Clicking of the button, ajax call is suppose to load base64 image in popover -->
<button type="button" class="btn btn-mini btn-primary" id="imagePopoverButton" rel="popover">imagePopover</button>
Add the following below the comments
var image = new Image();
image.src = "data:image/png;base64," + jqXHR;
image.id = "image_id";
image.width = '500';
image.height = '500';
$('#imagePopoverButton').html(image);