How to pass php data to kinetic js

2 Views

Hello i have to set canvas image dynamically
Below is code for WordPress 

$image= http://captoons2.se7enmarketing.com/wp-content/uploads/2014/06/eden-apple-180x138.jpg","http://captoons2.se7enmarketing.com/wp-content/uploads/2014/06/gravesite-180x138.png"

This is my main.js code

Read More
var data = {
"images": [ "images here"
],
"captions":[    ]};

In the above js code i want to pass $image data in “images” i have tryied wp_localize_script() bt it not working

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. I followed the code from the tutorial HTML5 Canvas Image Loader Tutorial and applied it to my theme as follows:

    • Enqueue and localize in functions.php:

      add_action( 'wp_enqueue_scripts', 'load_kinetics_so_24031697' );

function load_kinetics_so_24031697() {
    $path = get_stylesheet_directory_uri() . '/js/';
    wp_register_script( 'kinetic', $path . 'kinetic-v5.1.0.min.js' );
    wp_enqueue_script( 'my-kinetic', $path . 'my-kinetic.js', array( 'kinetic' ), null, true ); // on footer, important
    wp_localize_script( 'my-kinetic', 'kinets', array( 
        'images' => array(
            'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
            'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'
        )
    ));
}

    • Add the canvas div to single.php:

      <canvas id="myCanvas" width="578" height="200"></canvas>

    • Small adaptation from the original code in my-kinetic.js to pull the data from the localized object. Load the sources from kinets.images and iterate through the object numeric keys (instead of key names):

      function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for(var src in sources) {
        numImages++;
    }
    for(var src in sources) {
        images[src] = new Image();
        images[src].onload = function() {
            if(++loadedImages >= numImages) {
                callback(images);
            }
        };
        images[src].src = sources[src];
    }
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

loadImages(kinets.images, function(images) {
    context.drawImage(images[0], 100, 30, 200, 137);
    context.drawImage(images[1], 350, 55, 93, 104);
});