specify size on image download

This commit is contained in:
Emi Matchu 2012-01-13 19:37:56 -06:00
parent 4566bca906
commit 686d6560c4
5 changed files with 4034 additions and 688 deletions

View file

@ -230,8 +230,15 @@ body.outfits-edit
border-top: 0
#preview-download-image
display: none
font-size: 85%
margin: 0 auto
margin: 1em auto
h3
font-size: 125%
margin-bottom: .5em
ul
list-style: none
button
font-size: 75%
width: 100%
#preview-mode-note, #report-broken-image
display: block
font-size: 75%

View file

@ -42,11 +42,19 @@
- if can_use_image_mode?
%li#preview-mode-image Image
- if can_use_image_mode?
%button#preview-download-image Download
= link_to 'Image mode FAQ', image_mode_path,
:id => 'preview-mode-note', :target => '_blank'
= link_to 'Broken image?', '#', :id => 'report-broken-image',
:target => '_blank', 'data-base-url' => new_broken_image_report_path
#preview-download-image
%h3 Download
%ul
%li
%button{'data-download-size' => 'small'} Small
%li
%button{'data-download-size' => 'medium'} Medium
%li
%button{'data-download-size' => 'large'} Large
- else
= link_to(donate_path, :id => 'preview-mode-note', :target => '_blank') do
%strong Image mode

View file

@ -851,8 +851,15 @@ View.PreviewAdapterForm = function (wardrobe) {
activate(imageToggle, 'image', 'flash');
}
$('#preview-download-image').click(function () {
preview.adapter.saveImage();
var DOWNLOAD_SIZES = {
'small': [150, 150],
'medium': [300, 300],
'large': [600, 600]
};
$('#preview-download-image button').click(function () {
var size = DOWNLOAD_SIZES[this.getAttribute('data-download-size')];
preview.adapter.saveImage(size);
});
if(document.createElement('canvas').getContext) {

View file

@ -1285,7 +1285,7 @@ Wardrobe.getStandardView = function (options) {
).appendTo(document.body);
}
this.saveImage = function () {
this.saveImage = function (size) {
/*
Since browser security policy denies access to canvas image data
if we include assets from other domains, and our assets are on S3,
@ -1298,15 +1298,21 @@ Wardrobe.getStandardView = function (options) {
It then prompts the user to download a WIDTHxHEIGHT image of the
IMAGEURLs layered in order.
*/
var size = bestSize();
var url = Wardrobe.IMAGE_CONFIG.base_url + "preview_export.html?" +
size[0] + "," + size[1];
previewImageContainer.children('img').each(function () {
url += "," + encodeURIComponent(this.src);
size[0] + "," + size[1];
// Get a copy of the visible assets, then sort them in ascending zone
// order.
var assets = wardrobe.outfit.getVisibleAssets().slice(0);
assets.sort(function (a, b) {
return a.zone_id - b.zone_id;
});
for(var i = 0; i < assets.length; i++) {
url += "," + encodeURIComponent(assets[i].imageURL(size));
}
exportIframe.attr('src', url);
}

File diff suppressed because it is too large Load diff