Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Only insert preview images in the DOM #1

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Only insert preview images in the DOM #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 8 additions & 8 deletions effects_cb.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,51 +12,51 @@ import (
func (s *Shimmer) setupBrightnessCb() {
s.brightnessCb = js.NewEventCallback(js.PreventDefault, func(ev js.Value) {
// quick return if no source image is yet uploaded
if s.sourceImg == nil {
if s.resizedImg == nil {
return
}
delta := ev.Get("target").Get("value").Float()
start := time.Now()
res := adjust.Brightness(s.sourceImg, delta)
res := adjust.Brightness(s.resizedImg, delta)
s.updateImage(res, start)
})
}

func (s *Shimmer) setupContrastCb() {
s.contrastCb = js.NewEventCallback(js.PreventDefault, func(ev js.Value) {
// quick return if no source image is yet uploaded
if s.sourceImg == nil {
if s.resizedImg == nil {
return
}
delta := ev.Get("target").Get("value").Float()
start := time.Now()
res := adjust.Contrast(s.sourceImg, delta)
res := adjust.Contrast(s.resizedImg, delta)
s.updateImage(res, start)
})
}

func (s *Shimmer) setupHueCb() {
s.hueCb = js.NewEventCallback(js.PreventDefault, func(ev js.Value) {
// quick return if no source image is yet uploaded
if s.sourceImg == nil {
if s.resizedImg == nil {
return
}
delta := ev.Get("target").Get("value").Int()
start := time.Now()
res := adjust.Hue(s.sourceImg, delta)
res := adjust.Hue(s.resizedImg, delta)
s.updateImage(res, start)
})
}

func (s *Shimmer) setupSatCb() {
s.satCb = js.NewEventCallback(js.PreventDefault, func(ev js.Value) {
// quick return if no source image is yet uploaded
if s.sourceImg == nil {
if s.resizedImg == nil {
return
}
delta := ev.Get("target").Get("value").Float()
start := time.Now()
res := adjust.Saturation(s.sourceImg, delta)
res := adjust.Saturation(s.resizedImg, delta)
s.updateImage(res, start)
})
}
13 changes: 2 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
.image {
display: block;
max-height: 25rem;
width: 49%;
float: left;
border: 2px solid gray;
margin-right: 2px;
Expand All @@ -31,9 +30,9 @@
<label for="sat">Saturation</label>
<input type="range" min="-1" max="1" value="0" step="0.1" id="sat">

<div class="separator">Results:</div>
<div class="separator">preview:</div>
<div>
<image id="sourceImg" class="image" />
<image id="previewImg" class="image" />
<image id="targetImg" class="image" />
</div>

Expand All @@ -55,14 +54,6 @@
await go.run(inst);
}

document.getElementById('uploader').addEventListener('change', function() {
let reader = new FileReader();
reader.onload = (ev) => {
document.getElementById("sourceImg").src = ev.target.result;
};

reader.readAsDataURL(this.files[0])
});
</script>
</body>
</html>
44 changes: 8 additions & 36 deletions load_image_cb.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@
package shimmer

import (
"encoding/base64"
"image"
"strings"
"syscall/js"
)

Expand All @@ -14,38 +11,13 @@ const (
pngPrefix = "data:image/png;base64,"
)

func (s *Shimmer) setupOnImgLoadCb() {
s.onImgLoadCb = js.NewCallback(func(args []js.Value) {
source := js.Global.
Get("document").Call("getElementById", "sourceImg").
Get("src").String()

switch {
case strings.HasPrefix(source, jpegPrefix):
source = strings.TrimPrefix(source, jpegPrefix)
case strings.HasPrefix(source, pngPrefix):
source = strings.TrimPrefix(source, pngPrefix)
default:
s.log("unrecognized image format")
return
}

reader := base64.NewDecoder(base64.StdEncoding, strings.NewReader(source))
var err error
s.sourceImg, _, err = image.Decode(reader)
if err != nil {
s.log(err.Error())
return
}
s.log("Ready for operations")

// reset brightness and contrast sliders
js.Global.Get("document").
Call("getElementById", "brightness").
Set("value", 0)

js.Global.Get("document").
Call("getElementById", "contrast").
Set("value", 0)
func (s *Shimmer) setupOnFileUploadCb() {
s.fileUploadCb = js.NewEventCallback(js.PreventDefault, func(ev js.Value) {
file := ev.Get("srcElement").Get("files").Get("0")
freader := js.Global.Get("FileReader").New()
freader.Set("onload", js.NewEventCallback(js.PreventDefault, func(ev js.Value) {
s.setSourceImageFromString(ev.Get("target").Get("result").String())
}))
freader.Call("readAsDataURL", file)
})
}
63 changes: 54 additions & 9 deletions shimmer.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,37 +7,43 @@ import (
"encoding/base64"
"fmt"
"image"
"math"
"strings"
"syscall/js"
"time"

"github.com/anthonynsimon/bild/imgio"
"github.com/anthonynsimon/bild/transform"
)

type Shimmer struct {
buf bytes.Buffer
onImgLoadCb, shutdownCb js.Callback
brightnessCb, contrastCb js.Callback
hueCb, satCb js.Callback
sourceImg image.Image
buf bytes.Buffer
onImgLoadCb, shutdownCb js.Callback
brightnessCb, contrastCb js.Callback
hueCb, satCb, fileUploadCb js.Callback
sourceImg image.Image
dstWidth int
resizedImg image.Image

done chan struct{}
}

// New returns a new instance of shimmer
func New() *Shimmer {
return &Shimmer{
done: make(chan struct{}),
dstWidth: 300,
done: make(chan struct{}),
}
}

// Start sets up all the callbacks and waits for the close signal
// to be sent from the browser.
func (s *Shimmer) Start() {
// Setup callbacks
s.setupOnImgLoadCb()
s.setupOnFileUploadCb()
js.Global.Get("document").
Call("getElementById", "sourceImg").
Call("addEventListener", "load", s.onImgLoadCb)
Call("getElementById", "uploader").
Call("addEventListener", "change", s.fileUploadCb)

s.setupBrightnessCb()
js.Global.Get("document").
Expand Down Expand Up @@ -74,6 +80,45 @@ func (s *Shimmer) Start() {
s.shutdownCb.Close()
}

func (s *Shimmer) setSourceImageFromString(simg string) {
switch {
case strings.HasPrefix(simg, jpegPrefix):
simg = strings.TrimPrefix(simg, jpegPrefix)
case strings.HasPrefix(simg, pngPrefix):
simg = strings.TrimPrefix(simg, pngPrefix)
default:
s.log("unrecognized image format")
return
}

reader := base64.NewDecoder(base64.StdEncoding, strings.NewReader(simg))
var err error
s.sourceImg, _, err = image.Decode(reader)
if err != nil {
s.log(err.Error())
return
}
srcWidth, srcHeight := s.sourceImg.Bounds().Dx(), s.sourceImg.Bounds().Dy()
dstWidth := s.dstWidth
ratio := float64(srcHeight) / float64(srcWidth)
dstHeight := int(math.Ceil(ratio * float64(dstWidth)))
s.resizedImg = transform.Resize(s.sourceImg, dstWidth, dstHeight, transform.Linear)
enc := imgio.JPEGEncoder(90)
err = enc(&s.buf, s.resizedImg)
if err != nil {
s.log(err.Error())
return
}
// setting the previewImg src property
js.Global.Get("document").
Call("getElementById", "previewImg").
Set("src", jpegPrefix+base64.StdEncoding.EncodeToString(s.buf.Bytes()))
js.Global.Get("document").
Call("getElementById", "targetImg").
Set("src", jpegPrefix+base64.StdEncoding.EncodeToString(s.buf.Bytes()))
s.buf.Reset()
}

// updateImage writes the image to a byte buffer and then converts it to base64.
// Then it sets the value to the src attribute of the target image.
func (s *Shimmer) updateImage(img *image.RGBA, start time.Time) {
Expand Down