Welcome Guest! To enable all features, please Login or Register.

Notification

Icon
Error

Options
View
Last Go to last post Unread Go to first unread post
#1 Posted : Wednesday, May 31, 2017 11:19:37 AM(UTC)
huey.hoague

Groups: Registered
Posts: 18


I can see in the demos how the SaveImage button saved the current image
var dataUrl: string = backCanvas.toDataURL("image/png");

and dumped it into a new html about:blank page
saveWindow.document.write("<img src='" + dataUrl + "' alt='Viewer Does Not Contain Image'/>");

Any clue on how I can copy this image (with whatever current image processing command applied) into clipboard so I can paste this image into things like email.
 

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 accountor Register a new forum account.

#2 Posted : Thursday, June 1, 2017 2:17:30 PM(UTC)

Hadi  
Hadi

Groups: Manager, Tech Support, Administrators
Posts: 171

Was thanked: 5 time(s) in 5 post(s)

Thanks for posting your question. The only way to achieve this is via user prompting - so you cannot programmatically force the image into the users clipboard as this is against security standards. The best solution I can think of is to get the canvas data / image data as a URL and set that to a link that the user can then click to open in a new tab or pop-up div then right-click and copy the image themselves.

I have created a small sample application that shows you how to use the Bootstrap Modal dialog with the ImageProcessing commands to create a temporary Canvas and clone the image from the ImageViewer Canvas and then apply the image processing to it and pop it up in the Modal dialog.

UserPostedImage

UserPostedImage



Here is the HTML:
Code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Image Copy Demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="Styles/bootstrap.min.css">
	<script src="Scripts/jquery.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="Scripts/Leadtools.js"></script>
    <script type="text/javascript" src="Scripts/Leadtools.Controls.js"></script>
    <script type="text/javascript" src="Scripts/app.js"></script>
</head>

<body>
    <div class="jumbotron jumbotron-sm">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-lg-12">
                    <h1 class="h1">Image Copy Demo</h1>
                </div>
            </div>
        </div>
    </div>
    <div class="container" id="container">
        <div class="row">
            <div id="imageViewerDiv" style="width: 600px; height: 600px; background-color: darkgray"></div>
        </div>
        <div class="row">
            <button type="button" class="btn" onclick="Flip()">Flip Image</button>
			<button type="button" class="btn" onclick="Brightness()">Change Brightness</button>
        </div>
        <div class="modal fade" id="modal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Copy Image Dialog</h4>
                    </div>
                    <div class="modal-body" id="copycontent">
						<canvas id="mycanvas"/>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


and here is the JavaScript:
Code:
var imageViewer;

window.onload = function () {
  // Get the container DIV
  var imageViewerDiv = document.getElementById("imageViewerDiv");
  // Create the image viewer inside it
  var createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv);
  imageViewer = new lt.Controls.ImageViewer(createOptions);
  // Add handler to show an alert on errors
  imageViewer.itemError.add(function (sender, e) {
    alert("Error loading " + e.data.srcElement.src);
  });
  
  imageViewer.resizeOnTransform = true;
  imageViewer.autoCreateCanvas = true;
  imageViewer.imageUrl = "images/cannon.jpg";
  imageViewer.zoom(lt.Controls.ControlSizeMode.fit, 1, imageViewer.defaultZoomOrigin);
            
}

function Flip(){
	var myCanvas = imageViewer.canvas;
	var context = myCanvas.getContext("2d"); 
	
	var tempCanvas=document.createElement("canvas");
	tempCanvas.width = myCanvas.width;
	tempCanvas.height = myCanvas.height;
	var tempCtx = tempCanvas.getContext("2d");
	tempCtx.drawImage(myCanvas, 0, 0);
		
	var imageProcessing = new lt.ImageProcessing(); 
	imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Main.js"; 
	imageProcessing.command = "Flip"; 
	imageProcessing.imageData = tempCtx.getImageData(0, 0, myCanvas.width, myCanvas.height); 
	imageProcessing.completed.add(function(sender, e) { 
		
		tempCtx.putImageData(e.imageData, 0, 0); 
		var img=new Image();
		img.onload=function(){
			tempCtx.drawImage(img,0,0);
		}
		img.src=tempCanvas.toDataURL();
		$("#copycontent").empty();
		$("#copycontent").append(img);	
		$("#modal").modal();
	}); 
	imageProcessing.run(); 
	imageViewer.invalidate(lt.LeadRectD.empty);
}
function Brightness(){
	var myCanvas = imageViewer.canvas;
	var context = myCanvas.getContext("2d"); 
	
	var tempCanvas=document.createElement("canvas");
	tempCanvas.width = myCanvas.width;
	tempCanvas.height = myCanvas.height;
	var tempCtx = tempCanvas.getContext("2d");
	tempCtx.drawImage(myCanvas, 0, 0);
	
	var imageProcessing = new lt.ImageProcessing(); 
	imageProcessing.jsFilePath = "Scripts/Leadtools.ImageProcessing.Color.js"; 
	imageProcessing.command = "ContrastBrightnessIntensity"; 
	imageProcessing.arguments["contrast"] = 500; 
	imageProcessing.arguments["brightness"] = 500; 
	imageProcessing.arguments["intensity"] = 500; 
	imageProcessing.imageData = context.getImageData(0, 0, myCanvas.width, myCanvas.height); 
	imageProcessing.completed.add(function(sender, e) { 
		tempCtx.putImageData(e.imageData, 0, 0); 
		var img=new Image();
		img.onload=function(){
			tempCtx.drawImage(img,0,0);
		}
		img.src=tempCanvas.toDataURL();
		$("#copycontent").empty();
		$("#copycontent").append(img);	
		$("#modal").modal();
	}); 
	imageProcessing.run(); 
}

File Attachment(s):
ImageProcessingCopy.zip (400kb) downloaded 167 time(s).

Hadi Chami
Developer Support Manager
LEAD Technologies, Inc.

LEAD Logo
 
#3 Posted : Tuesday, August 29, 2017 8:48:42 AM(UTC)

jgp137  
jgp137

Groups: Registered
Posts: 4


Hadi,
When the image URL is copied to the new window, the zoom and rotate options are lost. We are assuming this occurs because these features do not manipulate the image. With this said, how would you recommend doing so? The requirement is to copy the image into the new window as it appears in the designer/canvas. This would include the zoom and rotate settings the user has applied. Thanks.
 
#4 Posted : Wednesday, August 30, 2017 7:58:37 AM(UTC)
Duncan Quirk

Groups: Registered, Tech Support, Administrators
Posts: 31

Was thanked: 3 time(s) in 3 post(s)

Hello,

You are correct. The rotation and zoom operations are not actually applied to the image data itself, but are instead stored within the ImageViewer object.

If you would like to apply these operations to the image data itself, you would need to call a back-end service in order to apply the operations. For rotations, you would need to use the RotateCommand:

RotateCommand: https://www.leadtools.co...ssing-rotatecommand.html

You can get the rotation angle from the Image Viewer with the rotateAngle property.
https://www.leadtools.co...eviewer-rotateangle.html

In order to get a new image that consists of the zoomed in region of the ImageViewer, you would need to use the CopyRectangleCommand:

CopyRectangleCommand: https://www.leadtools.co...opyrectanglecommand.html

Duncan Quirk
Developer Support Engineer
LEAD Technologies, Inc.

LEAD Logo
 
#5 Posted : Wednesday, August 30, 2017 8:24:35 AM(UTC)

jgp137  
jgp137

Groups: Registered
Posts: 4


Hi, thanks for that reply. Is the CopyRectangleCommand available in the HTML5 viewer? At the end of the day, the users want to save the image that is visible in the ImageViewer (after all manipulations) and copy into an email or save to disk.
 
#6 Posted : Wednesday, August 30, 2017 10:41:41 AM(UTC)
Duncan Quirk

Groups: Registered, Tech Support, Administrators
Posts: 31

Was thanked: 3 time(s) in 3 post(s)

The CopyRectangleCommand is a back-end only method. In order to get the rectangular region corresponding to the current ImageViewer window, you would need to use the GetItemViewBounds method.

GetItemViewBounds: https://www.leadtools.co...r-getitemviewbounds.html

You could also use the imageBounds property of the imageViewer: https://www.leadtools.co...eviewer-imagebounds.html
Duncan Quirk
Developer Support Engineer
LEAD Technologies, Inc.

LEAD Logo
 
#7 Posted : Wednesday, August 30, 2017 12:44:42 PM(UTC)

jgp137  
jgp137

Groups: Registered
Posts: 4


Would it be possible for you to modify the project above to include this feature?
 
#8 Posted : Thursday, August 31, 2017 3:24:06 PM(UTC)
Duncan Quirk

Groups: Registered, Tech Support, Administrators
Posts: 31

Was thanked: 3 time(s) in 3 post(s)

I went ahead and converted the project to an MVC Visual Studio project. There will be a Process Image button that will extract the rotation/zoom information from the Image Viewer, and pass it to a controller. The controller will run the RotateCommand and CopyRectangleCommand, and return a reference to the altered image. The processed image will appear in a model just like with the Flip Image/Change Brightness buttons.

File Attachment(s):
ImageProcessingMVC.zip (1,272kb) downloaded 67 time(s).

Duncan Quirk
Developer Support Engineer
LEAD Technologies, Inc.

LEAD Logo
 
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.

Powered by YAF.NET | YAF.NET © 2003-2017, Yet Another Forum.NET
This page was generated in 0.264 seconds.