Skip to main content
A
Arttai
Participating Frequently
February 7, 2017
Answered

Print frames in Canvas html 5.0

  • February 7, 2017
  • 2 replies
  • 4126 views

I could not find the code for it, is it possible to define a certain frame or an array of frames in Animate CC Canvas html 5.0? If so, what is the code?

Many thanks.

    This topic has been closed for replies.
    Correct answer Colin Holgate

    Many thanks. I will use it in my upcoming first Canvas/JS project. By the way, just to be sure, the code you have suggested can be used as a CreateJS action inside an animate CC frame?


    Yes, both chunks of code should work from the timeline. I just this as a test:

    this.stop();

    print_voucher();

    function print_voucher() {

      var win = window.open();

      win.document.write("<br><img src='" + canvas.toDataURL() + "'/>");

      win.print();

      //win.location.reload();

    }

    The reload line was causing the new window to try to print again. The window that it created and set the source of literally had a png in it that I could drag to my desktop.

    2 replies

    Colin Holgate
    Colin Holgate
    Inspiring
    November 29, 2020

    Years later, someone asked me about this, and I find that my code didn't work. The reason it failed is because popup blockers prevent it from working. It can work if you give the popup permission, but another solution is to make it work from a user action.

    Here is a version where a Button with a name of 'go' is used to trigger the print dialog:

     

    this.stop();
this.go.addEventListener("click", print_voucher);
//print_voucher();
function print_voucher() {
var win = window.open();
win.document.write("<br><img src='" + canvas.toDataURL() + "'/>");
win.print();
//win.location.reload();
}

     

     

      AMULI
      AMULI
      Inspiring
      February 7, 2017

      Not sure I understand what you mean by "array of frames" The different frames of an animation ?

      • It could be internal to Animate : different frames of a Graphics or Movie Clip symbol

      • It could be a spritesheet handled by EaselJS (a subset of CreateJS) +JSON metadata :

      http://createjs.com/docs/easeljs/classes/SpriteSheet.html

      A
      ArttaiAuthor
      Participating Frequently
      February 9, 2017

      I mean a number of consecutive frames in a timeline or a single frame singled out to print, just like in actionscript.

      AMULI
      AMULI
      Inspiring
      February 9, 2017

      Spritesheets are intended first for the different phases of animation, for example in the following animation the walk of the character (Grant Skinner, father of CreateJS) : http://www.createjs.com/demos/easeljs/SpriteSheet.html

      If it's what you're looking for (you do'nt explain what your code is intended to do with that array of frames ), you could google "easeljs sprite sheet tutorial" and get a number of examples to start with – though outside Animate CC, but you could adapt.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices