Skip to content

Instantly share code, notes, and snippets.

@gitawego
Created July 31, 2015 12:51
Show Gist options
  • Save gitawego/aaabfdc87f2bd7c24a0e to your computer and use it in GitHub Desktop.
Save gitawego/aaabfdc87f2bd7c24a0e to your computer and use it in GitHub Desktop.
simple captcha in angular
angular.module('myApp.directives', [])
.directive('captcha', function () {
return {
scope: { ngData: '@', ngClick: '@' },
restrict: 'A',
link: function (scope, el, attrs) {
var canvas = el[0];
var context = canvas.getContext("2d");
var fontsize = 14;
var x = canvas.width / 2;
var y = canvas.height / 2 + 7;
canvas.addEventListener("click", scope.ngClick, false);
context.font = fontsize + "pt serif";
context.textAlign = 'center';
context.fillStyle = "#fff";
scope.$watch("ngData", function (newValue, oldValue) {
if (newValue !== oldValue) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillText(newValue, x, y);
} else {
context.fillText(oldValue, x, y);
}
});
}
};
});
@gitawego
Copy link
Author

usage:

<canvas width="80px" height="30px" class="captcha" style="margin-right: 20px;" 
ng-data="{{captcha}}" ng-click="reloadCaptcha()" captcha></canvas>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment