tools/promote/device-art.jd

page.title=Device Art Generator
page.image=/images/device-art-ex-crop.jpg
page.metaDescription=为了更好看的宣传图片和改善视觉语境，拖放你的应用程序的屏幕截图到真实设备的图稿。

@jd:body

<p>你可以使用 Device Art Generator 方便快捷地将应用截图嵌入到真实设备的效果图中。这样，当用户在你的网站上或其他宣传材料中看到你的应用截图时，就能更加直观地了解应用的内容环境</p>

  <p class="note"><strong>注意</strong>：请勿将此处生成的图片用作 Google Play 应用商品详情中的 1024x500 置顶大图或屏幕截图</p>


<div class="supported-browser">

<div class="layout-content-row">
  <div class="layout-content-col span-3">
    <h4>第 1 步</h4>
    <p>将屏幕截图从桌面拖动到右侧的设备上生成效果图。</p>
  </div>
  <div class="layout-content-col span-10">
    <ul class="device-list primary"></ul>
    <a href="#" id="archive-expando">旧款设备</a>
    <ul class="device-list archive"></ul>
  </div>
</div>


<div class="layout-content-row">
  <div class="layout-content-col span-3">
      <h4>第 2 步</h4>
      <p>你可以对此效果图进行优化，然后将其拖动到桌面上保存。</p>
    <p id="frame-customizations">
      <input type="checkbox" id="output-shadow" checked="checked" class="form-field-checkbutton">
      <label for="output-shadow">阴影</label><br>
      <input type="checkbox" id="output-glare" checked="checked" class="form-field-checkbutton">
      <label for="output-glare">屏幕反光</label><br><br>
      <a class="button" id="rotate-button">旋转</a>
    </p>
  </div>
  <div class="layout-content-col span-10">
    <!-- position:relative fixes an issue where dragging an image out of a inline-block container
         produced no drag feedback image in Chrome 28. -->
    <div id="output" style="position:relative">无输入图片。</div>
  </div>
</div>

</div>

<div class="unsupported-browser" style="display: none">
  <p class="warning"><strong>错误</strong>：此页面需要使用<span id="unsupported-browser-reason">特定功能</span>才能打开，但你的网络浏览器不支持这些功能。要继续，请在受支持的网络浏览器（如 <strong>Google Chrome</strong>）中打开此页面。</p>
    <a href="https://www.google.com/chrome/" class="button">下载 Google Chrome</a>
  <br><br>
</div>

<style>
  h4 {
    text-transform: uppercase;
  }

  .device-list {
    padding: 1em 0 0 0;
    margin: 0;
  }

  .device-list li {
    display: inline-block;
    vertical-align: bottom;
    margin: 0;
    margin-right: 20px;
    text-align: center;
  }

  .device-list li .thumb-container {
    display: inline-block;
  }

  .device-list li .thumb-container img {
    margin-bottom: 8px;
    opacity: 0.6;

    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
       -moz-transition:    -moz-transform 0.2s, opacity 0.2s;
            transition:         transform 0.2s, opacity 0.2s;
  }

  .device-list li.drag-hover .thumb-container img {
    opacity: 1;

    -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
            transform: scale(1.1);
  }

  .device-list li .device-details {
    font-size: 13px;
    line-height: 16px;
    color: #888;
  }

  .device-list li .device-url {
    font-weight: bold;
  }

  #archive-expando {
    display: block;
    font-size: 13px;
    font-weight: bold;
    color: #333;
    text-transform: uppercase;
    margin-top: 16px;
    padding-top: 16px;
    padding-left: 28px;
    border-top: 1px solid transparent;
    background: transparent url({@docRoot}assets/images/styles/disclosure_down.png)
                no-repeat scroll 0 8px;
    -webkit-transition: border 0.2s;
       -moz-transition: border 0.2s;
            transition: border 0.2s;
  }

  #archive-expando.expanded {
    background-image: url({@docRoot}assets/images/styles/disclosure_up.png);
    border-top: 1px solid #ccc;
  }

  .device-list.archive {
    max-height: 0;
    overflow: hidden;
    opacity: 0;

    -webkit-transition: max-height 0.2s, opacity 0.2s;
       -moz-transition: max-height 0.2s, opacity 0.2s;
            transition: max-height 0.2s, opacity 0.2s;
  }

  .device-list.archive.expanded {
    opacity: 1;
    max-height: 300px;
  }

  #output {
    color: #f44;
    font-style: italic;
  }

  #output img {
    max-height: 500px;
  }
</style>
<script>
  // Global variables
  var g_currentImage;
  var g_currentDevice;
  var g_currentObjectURL;
  var g_currentBlob;

  // Global constants
  var MSG_INVALID_INPUT_IMAGE = 'Invalid screenshot provided. Screenshots must be PNG files '
      + 'matching the target device\'s screen aspect ratio in either portrait or landscape.';
  var MSG_NO_INPUT_IMAGE = '将屏幕截图(.PNG)从桌面拖动到以上所列设备。';
  var MSG_GENERATING_IMAGE = 'Generating device art&hellip;';

  var MAX_DISPLAY_HEIGHT = 126; // XOOM, to fit into 200px wide

  // Device manifest.
  var DEVICES = [
    {
      id: 'nexus_5',
      title: 'Nexus 5',
      url: 'http://www.google.com/nexus/5/',
      physicalSize: 5,
      physicalHeight: 5.43,
      density: 'XXHDPI',
      landRes: ['shadow', 'back', 'fore'],
      landOffset: [436,306],
      portRes: ['shadow', 'back', 'fore'],
      portOffset: [304,436],
      portSize: [1080,1920],
    },
    {
      id: 'nexus_6',
      title: 'Nexus 6',
      url: 'http://www.google.com/nexus/6/',
      physicalSize: 6,
      physicalHeight: 6.27,
      density: '560DPI',
      landRes: ['shadow', 'back', 'fore'],
      landOffset: [489,327],
      portRes: ['shadow', 'back', 'fore'],
      portOffset: [327,489],
      portSize: [1440, 2560],
    },
    {
      id: 'nexus_7',
      title: 'Nexus 7',
      url: 'http://www.google.com/nexus/7/',
      physicalSize: 7,
      physicalHeight: 8,
      actualResolution: [1200,1920],
      density: 'XHDPI',
      landRes: ['shadow', 'back', 'fore'],
      landOffset: [326,245],
      portRes: ['shadow', 'back', 'fore'],
      portOffset: [244,326],
      portSize: [800,1280]
    },
    {
      id: 'nexus_9',
      title: 'Nexus 9',
      url: 'http://www.google.com/nexus/9/',
      physicalSize: 9,
      physicalHeight: 8.98,
      actualResolution: [1536,2048],
      density: 'XHDPI',
      landRes: ['shadow', 'back', 'fore'],
      landOffset: [514,350],
      portRes: ['shadow', 'back', 'fore'],
      portOffset: [348,514],
      portSize: [1536,2048],
    },
    {
      id: 'nexus_10',
      title: 'Nexus 10',
      url: 'http://www.google.com/nexus/10/',
      physicalSize: 10,
      physicalHeight: 7,
      actualResolution: [1600,2560],
      density: 'XHDPI',
      landRes: ['shadow', 'back', 'fore'],
      landOffset: [227,217],
      portRes: ['shadow', 'back', 'fore'],
      portOffset: [217,223],
      portSize: [800,1280],
      archived: true
    },
    {
      id: 'nexus_7_2012',
      title: 'Nexus 7 (2012)',
      url: 'http://www.google.com/nexus/7/',
      physicalSize: 7,
      physicalHeight: 7.81,
      density: '213dpi',
      landRes: ['shadow', 'back', 'fore'],
      landOffset: [315,270],
      portRes: ['shadow', 'back', 'fore'],
      portOffset: [264,311],
      portSize: [800,1280],
      archived: true
    },
    {
      id: 'nexus_4',
      title: 'Nexus 4',
      url: 'http://www.google.com/nexus/4/',
      physicalSize: 4.7,
      physicalHeight: 5.27,
      density: 'XHDPI',
      landRes: ['shadow', 'back', 'fore'],
      landOffset: [349,214],
      portRes: ['shadow', 'back', 'fore'],
      portOffset: [213,350],
      portSize: [768,1280],
      archived: true
    },
  ];

  DEVICES = DEVICES.sort(function(x, y) { return x.physicalSize - y.physicalSize; });

  var MAX_HEIGHT = 0;
  for (var i = 0; i < DEVICES.length; i++) {
    MAX_HEIGHT = Math.max(MAX_HEIGHT, DEVICES[i].physicalHeight);
  }

  // Setup performed once the DOM is ready.
  $(document).ready(function() {
    if (!checkBrowser()) {
      return;
    }

    polyfillCanvasToBlob();
    setupUI();

    // Set up Chrome drag-out
    $.event.props.push("dataTransfer");
    document.body.addEventListener('dragstart', function(e) {
      var target = e.target;
      if (target.classList.contains('dragout')) {
        e.dataTransfer.setData('DownloadURL', target.dataset.downloadurl);
      }
    }, false);
  });

  /**
   * Returns the device from DEVICES with the given id.
   */
  function getDeviceById(id) {
    for (var i = 0; i < DEVICES.length; i++) {
      if (DEVICES[i].id == id)
        return DEVICES[i];
    }
    return;
  }

  /**
   * Checks to make sure the browser supports this page. If not,
   * updates the UI accordingly and returns false.
   */
  function checkBrowser() {
    // Check for browser support
    var browserSupportError = null;

    // Must have <canvas>
    var elem = document.createElement('canvas');
    if (!elem.getContext || !elem.getContext('2d')) {
      browserSupportError = 'HTML5 canvas.';
    }

    // Must have FileReader
    if (!window.FileReader) {
      browserSupportError = 'desktop file access';
    }

    if (browserSupportError) {
      $('.supported-browser').hide();

      $('#unsupported-browser-reason').html(browserSupportError);
      $('.unsupported-browser').show();
      return false;
    }

    return true;
  }

  function setupUI() {
    $('#output').html(MSG_NO_INPUT_IMAGE);

    $('#frame-customizations').hide();

    $('#output-shadow, #output-glare').click(function() {
      createFrame();
    });

    // Build device list.
    $.each(DEVICES, function() {
      var resolution = this.actualResolution || this.portSize;
      var scaleFactorText = '';
      if (resolution[0] != this.portSize[0]) {
        scaleFactorText = '<br>等比例缩小至' + (100 * (this.portSize[0] / resolution[0])).toFixed(0) +
            '% 输出';
      } else {
        scaleFactorText = '<br>&nbsp;';
      }

      $('<li>')
          .append($('<div>')
              .addClass('thumb-container')
              .append($('<img>')
                  .attr('src', '../../../../../distribute/tools/promote/device-art-resources/' + this.id + '/thumb.png')
                  .attr('height',
                      Math.floor(MAX_DISPLAY_HEIGHT * this.physicalHeight / MAX_HEIGHT))))
          .append($('<div>')
              .addClass('device-details')
              .html((this.url
                  ? ('<a class="device-url" href="' + this.url + '">' + this.title + '</a>')
                  : this.title) +
                  '<br>' +  this.physicalSize + '" @ ' + this.density +
                  '<br>' + (resolution[0] + 'x' + resolution[1]) + scaleFactorText))
          .data('deviceId', this.id)
          .appendTo(this.archived ? '.device-list.archive' : '.device-list.primary');
    });

    // Set up "older devices" expando.
    $('#archive-expando').click(function() {
      if ($(this).hasClass('expanded')) {
        $(this).removeClass('expanded');
        $('.device-list.archive').removeClass('expanded');
      } else {
        $(this).addClass('expanded');
        $('.device-list.archive').addClass('expanded');
      }
      return false;
    });

    // Set up drag and drop.
    $('.device-list li')
        .live('dragover', function(evt) {
          $(this).addClass('drag-hover');
          evt.dataTransfer.dropEffect = 'link';
          evt.preventDefault();
        })
        .live('dragleave', function(evt) {
          $(this).removeClass('drag-hover');
        })
        .live('drop', function(evt) {
          $('#output').empty().html(MSG_GENERATING_IMAGE);
          $(this).removeClass('drag-hover');
          g_currentDevice = getDeviceById($(this).closest('li').data('deviceId'));
          evt.preventDefault();
          loadImageFromFileList(evt.dataTransfer.files, function(data) {
            if (data == null) {
              $('#output').html(MSG_INVALID_INPUT_IMAGE);
              return;
            }
            loadImageFromUri(data.uri, function(img) {
              g_currentFilename = data.name;
              g_currentImage = img;
              createFrame();
              // Send the event to Analytics
              ga('send', 'event', 'Distribute', 'Create Device Art', g_currentDevice.title);
            });
          });
        });

    // Set up rotate button.
    $('#rotate-button').click(function() {
      if (!g_currentImage) {
        return;
      }

      var w = g_currentImage.naturalHeight;
      var h = g_currentImage.naturalWidth;
      var canvas = $('<canvas>')
          .attr('width', w)
          .attr('height', h)
          .get(0);

      var ctx = canvas.getContext('2d');
      ctx.rotate(-Math.PI / 2);
      ctx.translate(-h, 0);
      ctx.drawImage(g_currentImage, 0, 0);

      loadImageFromUri(canvas.toDataURL('image/png'), function(img) {
        g_currentImage = img;
        createFrame();
      });
    });
  }

  /**
   * Generates the frame from the current selections (g_currentImage and g_currentDevice).
   */
  function createFrame() {
    var port;

    var aspect1 = g_currentImage.naturalWidth / g_currentImage.naturalHeight;
    var aspect2 = g_currentDevice.portSize[0] / g_currentDevice.portSize[1];

    if (aspect1 == aspect2) {
      port = true;
    } else if (aspect1 == 1 / aspect2) {
      port = false;
    } else {
      alert('The screenshot must have an aspect ratio of ' +
          aspect2.toFixed(3) + ' or ' + (1 / aspect2).toFixed(3) +
          ' (ideally ' + g_currentDevice.portSize[0] + 'x' + g_currentDevice.portSize[1] +
          ' or ' + g_currentDevice.portSize[1] + 'x' + g_currentDevice.portSize[0] + ').');
      $('#output').html(MSG_INVALID_INPUT_IMAGE);
      return;
    }

    // Load image resources
    var res = port ? g_currentDevice.portRes : g_currentDevice.landRes;
    var resList = {};
    for (var i = 0; i < res.length; i++) {
      resList[res[i]] = '../../../../../distribute/tools/promote/device-art-resources/' + g_currentDevice.id + '/' +
          (port ? 'port_' : 'land_') + res[i] + '.png'
    }

    var resourceImages = {};
    loadImageResources(resList, function(r) {
      resourceImages = r;
      continueWithResources_();
    });

    function continueWithResources_() {
      var width = resourceImages['back'].naturalWidth;
      var height = resourceImages['back'].naturalHeight;
      var offset = port ? g_currentDevice.portOffset : g_currentDevice.landOffset;
      var size = port
          ? g_currentDevice.portSize
          : [g_currentDevice.portSize[1], g_currentDevice.portSize[0]];

      var canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;

      var ctx = canvas.getContext('2d');
      if (resourceImages['shadow'] && $('#output-shadow').is(':checked')) {
        ctx.drawImage(resourceImages['shadow'], 0, 0);
      }
      ctx.drawImage(resourceImages['back'], 0, 0);
      ctx.fillStyle = '#000';
      ctx.fillRect(offset[0], offset[1], size[0], size[1]);
      ctx.drawImage(g_currentImage, offset[0], offset[1], size[0], size[1]);
      if (resourceImages['fore'] && $('#output-glare').is(':checked')) {
        ctx.drawImage(resourceImages['fore'], 0, 0);
      }

      window.URL = window.URL || window.webkitURL;
      if (canvas.toBlob && window.URL.createObjectURL) {
        if (g_currentObjectURL) {
          window.URL.revokeObjectURL(g_currentObjectURL);
          g_currentObjectURL = null;
        }
        if (g_currentBlob) {
          if (g_currentBlob.close) {
            g_currentBlob.close();
          }
          g_currentBlob = null;
        }

        canvas.toBlob(function(blob) {
          if (!blob) {
            continueWithFinalUrl_(canvas.toDataURL('image/png'));
            return;
          }
          g_currentBlob = blob;
          g_currentObjectURL = window.URL.createObjectURL(blob);
          continueWithFinalUrl_(g_currentObjectURL);
        }, 'image/png');
      } else {
        continueWithFinalUrl_(canvas.toDataURL('image/png'));
      }
    }

    function continueWithFinalUrl_(imageUrl) {
      var filename = g_currentFilename
          ? g_currentFilename.replace(/^(.+?)(\.\w+)?$/, '$1_framed.png')
          : 'framed_screenshot.png';

      var $link = $('<a>')
          .attr('download', filename)
          .attr('href', imageUrl)
          .append($('<img>')
              .addClass('dragout')
              .attr('src', imageUrl)
              .attr('draggable', true)
              .attr('data-downloadurl', ['image/png', filename, imageUrl].join(':')))
          .appendTo($('#output').empty());

      $('#frame-customizations').show();
    }
  }

  /**
   * Loads an image from a data URI. The callback will be called with the <img> once
   * it loads.
   */
  function loadImageFromUri(uri, callback) {
    callback = callback || function(){};

    var img = document.createElement('img');
    img.src = uri;
    img.onload = function() {
      callback(img);
    };
    img.onerror = function() {
      callback(null);
    }
  }

  /**
   * Loads a set of images (organized by ID). Once all images are loaded, the callback
   * is triggered with a dictionary of <img>'s, organized by ID.
   */
  function loadImageResources(images, callback) {
    var imageResources = {};

    var checkForCompletion_ = function() {
      for (var id in images) {
        if (!(id in imageResources))
          return;
      }
      (callback || function(){})(imageResources);
      callback = null;
    };

    for (var id in images) {
      var img = document.createElement('img');
      img.src = images[id];
      (function(img, id) {
        img.onload = function() {
          imageResources[id] = img;
          checkForCompletion_();
        };
        img.onerror = function() {
          imageResources[id] = null;
          checkForCompletion_();
        }
      })(img, id);
    }
  }

  /**
   * Loads the first valid image from a FileList (e.g. drag + drop source), as a data URI. This
   * method will throw an alert() in case of errors and call back with null.
   *
   * @param {FileList} fileList The FileList to load.
   * @param {Function} callback The callback to fire once image loading is done (or fails).
   * @return Returns an object containing 'uri' representing the loaded image. There will also be
   *      a 'name' field indicating the file name, if one is available.
   */
  function loadImageFromFileList(fileList, callback) {
    fileList = fileList || [];

    var file = null;
    for (var i = 0; i < fileList.length; i++) {
      if (fileList[i].type.toLowerCase().match(/^image\/(png|jpeg|jpg)/)) {
        file = fileList[i];
        break;
      }
    }

    if (!file) {
      alert('Please use a valid screenshot file (PNG or JPEG format).');
      callback(null);
      return;
    }

    var fileReader = new FileReader();

    // Closure to capture the file information.
    fileReader.onload = function(e) {
      callback({
        uri: e.target.result,
        name: file.name
      });
    };
    fileReader.onerror = function(e) {
      switch(e.target.error.code) {
        case e.target.error.NOT_FOUND_ERR:
          alert('File not found.');
          break;
        case e.target.error.NOT_READABLE_ERR:
          alert('File is not readable.');
          break;
        case e.target.error.ABORT_ERR:
          break; // noop
        default:
          alert('An error occurred reading this file.');
      }
      callback(null);
    };
    fileReader.onabort = function(e) {
      alert('File read cancelled.');
      callback(null);
    };

    fileReader.readAsDataURL(file);
  }

  /**
   * Adds a simple version of Canvas.toBlob if toBlob isn't available.
   */
  function polyfillCanvasToBlob() {
    if (!HTMLCanvasElement.prototype.toBlob && window.Blob) {
      HTMLCanvasElement.prototype.toBlob = function(callback, mimeType, quality) {
        if (typeof callback != 'function') {
          throw new TypeError('Function expected');
        }
        var dataURL = this.toDataURL(mimeType, quality);
        mimeType = dataURL.split(';')[0].split(':')[1];
        var bs = window.atob(dataURL.split(',')[1]);
        if (dataURL == 'data:,' || !bs.length) {
          callback(null);
          return;
        }
        for (var ui8arr = new Uint8Array(bs.length), i = 0; i < bs.length; ++i) {
          ui8arr[i] = bs.charCodeAt(i);
        }
        callback(new Blob([ui8arr.buffer /* req'd for Safari */ || ui8arr], {type: mimeType}));
      };
    }
  }
</script>