README.md

## README.md

      
          Raw
        
        
              README.md
            
          
    blocks "port" https://github.com/nthitz/photozoom/

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
  <style>
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>

  <script>
    var img = new Image()
    img.onload = imageLoaded;
    img.src="https://rawgit.com/nthitz/photozoom/gh-pages/computerPhoto3.jpg"
    var canvas = document.getElementById('canvas');
    var ctxt = canvas.getContext('2d');

    window.onmousemove = mousemove;
    window.onresize = resize;

    function imageLoaded() {
      // document.body.appendChild(img);
      resize();
      d3.timer(animate);

    }
    var photoW = 1440;
    var photoH = 900;
    var aspectRatio = photoW / photoH;
    var width = window.innerWidth;
    var height = window.innerHeight;
    var easing = d3.ease('cubic-in-out')
    var frames = 50;
    var globalTicker = 0;

    var rotationAmountDegrees = 6.4;
    var rotationAmount = Math.PI * rotationAmountDegrees / 180;


    var translateXScale = d3.scale.linear()
    var translateYScale = d3.scale.linear()

    var scaleXScale = d3.scale.linear()
    var scaleYScale = d3.scale.linear()

    var rotationScale = d3.scale.linear().range([0, rotationAmount]);

    var mouse = [0,0]
    var fromMouse = false;

    var saving = false;

    function mousemove(e) {
      mouse[0] = e.clientX;
      mouse[1] = e.clientY;
    }
    function resize() {
      width = window.innerWidth;
      height = window.innerHeight;
      var curAspect = width / height;
      if(curAspect > aspectRatio) {
        //fit to height
        width = aspectRatio * height;
      } else if(curAspect < aspectRatio) {
        //fit to width
        height = 1 / aspectRatio  * width;
      }
      canvas.width = width;
      canvas.height = height;

      // set scales

      var zoomedInWidth = width * 0.456;
      var zoomedInHeight = height* 0.46;
      // var zoomedInHeight = 1 / aspectRatio* zoomedInWidth;

      var translateX = width * 0.36;
      var translateY = height * 0.21

      var zoomInAmountX = width / zoomedInWidth;
      var zoomInAmountY = height / zoomedInHeight;

      var translateXAmount = zoomInAmountX * translateX;
      var translateYAmount = zoomInAmountY * translateY;

      translateXScale.range([0, -translateXAmount])
      translateYScale.range([0, -translateYAmount])

      scaleXScale.range([1, zoomInAmountX])
      scaleYScale.range([1, zoomInAmountY])


    }
    function animate() {
      ctxt.clearRect(0,0, width, height);
      ctxt.globalCompositeOperation = "multiply"
      var globalPct = globalTicker / frames;
      if(fromMouse) {
        globalPct = mouse[0] / (window.outerWidth - 100);
        while(globalPct > 1) { globalPct -= 1}
      }
      globalPct = easing(globalPct)
      var ticker = globalPct * frames;
      var iterations = 8
      for(var i = 0; i < iterations; i++) {
        ctxt.save();
        var pct = (ticker + ((i - ~~(iterations / 2)) * 1.5)) / frames;
        while(pct > 1) { pct -= 1}
        while(pct < 0) { pct += 1}
        ctxt.globalAlpha = 0.2
        ctxt.translate(
          translateXScale(pct), translateYScale(pct)
        )
        ctxt.scale(scaleXScale(pct), scaleYScale(pct))
        ctxt.translate(width/2, height/2)
        ctxt.rotate(rotationScale(pct))
        ctxt.drawImage(img, -width/2,-height/2, width, height);


        ctxt.restore();
      }

      globalTicker += 1;
      if(globalTicker > frames) {
        globalTicker = 0;
      }
      if(saving) {
        saveFrame();
        if(globalPct >= 1) {
          d3.select('canvas').remove();
          d3.select('body,html').style('overflow', 'auto')
          return true;
        }
        return false;
      }
    }

    function saveFrame() {
      d3.select('body').append('a')
        .attr('title', globalTicker)
        .attr('download', globalTicker)
        .attr('href', canvas.toDataURL('image/jpeg', 1.0))
        .text(globalTicker)
        .style({
          color: 'white',
          "font-size": "20px",
          "margin": "1em",
          "display": "block"
        })
    }
  </script>
</body>