Question

您好我必须动态设置画布图像下面是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（）但它没有工作

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

如何将php数据传递给kinetic js

1 个答案: