實(shí)現(xiàn)零足跡（zero footprint）應(yīng)用程序的方法雖多，然而許多的應(yīng)用只是簡(jiǎn)單的把所有的圖片推給服務(wù)器端處理，圖像處理性能和質(zhì)量就大打折扣。有了LEADTOOLS JavaScript庫(kù)，這些問(wèn)題都可以引刃而解。LEADTOOLS JavaScript不僅可以快速執(zhí)行其客戶端圖像處理事務(wù)，還大大降低了應(yīng)用程序開(kāi)發(fā)的工作量，只需要幾行代碼便可初始化查看器和圖像處理引擎：

function InitializeComponents() {
// Setup the Viewer
_imageViewer = new Leadtools.Controls.ImageViewer(new Leadtools.Controls.ImageViewerCreateOptions("myLeadImageViewer", "myLeadImageViewerControlID"));
_imageViewer.set_imageUrl("Content/cannon.jpg");

// Set size mode and initialize image processing after image loaded
_imageViewer.add_imageChanged(function () {
_imageViewer.set_sizeMode(Leadtools.Controls.ImageViewerSizeMode.fitWidth);
InitImageProcessing();
});

_imageViewer.set_defaultInteractiveMode(new Leadtools.Controls.ImageViewerPanZoomInteractiveMode);
}

function InitImageProcessing() {
var myCanvas = _imageViewer.get_backCanvas();
var context = myCanvas.getContext("2d");

_imageProcessing = new Leadtools.ImageProcessing();

_imageProcessing.add_completed(function (sender, e) {
context.putImageData(e.get_imageData(), 0, 0);
_imageViewer.invalidate();
});
}

接下來(lái)，通過(guò)設(shè)置參數(shù)和調(diào)用運(yùn)行便可執(zhí)行圖像處理算法。

function SetIPParams(filterName, ctx, canvas) {
var myCanvas = _imageViewer.get_backCanvas();
var ctx = myCanvas.getContext("2d");

_imageProcessing.set_jsFilePath("Scripts/Leadtools.ImageProcessing.Effects.js");
_imageProcessing.set_command(filterName);
_imageProcessing.set_imageData(ctx.getImageData(0, 0, myCanvas.width, myCanvas.height));
return _imageProcessing;
}

function SharpenFilter() {
var imageProcessing = SetIPParams("Sharpen");
imageProcessing.get_arguments()["sharpness"] = 750;
imageProcessing.get_arguments()["threshold"] = 0;

imageProcessing.run();
}

function GaussianFilter() {
var imageProcessing = SetIPParams("GaussianFilter");
imageProcessing.get_arguments()["radius"] = 10;

imageProcessing.run();
}

此時(shí)，我們已成功地將強(qiáng)大而快速的客戶端圖像處理程序添加的HTML5/ JavaScript應(yīng)用程序中。下載并運(yùn)行完整示例。