#1
Posted
:
Wednesday, November 1, 2017 11:36:11 AM(UTC)
Groups: Registered
Posts: 9
I want to be able to zoom an image and keeps its original pixelated form.
I have found that CSS can used from IE11, Firefox and Chrome however it fails for Edge.
In a differnent project I got around the same problem by setting technique in
this linkHow can I do this with the imageviewer?
#2
Posted
:
Wednesday, November 1, 2017 2:53:27 PM(UTC)
Groups: Registered, Tech Support, Administrators
Posts: 70
Was thanked: 4 time(s) in 4 post(s)
Hello,
Thank you for posting your question on the LEADTOOLS Technical Forums. Can you clarify what exactly you are trying to do? Are you trying to zoom in on an image, and save out the portion of the image that is currently in the viewer? Or are you just wanting to keep the image pixelated? If you are wanting to preserve the original state of the image, I would suggest that you look at the Interpolation settings on the Image Viewer. These settings can be found in our documentation here:
https://www.leadtools.co...viewerinterpolation.htmlDuncan Quirk
Developer Support Engineer
LEAD Technologies, Inc.
![LEAD Logo LEAD Logo](https://www.leadtools.com/images/new-site-images/leadtools-logo-header.png)
#3
Posted
:
Thursday, November 2, 2017 9:02:53 AM(UTC)
Groups: Registered
Posts: 9
Thanks for response.
I am trying to zoom in on an image and want to keep the image pixelated (see JSFiddle at bottom for demo).
Had tried the interpolation settings but made no difference.
With Elements I could use CSS to get the result I wanted in all browsers except Edge.
I have got it working using the basic example from the forums
https://www.leadtools.com/support/forum/posts/t12220-HOW-TO--Load-an-image-from-client-system-without-a-backend by editing the Javascript handleImage function as ...
Code:
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
item.size = lt.LeadSizeD.create(img.width, img.height);
item.image = img;
imageViewer.zoom(lt.Controls.ControlSizeMode.fitAlways, 1.0, imageViewer.defaultZoomOrigin);
var canvasNS = imageViewer.foreCanvas;
var ctxNS = canvasNS.getContext('2d');
ctxNS.imageSmoothingEnabled = false;
ctxNS.mozImageSmoothingEnabled = false;
ctxNS.webkitImageSmoothingEnabled = false;
ctxNS.msImageSmoothingEnabled = false;
imageViewer.invalidate(lt.LeadRectD.empty);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
Above method is how I got round this previously.
A JSFiddle to demonstate the Javascript code
Zoom ExampleProbably a better way to do this but at least it works for now.
#4
Posted
:
Tuesday, November 7, 2017 4:04:01 PM(UTC)
Groups: Registered, Tech Support, Administrators
Posts: 70
Was thanked: 4 time(s) in 4 post(s)
Thank you for explaining your situation more, and providing us with the JSfiddle link. I'm glad to hear that you were able to get it working. If you have any further questions please feel free to let us know -- we would be more than happy to answer them.
Duncan Quirk
Developer Support Engineer
LEAD Technologies, Inc.
![LEAD Logo LEAD Logo](https://www.leadtools.com/images/new-site-images/leadtools-logo-header.png)
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.