Canvas Image about angular-flippy HOT 11 CLOSED

you could load the image through javascript directly and upon completion send a event that it's been loaded and can be flipped.

<flippy
  class="fancy"
  ng-click="$ctrl.preloadImage()"
  flip="['custom:IMG_READY]"
  flip-back="['click']"
  duration="800"
  timing-function="ease-in-out">
</flippy>

in your controller:

function preloadImage() {
  var image = new Image();
  image.src = 'http://placekitten.com/200/300';
  image.addEventListener('load', function() {
    // image has been loaded
    $rootScope.$broadcast('IMG_READY');
  });
}

you get my idea?
cheers

from angular-flippy.

Thanks for suggestion, but facing below error now while using this
TypeError: Cannot read property 'addEventListener'

from angular-flippy.

a Image instance always has addEventListener method.
did you initialize it correctly? need more code.

from angular-flippy.

Managed to solve that but still not able to work out, here is the complete code.
Controller Code
`myapp.controller('opencards',function($scope,$http,$timeout,$rootScope){

$scope.generateCard=function(){

console.log("buttin press");

var startimg="/img/cardback.jpg";
$scope.image=startimg;
$scope.textOverlay="Knowledge";

var canvas = document.createElement('canvas');

var context = canvas.getContext('2d');

var source = new Image();
source.src = startimg;

canvas.width = source.width;
canvas.height = source.height;

context.drawImage(source,0,0);
context.font = "50px PTS1";

context.textAlign = 'center';
context.fillStyle = 'maroon';

context.fillText($scope.textOverlay,canvas.width/2,canvas.height*0.2);

//Text Wrap Function Start
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(' ');
var line = '';

for(var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else {
line = testLine;
}
}
context.fillText(line, x, y);
}
//Text Wrap Function End
//Calling for TextWrap second quote
var lineHeight = 20;
var x = (canvas.width_.5);
var y = (canvas.height_.3);
var maxWidth=canvas.width_.90;
var text = "If you had read the meditation carefully you would not have needed to ask this question—the two forces are conservation and destruction." + '' + "-The Mother"
context.font = "20px PTSC";
context.fillStyle = "#4d1300";
wrapText(context, text, x, y, maxWidth, lineHeight);
//Calling ends second quote
//Calling for TextWrap third quote
var lineHeight = 25;
var x = (canvas.width_.5);
var y = (canvas.height_.8);
var maxWidth=canvas.width_.70;
var text = "If you had read the meditation carefully you would not have needed to ask this question—the two forces are conservation and destruction." + '' + "-The Mother"
context.font = "20px Libre Baskerville";
context.fillStyle = 'black';
wrapText(context, text, x, y, maxWidth, lineHeight);
//Calling ends third quote

var imgURI = canvas.toDataURL();

// console.log(imgURI);

    console.log(canvas.toDataURL());


 $timeout( function(){
   var finalimage= new Image();
   finalimage.src=imgURI;
   finalimage.addEventListener('load', function() {
// image has been loaded
$scope.finalimage = imgURI;
$rootScope.$broadcast('IMG_READY');

});
}, 200);

}}
);
`

Flip Card Code

    <flippy-front>
      <div class="list card">
        <div class="item item-divider cal">
         Aspire and touch card
         </div>
         <div class="item item-body" >

      <img src="/img/cardfront.jpg" alt="the front" class="round" />



      </div>
        </div>


    </flippy-front>

    <flippy-back>
      <div class="list card">

         <div class="item item-body" >

                       <img ng-src="{{finalimage}}" style="width: 100%" class="round">


         <div class="button-bar">

        <a class="button icon ion-ios-bolt" href="#/app/opencards"></a>


      </div>
      </div>
        </div>

    </flippy-back>

  </flippy>

from angular-flippy.

a jsbin/codepen/plunkr would be way better

from angular-flippy.

Here you go
http://jsbin.com/mefamiviwe/edit?js,console,output

from angular-flippy.

but still not able to work out

elaborate?

from angular-flippy.

The above jsbin code doesn't has any issue but still the output is not coming, the canvas is loaded but now card is not flipping..

from angular-flippy.

Any luck, did you got chance to review code

from angular-flippy.

this is not how you ask for help, @artwaniparas. you either provide a working example so that people can actually see what's wrong.

that said, your finalimage doesn't correctly load, it actually errors out. probably because your canvas is wrong. if you add

finalimage.addEventListener('error', function(err) {
    console.log('errored', err);
});

you will see that it doesn't load.

from angular-flippy.

also i'm going to close this issue as it's not flippy related.

from angular-flippy.