Download và upload ảnh sử dụng WCF REST Service trên Windows Phone

Rate this post

Mở đầu

Thể theo yêu cầu của nhiều bạn muốn tìm hiểu về cách thức xử lý download và upload ảnh qua service trong bài viết này chúng ta sẽ cùng đi tìm hiểu cách thức download và upload ảnh sử dụng WCF REST Service trên Windows Phone bằng cách dùng Base64 String. Ứng dụng demo trong bài viết này là ứng dụng đổi avatar của người dùng, một phần không thể thiếu trong các ứng dụng social hiện nay. Bài này ngầm định là các bạn đã biết cách tạo ra và sử dụng các service sử dụng công nghệ WCF REST Service. Nếu bạn chưa biết vui lòng xem qua 2 bài viết sau:

Tạo WCF REST Service download upload ảnh dùng Base64 string

  • Bước 1: Tạo project web WCFRESTImage và chọn template Web Forms như hình dưới
  • Bước 2: Tạo folder Services và thêm một WCF Service đặt tên là ImageService
  • Bước 3: Xóa example DoWork và bổ sung 2 operation vào IImageService như sau:

    Ở đây chúng ta sử dụng class UserProfile để lưu thông tin người dùng truyền qua lại giữa client và server
  • Bước 4: Implement 2 operation này như sau:

    Ở đây sử dụng cho mục đích demo nên chúng ta sẽ lưu ảnh vào một thư mục tên là Avatar trên server nên nếu chưa có bạn vui lòng tạo ra trước. Bên cạnh đó để cho đơn giản chúng ta sẽ lưu tên file ảnh avatar theo id người dùng dạng integer và fix định dạng ảnh hỗ trợ là jpg. Các bạn có thể mở rộng ra như là lưu avatar vào database thay vì file và hỗ trợ thêm các định dạng ảnh khác.
  • Bước 5: Cấu hình wcf service trả về dạng JSON:

Đến đây các bước chuyển bị service đã hoàn tất chúng ta cùng bước vào phần tiếp theo

Tạo ứng dụng Windows Phone cho phép đổi avatar người dùng

Ở bước kế tiếp này chúng ta sẽ tạo ra một ứng dụng demo việc đổi avatar cho người dùng như sau:

  • Bước 1: Thêm 1 project Windows Phone Apps, chọn template Blank App và đặt tên là WCFRESTImageWP
  • Bước 2: Thiết kế UI MainPage.xaml chỉ gồm có một control Image Avatar, Avatar sẽ hiển thị khi người dùng chạy ứng dụng và cho phép đổi Avatar khi người dùng chạm vào Image này

  • Bước 3: Viết code trong method OnNavigatedTo để GetAvatar và hiển thị lên trên Image. Chú ý cần tạo ra class UserProfile tương tự như trên server để sử dụng và sử dụng lại thư viện POST/GET dữ liệu đã biết trong các bài viết trước

    Sau khi lấy được base64 string từ service, trong hàm SetAvatarFromBase64String chúng ta sẽ dùng DataWriter và Stream để tạo ra BitmapImage và gán cho Image Avatar:

    Ở đây chúng ta sử dụng thư viện Json.NET để serialize string JSON thành object UserProfile, bạn có thể thêm thư viện này qua NuGet.
  • Bước 4: Viết code cho sự kiện Tapped của Grid để đổi Avatar như sau:

    Chúng ta dùng FileOpenPicker để lấy ảnh trong PictureLibrary và Filter loại file cho phép sử dụng là jpg, bạn có thể bổ sung filter để hỗ trợ thêm các định dạng ảnh khác nhưng cần chú ý sửa lại phần server cho tương ứng. Sau đó chúng ta bắt event Activated của CurrentView để POST avatar lên service và set lại ảnh avatar mới sau khi chọn ảnh avatar từ thư viện ảnh như sau:

    Trong event viewActivated chúng ta sẽ lấy ra file vừa chọn sau đó POST lên service qua method PostAvatarToService, nếu thành công thì sẽ set lại ảnh avatar mới cho Image bằng method SetAvatarFromBase64String

Mọi thứ đã hoàn tất các bạn có thể chạy thử ứng dụng, trước khi chạy thử chúng ta cần set cho 2 project web service và windows phone startup cùng lúc như sau:

  • Right-click Solution và chọn Properties
  • Tại đây chọn Startup Projects, đổi từ Single sang Multiple startup projects và chọn Action cho 2 project cùng là Start và click OK

Bây giờ chỉ cần Ctrl+F5 để hưởng thụ thành quả vừa xây dựng xong.


Kết luận

Trong bài viết này tôi đã hướng dẫn các bạn cách xây dựng service xử lý download và upload ảnh sử dụng WCF REST Service trên Windows Phone bằng cách dùng Base64 String qua một ứng dụng demo thay đổi Avatar của người dùng. Cách thức sử dụng Base64 String có ưu điểm là sử dụng string nên việc xử lý ở phần service và client đều đơn giản nhưng chúng cũng có nhược điểm rất lớn đó là dữ liệu chuyển thành dạng base64 nên dung lượng sẽ lớn hơn ảnh thật thêm khoảng 30%.

Trong các bài viết sau chúng ta sẽ cùng tìm hiểu các cách thức xử lý ảnh trên các công nghệ .NET khác. Hy vọng bài viết này sẽ giúp ích cho các bạn trong quá trình xây dựng các ứng dụng của riêng mình. Nếu bạn có bất kì câu hỏi hay kinh nghiệm nào hãy chia sẻ bằng comment bên dưới bài viết và đừng quên chia sẻ cho bạn bè nếu thấy hữu ích.

Happy coding. Stay tuned.

P/s: Source code example các bạn có thể download tại đây: WCFRESTImage

Comments

  1. tungnt185tungnt185 says

    Hi Bong, Theo những gì anh biết thì trên WP không sử dụng được thư viện của Google Maps em ạ.

  2. Mr.Bong says

    Như vậy là chỉ dùng được Bing map thôi ạ? Anh có biết dùng thư viện gì để có thể vẽ được hình (shape) trên maps không ạ? Như trên Google map thì dùng polygon nhưng WP lại ko dùng đc GG map :((

  3. Truman says

    Em đang làm việc với BingMap, giả sử em GET một đía chỉ bất ký hay một tọa độ từ trên WebService về, sau đó muốn marked cái tọa độ hay cái địa chỉ đó thì phải làm soa ạ. Cám ơn anh.

  4. Thuận says

    bạn ơi!. bạn có biết làm thế nào để up ảnh trong ứng dụng của Facebook không? nếu biết chia sẽ mình với, mình có làm 1 ứng dụng facebook nhưng chưa biết cách đưa ảnh của user lên

    • tungnt185 says

      Hi em,

      Đơn giản là như hàm SetAvatar kia thay vì trả về kiểu bool thì em sẽ trả về string chứa link ảnh là được.

    • tungnt185 says

      Hi em, Hiện thời anh chưa có ý định viết bài về cách download/upload ảnh sử dụng web api. Về cơ bản nó phía windows phone là tương tự, chỉ có phía service là khác chút thôi. Anh sẽ plan viết sau nhé. Thanks em

  5. Duc Nam says

    giới hạn up ảnh như thế nào vậy anh. em muốn chỉ cho up những file ít hơn 2mb.
    với ảnh mà lớn thì giảm chất lượng được không anh

    • tungnt185 says

      Giới hạn up ảnh 2MB thì sử dụng mảeceivedMessageSize = “2048000” và mãBufferSize=”2048000″. Ảnh lớn thì em resize lại cho nhỏ đi trước khi up, nên hạn chế ảnh nhỏ vài chục đến trăm KB thôi.

        • tungnt185 says

          Hi Nam em nên tìm hiểu trước xem có những cách nào và làm thử theo những cách đấy, anh chỉ có thể gợi ý cho em như vậy.

          Nếu không giải quyết được hoặc gặp lỗi ở đâu đó thì hỏi anh anh sẽ trợ giúp.

          Regards.

  6. Truman says

    Em đang phát triển một app WP. có dùng DB từ My SQL, Em muốn viết một hàm tìm kiếm truy suất từ DB nhưng không thấy có nhiều hướng dẫn. Có thằng Search task nhưng chỉ cho phép tìm từ Web và Device thôi ạ. Nhờ anh chỉ giúp. Cám ơn anh

    • tungnt185 says

      Hi em,

      Hiện thời em đang gặp khó khăn ở đoạn nào? Bài toán anh nhìn cũng clear đâu thấy có gì phức tạp. Em viết hàm search ở server, tham số là searchterm, rồi query database sau đó trả list result về device để hiển thị lên thôi.

      Regards

      • Woody says

        I’m a new guy in WP programming. Assume I have a page with the field to put the keyword need to search. So when I clicked search button, Search function on server will run and returned the result to device, right. Can I have an example for this case? I don’t know what should do. Thanks.

        • tungnt185 says

          Hi Woody,

          If your app always need online and the result is small enough you can search on server-side and return the result to app but if the result is large I think you should store database on local on search on it for the best performance. The example about this, I will blog next time so you should subscribe to my blog to receive notification on this post.

          Thanks and best regards.

  7. Ha Qui says

    ANh ơi, cho e hỏi localhost của e up ảnh thì được, nhưng khi up lên host thật thì nó ko up được, anh biết cách làm iarm dung lượng, hoặc fix size ảnh trước khi chuyển sang base64 rồi up lên ko anh ? hay có vấn đề khác khắc phục không ? Em cảm ơn anh.

    • tungnt185 says

      Hi em,

      Để giải quyết vấn đề giới hạn dung lượng truyền qua wcf anh đã trả lời bạn Duc Nam ở trên, em xem trong link để biết cách cấu hình nhé.

      Regards.

  8. Anh says

    Anh cho em hỏi nếu lưu ảnh trong csdl thì phải thêm ntn để hiển thị lên được windows phone

    • tungnt185 says

      Hi Anh. Nếu em đã lưu ảnh vào database thì nó đã lưu dạng byte[] rồi nên em không cần phải làm bước convert từ ảnh thành byte[] nữa mà convert thành base64 string rồi trả về luôn.

      • Anh says

        Ví dụ em dùng Wcf service có một bảng gồm name,image. và một view để xem toàn bộ thông tin thông qua name.
        [OperationContract]
        view_get_all_user GetUserInfo(string Name);

        public view_get_all_user GetUserInfo (string Name)
        {
        view_get_all_user resultUser = new view_get_all_user();
        resultUser = (from m in dbc.view_get_all_users where m.Name.Equals(Name) select m).FirstOrDefault();
        return resultUser;
        }
        View này em hiển thị trên app nhưng byte[] của image thì chưa hiển thị được.
        Thế thì chèn hàm getavatar, setavatar vào ntn ạ. Em mới tìm hiểu thôi, mong anh thông cảm

        • tungnt185 says

          Hi em, như trên thì trong class view_get_all_user em có thuộc tính vd ImageBase64, em cần dùng getavatar để convert từ byte[] sang string trước khi trả về client, còn khi đẩy từ client lên thì lại dùng setavatar để convert ngược lại trước khi lưu và database.

          Bản chất là em phải convert qua lại base64string và sử dụng thôi.

          • Anh says

            anh viết cụ thể 1 đoạn class view trong code của em ntn với.em vẫn không hiểu.

  9. [email protected] says

    Anh cho em hỏi: em đang làm về giới thiệu cửa hàng ăn trên winphone sử dụng nhiều ảnh quá mà lưu trực tiếp ảnh vào csdl thì rất nặng. vậy có cách nào ko. và lúc gọi trên wcf service có khác ko?

    • tungnt185 says

      Chào Vân Anh,

      Về cách gọi lên service thì ko có gì khác cả như anh đã nói trong comment trước chỉ thay vì lưu vào db thì em lưu thành file thôi.
      Có lẽ đợi anh viết một bài về cách upload nhiều file lên service em sẽ hiểu rõ hơn :)

      • Anh says

        Em có lưu đường dẫn ảnh vào sql Ví dụ là E:/tenanh.png. Trên winphone em gắn source ảnh bằng đưỡng dẫn đấy thông qua wcf.Em đã lấy được link rồi, sao trên winphone lúc hiển thị lại không được vậy a ?

Trackbacks

Leave a Reply to Duc Nam Cancel reply

Your email address will not be published. Required fields are marked *