[WPF] 在WPF 中嵌入 Summernote ，檔案上傳再傳給WPF 存成實體檔案。

2017-09-12

這邊需求就是，因為我在WPF 中間嵌入 Webbrowse ，然後 Webbrowser 中嵌入 summernote ，但是我不想要他的html code 中帶有base64 圖片，這樣會讓整個檔案會變得很大，所以圖片必須另外處理，但是，因為是WPF 並非網路上的server 所以該怎麼做呢?

傳統在web 上的做法可以參考這一篇: http://no2don.blogspot.com/2016/06/aspnet-summernote-base64.html
今天要做的是要改寫上述的那一篇將它改成傳遞base64 圖片給WPF 某一個function 然後 WPF 再將base64 轉為實體檔案，之後再回傳給summernote

Javascript :

        //Init Summernote
        $(document).ready(function () {
            $('.summernote').summernote(
                {
                    height: 300,
                    callbacks: {
                        onImageUpload: function (image) {


                            var reader = new FileReader();
                            var imgfile = reader.readAsDataURL(image[0]);
                            reader.onload = function () {
                               
                               var res= uploadImage(reader.result);
                               var image = $('<img>').attr('src', res);
                                //會來後再編輯點插入該圖片，因為回傳是網址只要處理src 即可
                                $('.summernote').summernote("insertNode", image[0]);
                            };
        
                        }
                    }
                }
            );
        });

        function uploadImage(image) {
            return window.external.UploadImage(image);
        }

C# 的 UploadImage 收到base64 檔案後，存成一個實體檔案，並且跟.html 放一起，回傳檔名後插入至summernote 即可:

       public string UploadImage(string img)
        {

            var imageBase64=img.Split(new string[] { ";base64," }, StringSplitOptions.None)[1];
          
          
            var image = Base64ToImage(imageBase64).Source as BitmapSource;
            var filename = Guid.NewGuid().ToString("N");
           
            using (var fileStream = new FileStream(AppDomain.CurrentDomain.BaseDirectory +"Assets"+ System.IO.Path.DirectorySeparatorChar + filename + ".png", FileMode.Create))
            {
                BitmapEncoder encoder = new PngBitmapEncoder();
                encoder.Frames.Add(BitmapFrame.Create(image));
                encoder.Save(fileStream);
            }

            return filename + ".png";
        }


        public Image Base64ToImage(string base64String)
        {
            byte[] imageBytes = Convert.FromBase64String(base64String);
           
            using (var ms = new MemoryStream(imageBytes, 0, imageBytes.Length))
            {
                Image image = new Image();
                using (MemoryStream stream = new MemoryStream(imageBytes))
                {
                    image.Source = BitmapFrame.Create(stream,
                                                      BitmapCreateOptions.None,
                                                      BitmapCacheOption.OnLoad);
                }

                return image;
            }
        }

結果:

這邊有參考到黑大的這篇文章 http://blog.darkthread.net/post-2013-02-17-wpf-webbrowser-scripting.aspx，做javascript 呼叫 WPF function 的方法。

這邊有 source code :
https://github.com/donma/TestSummerNoteInWPF

當麻許的超技八

贊助區

廣告專區

站內搜尋

標籤們

連結們

網誌存檔

Author

[WPF] 在WPF 中嵌入 Summernote ，檔案上傳再傳給WPF 存成實體檔案。