I.Introduction
Ở bài trước mình đã chia sẽ về cách cài đặt Nokia Imagine Sdk, giúp cho các bạn có thể cài và built ứng dụng
Trong bài này mình xin chia sẻ cách sử dụng hiệu ứng trong Nokia Imagine Sdk đối với một hình ảnh được chọn từ MediaLibrary
II.Fundamental
Trước tiên chúng ta tạo một Windows Phone Application Project. sau đó Design giao diện gồm một Grid và 1 ApplicationBarIconButton.
1: <phone:PhoneApplicationPage.ApplicationBar>
2: <shell:ApplicationBar IsMenuEnabled="False"
3: Opacity="0.7">
4: <shell:ApplicationBarIconButton IconUri="/Images/image_icon.png"
5: Text="Cartoon"
6: Click="ApplyCartoonFilterClick" />
7: </shell:ApplicationBar>
8: </phone:PhoneApplicationPage.ApplicationBar>
9:
10: <Grid x:Name="LayoutRoot"
11: Background="Transparent">
12: <Grid.RowDefinitions>
13: <RowDefinition Height="50" />
14: <RowDefinition />
15: </Grid.RowDefinitions>
16:
17: <Image x:Name="ImageSample"
18: Grid.RowSpan="2" />
19:
20: <Grid Background="#B2000000">
21: <TextBlock Text="Nokia Imaging - Filters"
22: Style="{StaticResource PhoneTextNormalStyle}"
23: Margin="0"
24: HorizontalAlignment="Center"
25: VerticalAlignment="Top" />
26: </Grid>
27:
28: </Grid>
Giao diện này dùng để hiển thị hình ảnh sau khi chọn từ thư viện và từ đó khi chọn vào Button sẽ kích hoạt hiệu ứng và thay đổi hình ảnh hiện tại.
Sau khi làm giao diện xong chúng ta chọn Add References để thêm thư viện Nokia Imagine Sdk vào Project
Vào MainPage.xaml.cs để tiến hành xử lý
Đầu tiên chúng ta khai báo namespace để sử dụng các thao tác trên Nokia Imagine Sdk:
using Microsoft.Phone.Controls;
using Nokia.Graphics.Imaging;
using Microsoft.Phone.Tasks;
using System.IO;
using System.Windows.Media.Imaging;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Storage.Streams;
Tiếp theo khai báo một số biến toàn cục để thao tác và lưu trữ :
EditingSession editingSession;
MemoryStream imageStream;
protected IBuffer buffer;
double imageWidthPreview;
double imageHeightPreview;
Để chọn hình ảnh từ MediaLibrary thì đơn giản nhất là chúng ta dùng PhotoChooser
Task (các bạn có thể tự viết thông qua MediaLibrary nhé).
Kế tiếp vào contructor MainPage() để khai báo PhotoChooser
Task và khai báo sự kiện Completed cho nó :
1: public MainPage()
2: {
3: InitializeComponent();
4:
5: var photoChooserTask = new PhotoChooserTask();
6: photoChooserTask.Completed += PhotoChooserTaskCompleted;
7: photoChooserTask.Show();
8: }
Bây giờ xử lý sự kiện PhotoChooserTaskCompleted, khi chọn ảnh xong, chúng ta cần quan tâm 2 vấn đề :
- Một là render hình ảnh đã chọn ra giao diện để hiển thị cho người dùng xem
- Hai là copy và lưu trữ stream của ảnh vừa chọn, để khi chúng ta apply hiệu ứng vào được dể dàng
1: private void PhotoChooserTaskCompleted(object sender, PhotoResult e)
2: {
3: if (e.TaskResult == TaskResult.OK)
4: {
5: var bmp = new BitmapImage();
6: bmp.SetSource(e.ChosenPhoto);
7: ImageSample.Source = bmp;
8:
9: imageStream = new MemoryStream();
10: var bitmap = new WriteableBitmap(bmp.PixelWidth, bmp.PixelHeight);
11:
12: try
13: {
14: // For JPEG images
15: bitmap.LoadJpeg(e.ChosenPhoto);
16: e.ChosenPhoto.Position = 0;
17: e.ChosenPhoto.CopyTo(imageStream);
18: }
19: catch (Exception)
20: {
21: // For Other Image formats
22: BitmapImage image = new BitmapImage();
23: image.SetSource(e.ChosenPhoto);
24:
25: bitmap = new WriteableBitmap(image);
26: bitmap.SaveJpeg(imageStream, image.PixelWidth, image.PixelHeight, 0, 100);
27: }
28:
29:
30: }
31: }
Đến bước này công việc tiếp theo của chúng ta là xử lý sự kiện click của ApplicationBatIconButton để apply một hiệu ứng cho tấm ảnh vừa chọn:
1: async private void ApplyCartoonFilterClick(object sender, EventArgs e)
2: {
3: // Lưu lại kích thước ảnh để render sau khi apply hiệu ứng
4: imageWidthPreview = ImageSample.ActualWidth;
5: imageHeightPreview = ImageSample.ActualHeight;
6:
7: // Lấy dữ liệu WindowsRuntimeBuffer của tấm ảnh từ MemoryStream
8: buffer = imageStream.GetWindowsRuntimeBuffer();
9:
10: // Khởi tạo EditingSession và chỉ định là Session này apply cho buffer
11: editingSession = new EditingSession(buffer, InputImageFormat.Jpeg);
12:
13: // thêm hiệu ứng Cartoon cho tấm ảnh
14: editingSession.AddFilter(FilterFactory.CreateCartoonFilter(true));
15:
16: // Gán lại kích thước cho tấm ảnh mới được xử lý
17: ImageSample.Width = imageWidthPreview;
18: ImageSample.Height = imageHeightPreview;
19:
20: // Render kết quả ra đối tượng Image ngoài giao diện
21: await editingSession.RenderToImageAsync(ImageSample, OutputOption.PreserveAspectRatio);
22: }
Các bạn lưu ý những phần mình đã ghi chú cho sự kiện thêm hiệu ứng nhé, nếu làm sai là dể bị crash dữ lắm đó.
Bây giờ chiêm ngưỡng kết quả nào
Hy vọng bài viết này sẽ hữu ích với các bạn
Pham Nguyen 