From 644ec6d8c59210736fa46a4e1031844c67ccddbc Mon Sep 17 00:00:00 2001 From: Alexei Anoshenko Date: Tue, 24 Jan 2023 17:41:56 -0500 Subject: [PATCH] Added InlineImageFromResource function --- CHANGELOG.md | 1 + README-ru.md | 20 +++++++++++++++++++- README.md | 20 +++++++++++++++++++- application.go | 2 -- image.go | 25 ------------------------- imageView.go | 25 +------------------------ utils.go | 30 ++++++++++++++++++++++++++++++ 7 files changed, 70 insertions(+), 53 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d73377..327a6b0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # v0.12.0 * Added SvgImageView +* Added InlineImageFromResource function # v0.11.0 diff --git a/README-ru.md b/README-ru.md index 804d909..053d99d 100644 --- a/README-ru.md +++ b/README-ru.md @@ -2875,7 +2875,25 @@ TextView наследует от View все Свойства параметро Выводимое изображение задается string Свойством "src" (константа Source). В качестве значения данному Свойству присваивается либо имя изображения в папке images ресурсов, -либо url изображения. +либо url изображения, либо inline-изображение. + +inline-изображение это содержимое файла изображения закодированное в формате base64. +Для получения inline-изображение из ресурсов приложения используется функция + + func InlineImageFromResource(filename string) (string, bool) + +inline-изображения необходимо использовать в WebAssembly приложениях, +если вы хотите разместить изображения в ресурсах, а не на внешнем сервере. +inline-изображения могут вызывать фризы приложения в Safari, поэтому их лучше избегать. +Пример + + if runtime.GOOS == "js" { + if image, ok := rui.InlineImageFromResource("image.png"); ok { + view.Set(rui.Source, image) + } + } else { + view.Set(rui.Source, "image.png") + } ImageView позволяет выводить разные изображения в зависимости от плотности экрана (см. раздел "Изображения для экранов с разной плотностью пикселей"). diff --git a/README.md b/README.md index 8a8bb99..aef4046 100644 --- a/README.md +++ b/README.md @@ -2848,7 +2848,25 @@ To create an ImageView function is used: func NewImageView(session Session, params Params) ImageView The displayed image is specified by the string property "src" (Source constant). -As a value, this property is assigned either the name of the image in the "images" folder of the resources, or the url of the image. +As a value, this property is assigned either the name of the image in the "images" folder of the resources, or the url of the image, or inline-image. + +An inline-image is the content of an image file encoded in base64 format. +To get an inline-image from the application resources, use the function + + func InlineImageFromResource(filename string) (string, bool) + +Inline-images must be used in WebAssembly applications +if you want to host images in resources rather than on an external server. +Inline-images can cause app freezes in Safari and should be avoided. +Example + + if runtime.GOOS == "js" { + if image, ok := rui.InlineImageFromResource("image.png"); ok { + view.Set(rui.Source, image) + } + } else { + view.Set(rui.Source, "image.png") + } ImageView allows you to display different images depending on screen density (See section "Images for screens with different pixel densities"). diff --git a/application.go b/application.go index 6b0cb19..ceafd5e 100644 --- a/application.go +++ b/application.go @@ -5,8 +5,6 @@ import ( "strings" ) -var wasmMediaResources = false - //go:embed app_scripts.js var defaultScripts string diff --git a/image.go b/image.go index 78d957b..007afb8 100644 --- a/image.go +++ b/image.go @@ -1,11 +1,7 @@ package rui import ( - "encoding/base64" - "path/filepath" - "runtime" "strconv" - "strings" ) const ( @@ -83,27 +79,6 @@ func (manager *imageManager) loadImage(url string, onLoaded func(Image), session image.loadingStatus = ImageLoading manager.images[url] = image - if runtime.GOOS == "js" && wasmMediaResources { - if file, ok := resources.images[url]; ok && file.fs != nil { - - dataType := map[string]string{ - ".svg": "data:image/svg+xml", - ".png": "data:image/png", - ".jpg": "data:image/jpg", - ".jpeg": "data:image/jpg", - ".gif": "data:image/gif", - } - ext := strings.ToLower(filepath.Ext(url)) - if prefix, ok := dataType[ext]; ok { - if data, err := file.fs.ReadFile(file.path); err == nil { - session.callFunc("loadInlineImage", url, prefix+";base64,"+base64.StdEncoding.EncodeToString(data)) - return image - } else { - DebugLog(err.Error()) - } - } - } - } session.callFunc("loadImage", url) return image } diff --git a/imageView.go b/imageView.go index 05b3901..bb7de7c 100644 --- a/imageView.go +++ b/imageView.go @@ -1,10 +1,7 @@ package rui import ( - "encoding/base64" "fmt" - "path/filepath" - "runtime" "strings" ) @@ -272,27 +269,7 @@ func (imageView *imageViewData) src(src string) (string, string) { } if src != "" { - srcset := imageView.srcSet(src) - if runtime.GOOS == "js" && wasmMediaResources { - if image, ok := resources.images[src]; ok && image.fs != nil { - dataType := map[string]string{ - ".svg": "data:image/svg+xml", - ".png": "data:image/png", - ".jpg": "data:image/jpg", - ".jpeg": "data:image/jpg", - ".gif": "data:image/gif", - } - ext := strings.ToLower(filepath.Ext(src)) - if prefix, ok := dataType[ext]; ok { - if data, err := image.fs.ReadFile(image.path); err == nil { - return prefix + ";base64," + base64.StdEncoding.EncodeToString(data), "" - } else { - DebugLog(err.Error()) - } - } - } - } - return src, srcset + return src, imageView.srcSet(src) } return "", "" } diff --git a/utils.go b/utils.go index 8fad6c3..766e06e 100644 --- a/utils.go +++ b/utils.go @@ -1,7 +1,9 @@ package rui import ( + "encoding/base64" "net" + "path/filepath" "strconv" "strings" ) @@ -76,3 +78,31 @@ func dataFloatProperty(data DataObject, tag string) float64 { } return 0 } + +// InlineImageFromResource reads image from resources and converts it to an inline image. +// Supported png, jpeg, gif, and svg files +func InlineImageFromResource(filename string) (string, bool) { + if image, ok := resources.images[filename]; ok && image.fs != nil { + dataType := map[string]string{ + ".svg": "data:image/svg+xml", + ".png": "data:image/png", + ".jpg": "data:image/jpg", + ".jpeg": "data:image/jpg", + ".gif": "data:image/gif", + } + ext := strings.ToLower(filepath.Ext(filename)) + if prefix, ok := dataType[ext]; ok { + if data, err := image.fs.ReadFile(image.path); err == nil { + return prefix + ";base64," + base64.StdEncoding.EncodeToString(data), true + } else { + DebugLog(err.Error()) + } + } else { + DebugLogF(`InlineImageFromResource("%s") error: Unsupported file`, filename) + } + } else { + DebugLogF(`The resource image "%s" not found`, filename) + } + + return "", false +}