javascript - Tumblr API Jquery 加载图片

Question

我想使用带有 JS 的 tumblr API 通过鼠标移动将最新发布的图像绘制到博客。

我已经成功地绘制了 HTML 图像链接，但需要一些帮助来实现 API 图像。我制作了一个 JSfiddle - 我希望用 API 加载的图像替换两个树图像，目的是让所有 API 图像 (20) 都可以通过鼠标移动进行绘制。在小提琴中，我已将 API 图像加载到页面上以检查它们是否被正确接收。

https://jsfiddle.net/Hevering123/xpvt214o/721906/

// Tumblr API load -
$.ajax({
    url: "https://api.tumblr.com/v2/blog/typophile.tumblr.com/posts?api_key=sNCvOfqUTzUJzBOViCbYfkaGeQaFAS4Q4XNtHMu8YPo6No3OiY",
    dataType: 'jsonp',
    success: function(posts){
      var postings = posts.response.posts;
      var text = '';
      for (var i in postings) {
        var p = postings[i]; 
        var type = p.type; 
        if(type == 'photo'){
            text += '<li><a href='+p.post_url+' target="_blank"><img src=' + p.photos[0].original_size.url +'></a></li>';
        }else if(type == 'text'){
                text += '<li>' +p.body+ '</li>';
        }else{ 
            text += '<li>Some other post type<li>'; 
        }
        console.log(type);
      }
      $('ul').append(text);
    }
});

下面是绘制图片的JS

// draw image function
function resizeCanvas() {
    canvas.width = window.innerWidth,
    canvas.height = window.innerHeight,
    drawStuff()
}
function drawStuff() {
    function e() {
        new Date - a < p ? setTimeout(e, p) : (g = !1,
        context.clearRect(0, 0, canvas.width, canvas.height))
    }
// It's the below code specifically that I'm completely stuck with, how do I replace the local img pngs with the correct JS to call in the API tumblr images
    var i = ["https://www.fast-growing-trees.com/images/P/Sawtooth-Oak_450_a.jpg", "https://cdn.allbirds.com/image/fetch/q_auto,f_auto/q_auto,f_auto,b_rgb:fff,w_500/https://cdn.shopify.com/s/files/1/1104/4168/files/PDP_Plant_1_1.png%3Fv%3D1520805044" ] 
      , t = {
        x: 0,
        y: 0
    }
      , n = 80
      , _ = 0;
    isMobile && (n = 1);
    var a, g = !1, p = 2500;
    jQuery("#bg-canvas").on("mousemove touchend", function(s) {
        if (jQuery(".move").hide(),
        a = new Date,
        g === !1 && (g = !0,
        setTimeout(e, p)),
        s.pageX - t.x > n || s.pageX - t.x < -n || s.pageY - t.y > n || s.pageY - t.y < -n) {
            t.x = s.pageX,
            t.y = s.pageY;
            var o = new Image;
            o.onload = function() {
                var e = .5 * this.width
                  , i = .5 * this.height;
                context.drawImage(o, s.pageX - e, s.pageY - i)
            }
            ,
            _ < i.length - 1 ? (_++,
            o.src = i[_]) : (_ = 0,
            o.src = i[_])
        }
    }),
    jQuery("header p")({
    })
}
var MD = [].join("\n");
console.log(MD, "color: white; background-color: black;");
var isMobile = !1;
"ontouchstart"in document.documentElement && (jQuery(".move").text("tap"),
isMobile = !0);
var canvas = document.getElementById("bg-canvas")
  , context = canvas.getContext("2d");
window.addEventListener("resize", resizeCanvas, !1),
resizeCanvas();

非常感谢任何帮助！

标签： javascriptjquerydrawtumblrapi-design