javascript - 如何将php数据传递给kinetic js

Question

你好，我必须动态设置 Canvas 图像下面是 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代码中，我想在“images”中传递$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);
  });