Skip to content

Instantly share code, notes, and snippets.

@Kimserey
Created January 30, 2016 01:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Kimserey/6696bfea49d91074eef7 to your computer and use it in GitHub Desktop.
Save Kimserey/6696bfea49d91074eef7 to your computer and use it in GitHub Desktop.
Cropbox bindings with WebSharper F#
open WebSharper
open WebSharper.JavaScript
/// Wraps cropbox.js functionalities to be able to be used with WebSharper.
/// cropbox is a plugin to crop avatar.
/// https://github.com/hongkhanh/cropbox/tree/master/javascript
[<JavaScript>]
module Cropbox =
type Identifiers = {
file: string
crop: string
zoomIn: string
zoomOut: string
} with
static member Default = { file = "file"; crop = "btnCrop"; zoomIn = "btnZoomIn"; zoomOut = "btnZoomOut" }
type Options = {
imageBox: string
thumbBox: string
spinner: string
imgSrc: string
} with
static member Default = { imageBox = ".imageBox"; thumbBox = ".thumbBox"; spinner = ".spinner"; imgSrc = "avatar.png" }
[<Direct("""var cropper;
document.querySelector('#' + $identifiers.file).addEventListener('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
$opt.imgSrc = e.target.result;
cropper = new cropbox($opt);
}
reader.readAsDataURL(this.files[0]);
this.files = [];
})
document.querySelector('#' + $identifiers.crop).addEventListener('click', function(){
var img = cropper.getDataURL();
var arr = img.match(/^data:([a-z//]+);base64,([A-Za-z0-9+/=]+)/);
$onCrop(arr.slice(1, 3));
})
document.querySelector('#' + $identifiers.zoomIn).addEventListener('click', function(){
cropper.zoomIn();
})
document.querySelector('#' + $identifiers.zoomOut).addEventListener('click', function(){
cropper.zoomOut();
})""")>]
let init (identifiers: Identifiers) (opt: Options) (onCrop: string[] -> unit) = X<unit>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment