#1
Posted
:
Wednesday, May 31, 2017 11:14:37 AM(UTC)
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.
#2
Posted
:
Thursday, June 1, 2017 2:12:30 PM(UTC)
Groups: Manager, Tech Support, Administrators
Posts: 218
Was thanked: 12 time(s) in 12 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.
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">×</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();
}
Hadi Chami
Developer Support Manager
LEAD Technologies, Inc.
#3
Posted
:
Tuesday, August 29, 2017 8:43:42 AM(UTC)
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:53:37 AM(UTC)
Groups: Registered, Tech Support, Administrators
Posts: 70
Was thanked: 4 time(s) in 4 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.htmlYou can get the rotation angle from the Image Viewer with the rotateAngle property.
https://www.leadtools.co...eviewer-rotateangle.htmlIn 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.htmlDuncan Quirk
Developer Support Engineer
LEAD Technologies, Inc.
#5
Posted
:
Wednesday, August 30, 2017 8:19:35 AM(UTC)
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:36:41 AM(UTC)
Groups: Registered, Tech Support, Administrators
Posts: 70
Was thanked: 4 time(s) in 4 post(s)
#7
Posted
:
Wednesday, August 30, 2017 12:39:42 PM(UTC)
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:19:06 PM(UTC)
Groups: Registered, Tech Support, Administrators
Posts: 70
Was thanked: 4 time(s) in 4 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.
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.