2

I'm currently using a canvas with an image as a background manipulated with FabricJS to draw on it easily using the property isDrawingMode: true.

The problem is that users would like to pinch to zoom in the image and I do not know how to do that with FabricJS, I have found other libraries like Pixi.js but they seem really complex for my use case: watching an image (it does not take the entire screen), drawing and zooming in it, saving the result.

All my users have iPads so pinch to zoom is important, do you know a library that could fit these requirements?

Improve this question

1 Answer 1

Reset to default
3

One commercial solution you could try is the LEADTOOLS Image Viewer and Annotations Library.

The Image Viewer control provided by the SDK supports pinch to zoom as well as the ability to add Annotations which would allow you to draw on images.

You can try out an online interactive demo here: LEADTOOLS JS Annotations Online Interactive Demo

Here is some sample code on how to get started with the LEADTOOLS library:

HTML Code

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>LEADTOOLS Demo</title>
    <script type="text/javascript" src="lib/Leadtools.js"></script>
    <script type="text/javascript" src="lib/Leadtools.Controls.js"></script>
    <script type="text/javascript" src="lib/app.js"></script>
    <script type="text/javascript" src="lib/Leadtools.Annotations.Core.js"></script>
    <script type="text/javascript" src="lib/Leadtools.Annotations.Rendering.JavaScript.js"></script>
    <script type="text/javascript" src="lib/Leadtools.Annotations.Designers.js"></script>
    <script type="text/javascript" src="lib/Leadtools.Annotations.Automation.js"></script>
    <script type="text/javascript" src="lib/Leadtools.Annotations.JavaScript.js"></script>
</head>
<body>
    <div id="imageViewerDiv" style="width:550px; height:200px; background-color: darkgray"></div>
</body>

Javascript Code

window.onload = function () {
var imageViewerDiv = document.getElementById("imageViewerDiv");
var createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv);
var imageViewer = new lt.Controls.ImageViewer(createOptions);
imageViewer.imageUrl = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png";

var renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine();
var manager = new lt.Annotations.Automation.AnnAutomationManager.create(renderingEngine);
manager.createDefaultObjects();
manager.editObjectAfterDraw = false;

var automationControl = new lt.Annotations.JavaScript.ImageViewerAutomationControl();
automationControl.imageViewer = imageViewer;
var automationInteractiveMode = new lt.Annotations.JavaScript.AutomationInteractiveMode();
automationInteractiveMode.automationControl = automationControl;
imageViewer.defaultInteractiveMode = automationInteractiveMode;

var automation = new lt.Annotations.Automation.AnnAutomation(manager, automationControl);
imageViewer.itemChanged.add(function (sender, e) {
   var container = automation.container;
   container.size = container.mapper.sizeToContainerCoordinates(imageViewer.imageSize);
   manager.currentObjectId = lt.Annotations.Core.AnnObject.freehandObjectId;
});
automation.active = true;

}

Output of above code:

screenshot of pasted code blocks

Just as a disclaimer, I am an employee of this library.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.