實現零足跡(zero footprint)應用程序的方法雖多,然而許多的應用只是簡單的把所有的圖片推給服務器端處理,圖像處理性能和質量就大打折扣。有了LEADTOOLS JavaScript庫,這些問題都可以引刃而解。LEADTOOLS JavaScript不僅可以快速執行其客戶端圖像處理事務,還大大降低了應用程序開發的工作量,只需要幾行代碼便可初始化查看器和圖像處理引擎:
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(); }); }
接下來,通過設置參數和調用運行便可執行圖像處理算法。
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(); }
此時,我們已成功地將強大而快速的客戶端圖像處理程序添加的HTML5/ JavaScript應用程序中。下載並運行完整示例。