Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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(/images/styles/disclosure_down.png)
no-repeat scroll 0 8px;
}
#archive-expando.expanded {
background-image: url(/images/styles/disclosure_up.png);
border-top: 1px solid #ccc;
}
.device-list.archive {
max-height: 0;
overflow: hidden;
opacity: 0;
}
.device-list.archive.expanded {
opacity: 1;
max-height: 800px;
}
#output {
color: #f44;
font-style: italic;
position: relative;
}
#output img {
max-height: 500px;
}
.device-art-generator-messages {
display: none;
}
devsite.framebox.AutoSizeClient.updateSize();
// Global variables.
var g_currentImage;
var g_currentDevice;
var g_currentObjectURL;
var g_currentBlob;
// Global constants.
var MSG_INVALID_INPUT_IMAGE = 'invalidInputImg';
var MSG_INVALID_WEAR_IMAGE = 'invalidWearImg';
var MSG_NO_INPUT_IMAGE = 'noInputImg';
var MSG_GENERATING_IMAGE = 'generatingImage';
const PLEASE_USE_VALID = 'pleaseUseValid';
const SIZE_OUTPUT = 'sizeOutput';
const ASPECT_RATIO = 'aspectRatio';
const OR_MSG = 'or';
const IDEALLY = 'ideally';
var MAX_DISPLAY_HEIGHT = 126; // XOOM, to fit into 200px wide
// Get messages from markup:
const messageAttributes = {
[MSG_INVALID_INPUT_IMAGE]: 'msg-invalid-input-img',
[MSG_INVALID_WEAR_IMAGE]: 'msg-invalid-wear-img',
[MSG_NO_INPUT_IMAGE]: 'msg-no-input-img',
[MSG_GENERATING_IMAGE]: 'msg-generating-img',
[PLEASE_USE_VALID]: 'msg-use-valid-img',
[SIZE_OUTPUT]: 'msg-size-output',
[ASPECT_RATIO]: 'msg-aspect-ratio',
[OR_MSG]: 'msg-or',
[IDEALLY]: 'msg-ideally'
};
// Messages used for storing strings from the html markup.
let messages = {};
// Device manifest.
var DEVICES = [
{
archived: true,
density: '420DPI',
id: 'nexus_5x',
landOffset: [485,313],
landRes: ['shadow', 'back', 'fore'],
physicalHeight: 5.625,
physicalSize: 5.2,
portOffset: [305,485],
portRes: ['shadow', 'back', 'fore'],
portSize: [1080,1920],
title: 'Nexus 5X',
url: 'https://www.google.com/nexus/5x/',
},
{
density: '560DPI',
hidden: true,
id: 'nexus_6',
landOffset: [489,327],
landRes: ['shadow', 'back', 'fore'],
physicalHeight: 6.27,
physicalSize: 6,
portOffset: [327,489],
portRes: ['shadow', 'back', 'fore'],
portSize: [1440, 2560],
title: 'Nexus 6',
url: 'https://www.google.com/nexus/6/'
},
{
archived: true,
density: '560DPI',
id: 'nexus_6p',
landOffset: [579,321],
landRes: ['shadow', 'back', 'fore'],
physicalHeight: 6.125,
physicalSize: 5.7,
portOffset: [312,579],
portRes: ['shadow', 'back', 'fore'],
portSize: [1440, 2560],
title: 'Nexus 6P',
url: 'https://www.google.com/nexus/6p/',
},
{
actualResolution: [1536,2048],
archived: true,
density: '288DPI',
id: 'nexus_9',
landOffset: [514,350],
landRes: ['shadow', 'back', 'fore'],
physicalHeight: 8.98,
physicalSize: 9,
portOffset: [348,514],
portRes: ['shadow', 'back', 'fore'],
portSize: [1536,2048],
title: 'Nexus 9',
url: 'https://www.google.com/nexus/9/'
},
{
archived: true,
density: '441DPI',
id: 'pixel',
landOffset: [541,327],
landRes: ['shadow', 'back', 'fore'],
physicalHeight: 5.6,
physicalSize: 5,
portOffset: [315,541],
portRes: ['shadow', 'back', 'fore'],
portSize: [1080, 1920],
title: 'Pixel',
url: 'https://store.google.com/product/pixel_phone'
},
{
archived: true,
density: '534DPI',
id: 'pixel_xl',
landOffset: [581,348],
landRes: ['shadow', 'back', 'fore'],
physicalHeight: 6.0,
physicalSize: 5.5,
portOffset: [337,581],
portRes: ['shadow', 'back', 'fore'],
portSize: [1440, 2560],
title: 'Pixel XL',
url: 'https://store.google.com/product/pixel_phone'
},
{
archived: true,
density: '441DPI',
id: 'pixel_2',
landOffset: [350, 71],
landRes: ['shadow', 'back', 'fore'],
physicalHeight: 5.7,
physicalSize: 5,
portOffset: [139, 296],
portRes: ['shadow', 'back', 'fore'],
portSize: [1080, 1920],
title: 'Pixel 2',
url: 'https://store.google.com/product/pixel_2'
},
{
archived: true,
density: '538DPI',
id: 'pixel_2_xl',
landOffset: [301, 97],
landRes: ['shadow', 'back', 'fore'],
physicalHeight: 6.2,
physicalSize: 6,
portCornerRadius: 80,
portOffset: [202, 225],
portRes: ['shadow', 'back', 'fore'],
portSize: [1440, 2880],
title: 'Pixel 2 XL',
url: 'https://store.google.com/product/pixel_2'
},
{
density: 'HDPI',
hidden: true,
id: 'wear_square',
physicalHeight: 1.8,
physicalSize: 1.8,
landOffset: [225,206],
landRes: ['back'],
portOffset: [200,214],
portRes: ['back'],
portSize: [320,320],
title: 'Wear OS (square)',
url: 'https://www.android.com/wear/'
},
{
density: 'HDPI',
hidden: true,
id: 'wear_round',
landOffset: [161,167],
landRes: ['back'],
physicalHeight: 1.8,
physicalSize: 1.8,
portCornerRadius: 160,
portOffset: [128,134],
portRes: ['back'],
portSize: [320,320],
title: 'Wear OS (round)',
url: 'https://www.android.com/wear/'
},
{
archived: true,
density: '443DPI',
id: 'pixel_3',
landOffset: [226,98],
landRes: ['shadow', 'back', 'fore'],
physicalHeight: 5.7,
physicalSize: 5.5,
portOffset: [156,184],
portRes: ['shadow', 'back', 'fore'],
portSize: [1080, 2160],
title: 'Pixel 3',
url: 'https://store.google.com/product/pixel_3',
notch: true
},
{
archived: true,
density: '523DPI',
id: 'pixel_3_xl',
landOffset: [208,100],
landRes: ['shadow', 'back', 'fore'],
physicalHeight: 6.2,
physicalSize: 6.3,
portOffset: [216,216],
portRes: ['shadow', 'back', 'fore'],
portSize: [1440, 2960],
title: 'Pixel 3 XL',
url: 'https://store.google.com/product/pixel_3',
notch: true
},
{
archived: true,
density: '441DPI',
id: 'pixel_3a',
landOffset: [210,94],
landRes: ['shadow', 'back', 'fore'],
physicalHeight: 6,
physicalSize: 5.6,
portOffset: [160,160],
portRes: ['shadow', 'back', 'fore'],
portSize: [1080, 2220],
title: 'Pixel 3a',
url: 'https://store.google.com/product/pixel_3a',
notch: true
},
{
archived: true,
density: '402DPI',
id: 'pixel_3a_xl',
landOffset: [210,94],
landRes: ['shadow', 'back', 'fore'],
physicalHeight: 6.3,
physicalSize: 6,
portOffset: [160,160],
portRes: ['shadow', 'back', 'fore'],
portSize: [1080, 2160],
title: 'Pixel 3a XL',
url: 'https://store.google.com/product/pixel_3a',
notch: true
},
{
archived: true,
density: '444DPI',
id: 'pixel_4',
landOffset: [214,94],
landRes: ['shadow', 'back', 'fore'],
physicalHeight: 5.8,
physicalSize: 5.7,
portOffset: [132,160],
portRes: ['shadow', 'back', 'fore'],
portSize: [1080, 2280],
title: 'Pixel 4',
url: 'https://store.google.com/product/pixel_4',
notch: true
},
{
archived: true,
density: '537DPI',
id: 'pixel_4_xl',
landOffset: [252,100],
landRes: ['shadow', 'back', 'fore'],
physicalHeight: 6.3,
physicalSize: 6.3,
portOffset: [180,212],
portRes: ['shadow', 'back', 'fore'],
portSize: [1440, 3040],
title: 'Pixel 4 XL',
url: 'https://store.google.com/product/pixel_4',
notch: true
},
{
density: '433DPI',
id: 'pixel_4a',
landOffset: [140,96],
landRes: ['shadow', 'back', 'fore'],
physicalHeight: 6,
physicalSize: 6.2,
portOffset: [140,92],
portRes: ['shadow', 'back', 'fore'],
portSize: [1080, 2340],
title: 'Pixel 4a',
url: 'https://store.google.com/product/pixel_4a',
notch: true
},
{
density: '432DPI',
id: 'pixel_5',
landOffset: [142,84],
landRes: ['shadow', 'back', 'fore'],
physicalHeight: 5.7,
physicalSize: 6,
portOffset: [140,84],
portRes: ['shadow', 'back', 'fore'],
portSize: [1080, 2340],
title: 'Pixel 5',
url: 'https://store.google.com/product/pixel_5',
notch: true
},
{
archived: true,
density: '235DPI',
id: 'pixelbook',
landOffset: [519,200],
landRes: ['shadow', 'back', 'fore'],
physicalHeight: 8.7,
physicalSize: 12.3,
portOffset: [380,156],
portRes: ['shadow', 'back', 'fore'],
portSize: [1600, 2400],
title: 'Pixelbook',
url: 'https://store.google.com/product/google_pixelbook'
},
{
density: '166DPI',
id: 'pixelbook_go',
landOffset: [134,158],
landRes: ['shadow', 'back', 'fore'],
physicalHeight: 8.1,
physicalSize: 13.3,
portOffset: [158,128],
portRes: ['shadow', 'back', 'fore'],
portSize: [1080, 1920],
title: 'Pixelbook Go',
url: 'https://store.google.com/product/pixelbook_go',
notch: true
},
{
density: 'HDPI',
id: 'wear',
landOffset: [225,206],
landRes: ['back'],
physicalHeight: 1.8,
physicalSize: 1.8,
portOffset: [200,214],
portRes: ['back'],
portSize: [320,320],
title: 'Wear OS by Google',
url: 'https://www.android.com/wear/'
},
];
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.addEventListener('DOMContentLoaded', function() {
if (!checkBrowser()) {
return;
}
getTextContent();
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);
});
/**
* Grabs the text content from a ul that contains error messages that will
* be displayed to the user. The text and markup is put into a messages object
* that is referenced in this file.
*/
const getTextContent = () => {
Object.keys(messageAttributes).forEach((key, index) => {
messages[key] = document.querySelectorAll(`[${messageAttributes[key]}]`)[0].innerHTML;
});
};
/**
* 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) {
var supportedBrowserEl = document.querySelector('.supported-browser');
var unsupportedBrowserEl = document.querySelector('.unsupported-browser');
var unsupportedBrowserReasonEl =
document.querySelector('#unsupported-browser-reason');
supportedBrowserEl.style.display = 'none';
unsupportedBrowserReasonEl.innerHTML = browserSupportError;
unsupportedBrowserEl.style.display = 'block';
return false;
}
return true;
}
function setupUI() {
var outputEl = document.querySelector('#output');
outputEl.innerHTML = messages[MSG_NO_INPUT_IMAGE];
var frameCustomizationsEl = document.querySelector('#frame-customizations');
frameCustomizationsEl.style.display = 'none';
var wearCustomizationsEl = document.querySelector('#wear-customizations');
wearCustomizationsEl.style.display = 'none';
var outputShadowEl = document.querySelector('#output-shadow');
var outputGlareEl = document.querySelector('#output-glare');
outputShadowEl.addEventListener('click', createFrame);
outputGlareEl.addEventListener('click', createFrame);
var outputWearInputEl = document.querySelector('input[name="output-wear"]');
outputWearInputEl.addEventListener('change', createFrame);
// Build device list.
DEVICES.forEach(function(device) {
// Don't render device element if it's hidden.
if (device.hidden) {
return;
}
var resolution = device.actualResolution || device.portSize;
var scaleFactorText = '';
var deviceList = '.device-list.primary';
if (resolution[0] != device.portSize[0]) {
scaleFactorText = '<br>' +
(100 * (device.portSize[0] / resolution[0])).toFixed(0) +
'% ' + messages[SIZE_OUTPUT];
} else {
scaleFactorText = '<br>&nbsp;';
}
if (device.archived) {
deviceList = '.device-list.archive';
}
var deviceListEl = document.querySelector(deviceList);
var thumbEl = document.createElement('img');
thumbEl.src = 'device-art-resources/' + device.id + '/thumb.png';
thumbEl.style.height = Math.floor(MAX_DISPLAY_HEIGHT * device.physicalHeight / MAX_HEIGHT) + 'px';
var thumbContainerEl = document.createElement('div');
thumbContainerEl.classList.add('thumb-container');
thumbContainerEl.appendChild(thumbEl);
var deviceDetailsLinkEl = document.createElement('a');
deviceDetailsLinkEl.classList.add('device-url');
deviceDetailsLinkEl.href = device.url;
deviceDetailsLinkEl.target = '_blank';
deviceDetailsLinkEl.textContent = device.title;
var deviceDetailsEl = document.createElement('div');
deviceDetailsEl.classList.add('device-details');
deviceDetailsEl.appendChild(deviceDetailsLinkEl);
deviceDetailsEl.innerHTML += '<br>' + device.physicalSize + '" @ ' +
device.density + '<br>' + (resolution[0] + 'x' + resolution[1]) +
scaleFactorText;
var listEl = document.createElement('li');
listEl.dataset.deviceId = device.id;
listEl.appendChild(thumbContainerEl);
listEl.appendChild(deviceDetailsEl);
deviceListEl.appendChild(listEl);
});
// Set up "older devices" expando.
var archiveExpandoEl = document.querySelector('#archive-expando');
var deviceListArchiveEl = document.querySelector('.device-list.archive');
archiveExpandoEl.addEventListener('click', function() {
if (archiveExpandoEl.classList.contains('expanded')) {
archiveExpandoEl.classList.remove('expanded');
deviceListArchiveEl.classList.remove('expanded');
} else {
archiveExpandoEl.classList.add('expanded');
deviceListArchiveEl.classList.add('expanded');
}
devsite.framebox.AutoSizeClient.updateSize();
return false;
});
// Set up drag and drop.
var deviceListItemEls = document.querySelectorAll('.device-list li');
deviceListItemEls.forEach(function(deviceListItemEl) {
deviceListItemEl.addEventListener('dragover', function(e) {
deviceListItemEl.classList.add('drag-hover');
e.dataTransfer.dropEffect = 'link';
e.preventDefault();
});
deviceListItemEl.addEventListener('dragleave', function(e) {
deviceListItemEl.classList.remove('drag-hover');
});
deviceListItemEl.addEventListener('drop', function(e) {
var outputEl = document.querySelector('#output');
outputEl.innerHTML = messages[MSG_GENERATING_IMAGE];
deviceListItemEl.classList.remove('drag-hover');
g_currentDevice = getDeviceById(deviceListItemEl.dataset.deviceId);
e.preventDefault();
loadImageFromFileList(e.dataTransfer.files, function(data) {
if (data == null) {
if (g_currentDevice.id == 'wear') {
outputEl.innerHTML = messages[MSG_INVALID_WEAR_IMAGE];
}else {
outputEl.innerHTML = messages[MSG_INVALID_INPUT_IMAGE];
}
return;
}
loadImageFromUri(data.uri, function(img) {
g_currentFilename = data.name;
g_currentImage = img;
createFrame();
// Send the event to Analytics
if (devsite && devsite.analytics) {
devsite.analytics.trackAnalyticsEvent('Distribute', 'Create Device Art', g_currentDevice.title);
} else {
document.body.dispatchEvent(new CustomEvent('devsite-analytics-observation', {
detail: {'category': 'Distribute', 'action': 'Create Device Art', 'label': g_currentDevice.title },
bubbles: true,
}));
}
});
});
});
});
// Set up rotate button.
var rotateButtonEl = document.querySelector('#rotate-button');
rotateButtonEl.addEventListener('click', function() {
if (!g_currentImage) {
return;
}
var w = g_currentImage.naturalHeight;
var h = g_currentImage.naturalWidth;
var canvasEl = document.createElement('canvas');
canvasEl.width = w;
canvasEl.height = h;
var ctx = canvasEl.getContext('2d');
ctx.rotate(-Math.PI / 2);
ctx.translate(-h, 0);
ctx.drawImage(g_currentImage, 0, 0);
loadImageFromUri(canvasEl.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 outputEl = document.querySelector('#output');
var outputShadowEl = document.querySelector('#output-shadow');
var outputGlareEl = document.querySelector('#output-glare');
if (g_currentDevice.id == 'wear' || g_currentDevice.id == 'wear_square' || g_currentDevice.id == 'wear_round') {
if (outputShadowEl.checked) {
g_currentDevice = getDeviceById('wear_square');
} else {
g_currentDevice = getDeviceById('wear_round');
}
}
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 {
if (g_currentDevice.id == 'wear_square' || g_currentDevice.id == 'wear_round') {
alert(messages[ASPECT_RATIO] + ' ' + aspect2.toFixed(3) + ' (' +
messages[IDEALLY] + g_currentDevice.portSize[0] + ' x ' +
g_currentDevice.portSize[1] + ').');
outputEl.innerHTML = messages[MSG_INVALID_WEAR_IMAGE];
} else {
alert(messages[ASPECT_RATIO] + ' ' + aspect2.toFixed(3) + ' ' +
messages[OR_MSG] + ' ' + (1 / aspect2).toFixed(3) + ' (' +
messages[IDEALLY] + ' ' + g_currentDevice.portSize[0] + ' x ' +
g_currentDevice.portSize[1] + ').');
outputEl.innerHTML = messages[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]] = '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 radius = g_currentDevice.portCornerRadius || 0;
var x = 0;
var y = 0;
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
if (resourceImages['shadow'] && outputShadowEl.checked) {
ctx.drawImage(resourceImages['shadow'], 0, 0);
}
ctx.drawImage(resourceImages['back'], 0, 0);
var scratchCanvas = document.createElement('canvas');
scratchCanvas.width = width;
scratchCanvas.height = height;
var scratchCtx = scratchCanvas.getContext('2d');
// draw screen: assume all are rounded rectangles
// (square corners have radius=0, circles have radius=width/2)
scratchCtx.clearRect(offset[0], offset[1],
scratchCanvas.width, scratchCanvas.height);
scratchCtx.globalCompositeOperation = 'source-over'; //default
scratchCtx.drawImage(g_currentImage, offset[0], offset[1],
size[0], size[1]);
scratchCtx.fillStyle = '#fff'; // full opacity
scratchCtx.globalCompositeOperation = 'destination-in';
scratchCtx.beginPath();
// top left corner
scratchCtx.arc(offset[0] + radius, offset[1] + radius,
radius, Math.PI, Math.PI * 1.5, false);
// top edge
scratchCtx.lineTo(offset[0] + size[0] - radius, offset[1]);
// top right corner
scratchCtx.arc(offset[0] + size[0] - radius, offset[1] + radius, radius,
Math.PI * 1.5, Math.PI * 2, false);
// right edge
scratchCtx.lineTo(offset[0] + size[0], offset[1] + size[1] - radius);
// bottom right corner
scratchCtx.arc(offset[0] + size[0] - radius, offset[1] + size[1] - radius,
radius, 0, Math.PI * .5, false);
// bottom edge
scratchCtx.lineTo(offset[0] + radius, offset[1] + size[1]);
// bottom left corner
scratchCtx.arc(offset[0] + radius, offset[1] + size[1] - radius, radius,
Math.PI * .5, Math.PI, false);
// left edge
scratchCtx.lineTo(offset[0], offset[1] + radius);
scratchCtx.closePath();
scratchCtx.fill();
// After tinkering with the offset, the 1 in the x-position drew the image
// perfectly
ctx.drawImage(scratchCanvas, 1, 0);
if (g_currentDevice.notch) {
ctx.drawImage(resourceImages['back'], 0, 0);
}
if (resourceImages['fore'] && outputGlareEl.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 linkImageEl = document.createElement('img');
linkImageEl.classList.add('dragout');
linkImageEl.src = imageUrl;
linkImageEl.draggable = true;
linkImageEl.dataset.downloadurl = ['image/png', filename, imageUrl].join(':');
var linkEl = document.createElement('a');
linkEl.download = filename;
linkEl.href = imageUrl;
linkEl.appendChild(linkImageEl);
outputEl.innerHTML = '';
outputEl.appendChild(linkEl);
var wearCustomizationsEl = document.querySelector('#wear-customizations');
var frameCustomizationsEl = document.querySelector('#frame-customizations');
if (g_currentDevice.id == 'wear' || g_currentDevice.id == 'wear_round' || g_currentDevice.id == 'wear_square') {
wearCustomizationsEl.style.display = 'block';
frameCustomizationsEl.style.display = 'none';
} else {
frameCustomizationsEl.style.display = 'block';
wearCustomizationsEl.style.display = 'none';
}
}
}
/**
* 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(messages[PLEASE_USE_VALID]);
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}));
};
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment