I am adding an image to a TinyMCE editor using:
var params = {
src: filename,
title: "Attached image: " + filename,
width: 500
};
ed.execCommand("mceInsertContent", false, ed.dom.createHTML("img", params));
This insert the image correctly in the editor. However, when the user clicks on the image he has the ability of resizing it.
I would like to know if there is a way to:
Prevent the user to resize only in one direction (i.e. how do I keep a fixed aspect ratio for the image)
Completely prevent the user to resize the image
I found a (partial) answer, so I thought I will share it here.
Adding
'object_resizing' : false
In the editor config prevents the resizing.
Note that this is a feature of Mozilla only (e.g. Google Chrome does not allow you to resize the image).
I am still looking for a way of keeping aspect ratio in real time, but I do not know if that is really possible.
You can simply add this little plugin to tinyMCE, I used it and it works very well!
Here's the documentation: Link
You would need to implement a resize handler (for example a jQuery handler).
It might be helpfull to add attributes to your images to save its dimensions or to use one single setting holding the aspect ratio. For this you will adjust the tinymce configuration setting valid_elements to allow those attributes for images - otherwise tinymce would strip them out.
When resize gets fired you grab the new dimensions and adjust the dimensions according to the aspect ratio - eigther adjust using the new width or new heigth (the other value is needs to get corrected).
Example: images have an attribute aspectratio holding the aspect ration
You may place this code in thetinymce setup configuration parameter
setup : function(ed) {
ed.onInit.add(function(ed) {
$(ed.getBody()).find('img').resize( function(event){
$(event.target).css('width', parseInt ( event.target.width * this.aspectratio) );
});
});
}
Update:
I have created a tinymce fiddle to show an example to use with IE.
Related
I'm working on a basic design app where the user can upload images to a canvas, drag them around and resize them. The problem I have is resizing the image with a mouse drag. I'd like the user to position the mouse pointer on either corner of the bitmap image and drag either towards or away from the bitmap to resize it proportionally. I'd be grateful for any code or suggestions.
Lanny mentioned that you had this question here. ZIM, which is based on CreateJS has this functionality built in - it is called transform(). We also have an uploader built in called Loader().
Here is the code that you would use inside the ZIM template available on the code page at ZIM https://zimjs.com
const loader = new Loader().center();
loader.on("loaded", e=>{
e.bitmap.center().transform();
// or if you want multiple files
// loop(e.bitmaps, bitmap=>{
// bitmap.center().transform();
// });
loader.removeFrom();
stage.update();
});
Below is an image that has been loaded. You can try it here https://zimjs.com/explore/uploadresize.html. The transform interface will go away when the user clicks off the image and then comes back when they click on the image. There are various options for all of this that you can read about in the Docs available on the ZIM site.
All your regular CreateJS will work and you will find that ZIM is helpful in many other ways too! Aside from transform() there is drag() for normal dragging, and gesture() for pinch zoom and rotate - you would use one or the other of these not combined.
I'm using the
Item.grabToImage()
But I'm getting the following error.
QML ItemX: grabToImage: item has invalid dimensions
This is because I'm using height and width properties like so:
width: {
// return with * 0.4; based for some condition
// for eg
return parent.width * 0.4;
}
// and something similar with height
The only time that I can get the following code working is when I put in a static heigth and width:
grabToImage(
function(result)
{
result.saveToFile("/path/project-name/tmp/something.png");
}
);
Any ideas of why and how do I get around this problem?
Thank you
I'm not a 100% sure why, But it was something about the dynamic width of the parent.
In the program I wrote I has set the anchors of the image to the left and right of the preview container.
So when I tried to get the image capture from another item that was overlaying the image to cut out smaller parts of the image it was not letting me.
How I fixed this was to set a fixed image size of the source image and then just anchor it to the center of the preview section.
The only thing is now it will not size up if you scale the window.
I'm sure I could implement and on size change to the main program window and then set the width of the image (Not tested).
Last thing I should mention is that if the image is small then the cut out images from sections of the source image will be blurry and not good quality.
I fixed this by setting the "sourceSize.width" to a very large image and then used the "scale" property to scale down the image to fit within the preview item.
I have managed to remove the dialog boxes allowing an image to be resized (in ckeditor image2 plugin). Is there a way to prevent the user from resizing an image with the corner handle?
EDIT:
Reinmar is right. And to use in config.js do:
CKEDITOR.editorConfig = function( config ) {
...
config.disallowedContent = 'img[width,height]';
}
This will also remove the height and width options from the dialog box in a functional way.
If it's satisfactory for you to remove width and height attributes at all use:
CKEDITOR.replace( 'editor1', {
disallowedContent: 'img[width,height]'
} );
You can read more about disallowed content here and the Advanced Content Filter here.
If you want to hide only resizer but leave inputs in the image dialog and attrubtes in code, then I believe you need to hide it via CSS.
I use the GWT image class with a ClickHandler to trigger actions when specific areas of the image are clicked. In order to specify these areas, I use the image's dimensions. The problem occurs when you change the size of your browser window. While the image rescales nicely, the getWidth() and getHeight() methods still return the image's original size, not the size after rescaling.
Do you know a way to retrieve the current size of the image?
.getElement().getOffsetWidgth() ? and .getOffsetHeight().
I think thats what you need.
That will return the current size of the element in the Dom, including any decorations like borders in the CSS.
I was looking for a custom image grid and found a similar question that had a really sweet component in an answer.
I downloaded the code and after some fiddling, I managed to get it to compile in DXE2. It looks really cool, but I can't get either scrollbar to show up. I also can't figure out how to dynamically control the images displayed. Or how to update the grid based on keyboard events.
Also, to get it to compile I had to remove the GR32 references; the library I downloaded had too many incompatibilities with DXE2 for me to resolve.
Any help would be greatly appreciated. This really looks like a killer component.
Update from Bill:
Here is a screenshot of incorrect thumbnail painting. I can not get the thumbnails to look like the screenshot from the component in question.
If the thumbnails were painted at the same XY as the rects painted in the first pass they would look much better. Any idea on what is going on?
... but I can't get either scrollbar to show up.
Well, there is no horizontal scrollbar. There is the property ColWidth that controls how much images are drawn in one row, depending on the control's width. You might update ColWidth in an OnResize event handler due to anchor settings, for example.
The vertical scroll bar appears automatically when not all images (incl. spacing) fit in the clientrect. The images are drawn on a TPaintBox and that paint box' size is updated as soon as the image count changes:
procedure TImageGrid.RearrangeImages;
begin
...
FPainter.Height := Max(ClientHeight,
FRowCount * (FRowHeight + FImageSpacing) - FImageSpacing);
The component inherites from TScrollingWinControl, so the scroll bar should modify accordingly. If not, then Bill has a workaround found as commented:
VertScrollBar.Range := FRowCount * (FRowHeight + FImageSpacing) - FImageSpacing;
I understand this obviously also works, but I really wonder why the scroll bar's range should be modified manually. Here in D7 I have no problem with a hidden vertical scroll bar.
... I also can't figure out how to dynamically control the images displayed. ...
The most easy way to fill the component is by assigning the Folder property to a path with images. Only the images with the file formats in the FileFormats property will be loaded. To specify the images manually (e.g. to combine multiple folders), use the FileNames property. When the Folder property is set, then the FileNames property is updated accordingly, but those file names are not stored in the DFM. When you change the file names (e.g. you delete one from the folder), then the Folder property is cleared and the component uses the FileNames property instead.
... Or how to update the grid based on keyboard events. ...
The only keystrokes currently implemented are Up, Down, PageUp, PageDown, Home and End which all scroll the control. What more key actions do you wish? It's a viewer.
Here is a screenshot of incorrect thumbnail painting. I can not get the thumbnails to look like the screenshot from the component in question. ... If the thumbnails were painted at the same XY as the rects painted in the first pass they would look much better.
While loading the images, a temporary rect is drawn with size ColWidth * RowHeight. All images are stretchdrawn within that size, so adjust your ratio of these properties to make the spacing equal everywhere. Note that you can also influence appearance with the ImageHorzAlign and ImageVertAlign properties.
Update:
The component you refer to is recently completely rewritten, and some of the answers above are outdated.
It now has a Propertional property that defaults to True, but when set False, it will stretch up the thumbs to whatever cell size you have set, independent from the original image sizes. Small images could remain narow though, unless you set the new Stretch property to True.
It now distinguishes between RowHeight and CellHeight, and ColWidth and CellWidth. The difference between both is CellSpacing.
The component does not descend from TScrollingWinControl anymore, but from TCustomControl and only the vertical scroll bar is added.