From c0f3b603e7299063f13389637fdb296cb8db8cc7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebasti=C3=A1n=20Rojas?= Date: Mon, 27 Feb 2017 05:34:59 -0500 Subject: [PATCH 1/4] image creation fix --- src/wScratchPad.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/wScratchPad.js b/src/wScratchPad.js index f90e68f..5ebf317 100644 --- a/src/wScratchPad.js +++ b/src/wScratchPad.js @@ -119,13 +119,17 @@ } else { // Have to load image before we can use it. - $(new Image()) - .attr('crossOrigin', '') - .attr('src', this.options.fg) - .load(function () { - _this.ctx.drawImage(this, 0, 0, width, height); - _this.$img.show(); - }); + var self = this; + var frame = new Image(); + + frame.onload = function() { + + self.ctx.drawImage(frame, 0, 0, width, height); + self.$img.show(); + } + + frame.crossOrigin = ''; + frame.src = this.options.fg; } } }, From b68e7f14f5af7232050d4e56d139f0edede7ded9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebasti=C3=A1n=20Rojas?= Date: Sun, 5 Mar 2017 23:51:39 -0500 Subject: [PATCH 2/4] version number fix and square line cap --- package.json | 2 +- src/wScratchPad.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index d37ec90..76922d2 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "wScratchPad", "title": "wScratchPad jQuery Plugin", - "version": "2.1.0", + "version": "2.2.1", "description": "A jQuery plugin to mimic a scratch card or pad behaviour. Allowing you to scratch off an overlay as either a color or image.", "main": "wScratchPad.js", "repository": { diff --git a/src/wScratchPad.js b/src/wScratchPad.js index 5ebf317..3cbff63 100644 --- a/src/wScratchPad.js +++ b/src/wScratchPad.js @@ -203,7 +203,7 @@ _scratchDown: function (e) { this.ctx.globalCompositeOperation = 'destination-out'; this.ctx.lineJoin = 'round'; - this.ctx.lineCap = 'round'; + this.ctx.lineCap = 'square'; this.ctx.strokeStyle = this.options.color; this.ctx.lineWidth = this.options.size; From 87c938eef4620aa221bf49c5194672cd9d1863bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebasti=C3=A1n=20Rojas?= Date: Mon, 6 Mar 2017 00:00:45 -0500 Subject: [PATCH 3/4] build --- package.json | 9 +++++---- src/wScratchPad.js | 5 ++--- wScratchPad.min.js | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 76922d2..c5d08a7 100644 --- a/package.json +++ b/package.json @@ -13,10 +13,11 @@ "email": "rob@websanova.com", "url": "http://websanova.com" }, - "homepage" : "http://wscratchpad.websanova.com", + "homepage": "http://wscratchpad.websanova.com", "license": "MIT, GPL", "dependencies": { - "grunt-contrib-uglify": "", - "grunt-contrib-jshint": "" + "grunt": "^1.0.1", + "grunt-contrib-jshint": "", + "grunt-contrib-uglify": "" } -} \ No newline at end of file +} diff --git a/src/wScratchPad.js b/src/wScratchPad.js index 3cbff63..ab0c11e 100644 --- a/src/wScratchPad.js +++ b/src/wScratchPad.js @@ -76,8 +76,7 @@ }, reset: function () { - var _this = this, - width = Math.ceil(this.$el.innerWidth()), + var width = Math.ceil(this.$el.innerWidth()), height = Math.ceil(this.$el.innerHeight()), devicePixelRatio = window.devicePixelRatio || 1; @@ -126,7 +125,7 @@ self.ctx.drawImage(frame, 0, 0, width, height); self.$img.show(); - } + }; frame.crossOrigin = ''; frame.src = this.options.fg; diff --git a/wScratchPad.min.js b/wScratchPad.min.js index 3c3ed4b..4baae89 100644 --- a/wScratchPad.min.js +++ b/wScratchPad.min.js @@ -1 +1 @@ -/*! wScratchPad - v2.1.0 - 2014-04-14 */!function(a){"use strict";function b(b,c){this.$el=a(b),this.options=c,this.init=!1,this.enabled=!0,this._generate()}b.prototype={_generate:function(){return a.support.canvas?(this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),"static"===this.$el.css("position")&&this.$el.css("position","relative"),this.$img=a('').attr("crossOrigin","").css({position:"absolute",width:"100%",height:"100%"}),this.$scratchpad=a(this.canvas).css({position:"absolute",width:"100%",height:"100%"}),this.$scratchpad.bindMobileEvents(),this.$scratchpad.mousedown(a.proxy(function(b){return this.enabled?(this.canvasOffset=a(this.canvas).offset(),this.scratch=!0,void this._scratchFunc(b,"Down")):!0},this)).mousemove(a.proxy(function(a){this.scratch&&this._scratchFunc(a,"Move")},this)).mouseup(a.proxy(function(a){this.scratch&&(this.scratch=!1,this._scratchFunc(a,"Up"))},this)),this._setOptions(),this.$el.append(this.$img).append(this.$scratchpad),this.init=!0,void this.reset()):(this.$el.append("Canvas is not supported in this browser."),!0)},reset:function(){var b=this,c=Math.ceil(this.$el.innerWidth()),d=Math.ceil(this.$el.innerHeight()),e=window.devicePixelRatio||1;this.pixels=c*d,this.$scratchpad.attr("width",c).attr("height",d),this.canvas.setAttribute("width",c*e),this.canvas.setAttribute("height",d*e),this.ctx.scale(e,e),this.pixels=c*e*d*e,this.$img.hide(),this.options.bg&&("#"===this.options.bg.charAt(0)?this.$el.css("backgroundColor",this.options.bg):(this.$el.css("backgroundColor",""),this.$img.attr("src",this.options.bg))),this.options.fg&&("#"===this.options.fg.charAt(0)?(this.ctx.fillStyle=this.options.fg,this.ctx.beginPath(),this.ctx.rect(0,0,c,d),this.ctx.fill(),this.$img.show()):a(new Image).attr("src",this.options.fg).load(function(){b.ctx.drawImage(this,0,0,c,d),b.$img.show()}))},clear:function(){this.ctx.clearRect(0,0,Math.ceil(this.$el.innerWidth()),Math.ceil(this.$el.innerHeight()))},enable:function(a){this.enabled=a===!0?!0:!1},destroy:function(){this.$el.children().remove(),a.removeData(this.$el,"wScratchPad")},_setOptions:function(){var a,b;for(a in this.options)this.options[a]=this.$el.attr("data-"+a)||this.options[a],b="set"+a.charAt(0).toUpperCase()+a.substring(1),this[b]&&this[b](this.options[a])},setBg:function(){this.init&&this.reset()},setFg:function(){this.setBg()},setCursor:function(a){this.$el.css("cursor",a)},_scratchFunc:function(a,b){a.pageX=Math.floor(a.pageX-this.canvasOffset.left),a.pageY=Math.floor(a.pageY-this.canvasOffset.top),this["_scratch"+b](a),(this.options.realtime||"Up"===b)&&this.options["scratch"+b]&&this.options["scratch"+b].apply(this,[a,this._scratchPercent()])},_scratchPercent:function(){for(var a=0,b=this.ctx.getImageData(0,0,this.canvas.width,this.canvas.height),c=0,d=b.data.length;d>c;c+=4)0===b.data[c]&&0===b.data[c+1]&&0===b.data[c+2]&&0===b.data[c+3]&&a++;return a/this.pixels*100},_scratchDown:function(a){this.ctx.globalCompositeOperation="destination-out",this.ctx.lineJoin="round",this.ctx.lineCap="round",this.ctx.strokeStyle=this.options.color,this.ctx.lineWidth=this.options.size,this.ctx.beginPath(),this.ctx.arc(a.pageX,a.pageY,this.options.size/2,0,2*Math.PI,!0),this.ctx.closePath(),this.ctx.fill(),this.ctx.beginPath(),this.ctx.moveTo(a.pageX,a.pageY)},_scratchMove:function(a){this.ctx.lineTo(a.pageX,a.pageY),this.ctx.stroke()},_scratchUp:function(){this.ctx.closePath()}},a.support.canvas=document.createElement("canvas").getContext,a.fn.wScratchPad=function(c,d){function e(){var d=a.data(this,"wScratchPad");return d||(d=new b(this,a.extend(!0,{},c)),a.data(this,"wScratchPad",d)),d}if("string"==typeof c){var f,g=[],h=(void 0!==d?"set":"get")+c.charAt(0).toUpperCase()+c.substring(1),i=function(){f.options[c]&&(f.options[c]=d),f[h]&&f[h].apply(f,[d])},j=function(){return f[h]?f[h].apply(f,[d]):f.options[c]?f.options[c]:void 0},k=function(){f=a.data(this,"wScratchPad"),f&&(f[c]?f[c].apply(f,[d]):void 0!==d?i():g.push(j()))};return this.each(k),g.length?1===g.length?g[0]:g:this}return c=a.extend({},a.fn.wScratchPad.defaults,c),this.each(e)},a.fn.wScratchPad.defaults={size:5,bg:"#cacaca",fg:"#6699ff",realtime:!0,scratchDown:null,scratchUp:null,scratchMove:null,cursor:"crosshair"},a.fn.bindMobileEvents=function(){a(this).on("touchstart touchmove touchend touchcancel",function(a){var b=a.changedTouches||a.originalEvent.targetTouches,c=b[0],d="";switch(a.type){case"touchstart":d="mousedown";break;case"touchmove":d="mousemove",a.preventDefault();break;case"touchend":d="mouseup";break;default:return}var e=document.createEvent("MouseEvent");e.initMouseEvent(d,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),c.target.dispatchEvent(e)})}}(jQuery); \ No newline at end of file +/*! wScratchPad - v2.2.1 - 2017-03-06 */!function(a){"use strict";function b(b,c){this.$el=a(b),this.options=c,this.init=!1,this.enabled=!0,this._generate()}b.prototype={_generate:function(){if(!a.support.canvas)return this.$el.append("Canvas is not supported in this browser."),!0;this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),"static"===this.$el.css("position")&&this.$el.css("position","relative"),this.$img=a('').attr("crossOrigin","").css({position:"absolute",width:"100%",height:"100%"}),this.$scratchpad=a(this.canvas).css({position:"absolute",width:"100%",height:"100%"}),this.$scratchpad.bindMobileEvents(),this.$scratchpad.mousedown(a.proxy(function(b){if(!this.enabled)return!0;this.canvasOffset=a(this.canvas).offset(),this.scratch=!0,this._scratchFunc(b,"Down")},this)).mousemove(a.proxy(function(a){this.scratch&&this._scratchFunc(a,"Move")},this)).mouseup(a.proxy(function(a){this.scratch&&(this.scratch=!1,this._scratchFunc(a,"Up"))},this)),this._setOptions(),this.$el.append(this.$img).append(this.$scratchpad),this.init=!0,this.reset()},reset:function(){var a=Math.ceil(this.$el.innerWidth()),b=Math.ceil(this.$el.innerHeight()),c=window.devicePixelRatio||1;if(this.pixels=a*b,this.$scratchpad.attr("width",a).attr("height",b),this.canvas.setAttribute("width",a*c),this.canvas.setAttribute("height",b*c),this.ctx.scale(c,c),this.pixels=a*c*b*c,this.$img.hide(),this.options.bg&&("#"===this.options.bg.charAt(0)?this.$el.css("backgroundColor",this.options.bg):(this.$el.css("backgroundColor",""),this.$img.attr("src",this.options.bg))),this.options.fg)if("#"===this.options.fg.charAt(0))this.ctx.fillStyle=this.options.fg,this.ctx.beginPath(),this.ctx.rect(0,0,a,b),this.ctx.fill(),this.$img.show();else{var d=this,e=new Image;e.onload=function(){d.ctx.drawImage(e,0,0,a,b),d.$img.show()},e.crossOrigin="",e.src=this.options.fg}},clear:function(){this.ctx.clearRect(0,0,Math.ceil(this.$el.innerWidth()),Math.ceil(this.$el.innerHeight()))},enable:function(a){this.enabled=a===!0},destroy:function(){this.$el.children().remove(),a.removeData(this.$el,"wScratchPad")},_setOptions:function(){var a,b;for(a in this.options)this.options[a]=this.$el.attr("data-"+a)||this.options[a],b="set"+a.charAt(0).toUpperCase()+a.substring(1),this[b]&&this[b](this.options[a])},setBg:function(){this.init&&this.reset()},setFg:function(){this.setBg()},setCursor:function(a){this.$el.css("cursor",a)},_scratchFunc:function(a,b){a.pageX=Math.floor(a.pageX-this.canvasOffset.left),a.pageY=Math.floor(a.pageY-this.canvasOffset.top),this["_scratch"+b](a),(this.options.realtime||"Up"===b)&&this.options["scratch"+b]&&this.options["scratch"+b].apply(this,[a,this._scratchPercent()])},_scratchPercent:function(){for(var a=0,b=this.ctx.getImageData(0,0,this.canvas.width,this.canvas.height),c=0,d=b.data.length;c Date: Mon, 6 Mar 2017 00:15:59 -0500 Subject: [PATCH 4/4] Version number fix --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c5d08a7..173b7c4 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "wScratchPad", "title": "wScratchPad jQuery Plugin", - "version": "2.2.1", + "version": "2.2.3", "description": "A jQuery plugin to mimic a scratch card or pad behaviour. Allowing you to scratch off an overlay as either a color or image.", "main": "wScratchPad.js", "repository": {