如何将php数据传递给动力学js答案

【问题标题】：How to pass php data to kinetic js如何将php数据传递给动力学js
【发布时间】：2014-07-24 18:21:03
【问题描述】：

您好，我必须动态设置画布图像下面是 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"

这是我的 main.js 代码

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

在上面的 js 代码中，我想在“图像”中传递 $image 数据，我尝试过 wp_localize_script() bt 它不起作用

【问题讨论】：

标签： javascript php canvas wordpress

【解决方案1】：

我按照教程HTML5 Canvas Image Loader Tutorial 中的代码将其应用到我的主题中，如下所示：

在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'
        )
    ));
}

将canvas div 添加到single.php：

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

对my-kinetic.js中的原始代码进行了小改编，用于从本地化对象中提取数据。从kinets.images 加载源并遍历对象数字键（而不是键名）：

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);
});

【讨论】：