HTML5 Imageviewer pixel detail

Options

View

Last

Unread

Previous Topic Next Topic

#1 Posted : Wednesday, November 1, 2017 11:36:11 AM(UTC)

aida

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 link

How can I do this with the imageviewer?


	Try the latest version of LEADTOOLS for free for 60 days by downloading the evaluation: https://www.leadtools.com/downloads Wanna join the discussion? Login to your LEADTOOLS Support account or Register a new forum account.

#2 Posted : Wednesday, November 1, 2017 2:53:27 PM(UTC)

Duncan Quirk

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.html

Duncan Quirk
Developer Support Engineer
LEAD Technologies, Inc.

#3 Posted : Thursday, November 2, 2017 9:02:53 AM(UTC)

aida

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 Example

Probably a better way to do this but at least it works for now.

#4 Posted : Tuesday, November 7, 2017 4:04:01 PM(UTC)

Duncan Quirk

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.

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.