pimhwang
/
spreed-webrtc
mirror of https://github.com/strukturag/spreed-webrtc.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Support scaling images larger and smaller.

pull/96/head
Evan Theurer 11 years ago
parent
79b17cf0fe
commit
2a9ddd18fa
3 changed files with 74 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 31
      src/styles/components/_buddypictureupload.scss
  2. 80
      static/js/directives/buddypictureupload.js
  3. 14
      static/partials/buddypictureupload.html

31
src/styles/components/_buddypictureupload.scss
Unescape View File

@ -37,9 +37,11 @@
top: 0px; top: 0px;
left: 0px; left: 0px;
} }
.moveImage { .imageUtilites {
position: relative; line-height: 30px;
visibility:hidden; position: absolute;
visibility: hidden;
width: 200px;
z-index: 1; z-index: 1;
.fa { .fa {
cursor: pointer; cursor: pointer;
@ -47,26 +49,23 @@
text-shadow: 0 0 5px black; text-shadow: 0 0 5px black;
opacity: 0.8; opacity: 0.8;
font-size: 40px; font-size: 40px;
width: 50px;
height: 50px;
} }
} }
.showUploadPicture:hover .moveImage { .showUploadPicture:hover .imageUtilites {
visibility:visible; visibility:visible;
} }
.moveHorizontal { .moveHorizontal {
width: 200px; top: -4px;
position: absolute; position: relative;
top: -75px;
left: 0;
.fa {
width: 50px;
}
} }
.moveVertical { .moveVertical {
position: absolute; position: absolute;
top: -30px; left: 158px;
left: 174px; }
.item { .resize {
height: 50px; position: relative;
} top: 108px;
} }
} }

80
static/js/directives/buddypictureupload.js
Unescape View File

@ -122,42 +122,53 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
}; };
// Auto fit by smallest dimension // Auto fit by smallest dimension
// (image, canvas) -> object
var getAutoFitDimensions = function(from, to) { var getAutoFitDimensions = function(from, to) {
if(!from.width && !from.height && !to.width && !to.height) { if(!from.width && !from.height && !to.width && !to.height) {
return null; return null;
} }
var width = null; var width = null;
var height = null; var height = null;
var x = null;
var y = null;
var fromAspectRatio = 1;
var scaleFactorX = 1;
var scaleFactorY = 1;
if (from.width < from.height) { if (from.width < from.height) {
fromAspectRatio = from.height/from.width; height = to.width * (from.height/from.width);
scaleFactorX = to.width/from.width;
scaleFactorY = to.height/from.height;
width = to.width; width = to.width;
height = to.width * fromAspectRatio;
x = scaleFactorX * getNumFromPx(from.style.left);
y = (scaleFactorY * getNumFromPx(from.style.top)) * fromAspectRatio;
} else { } else {
fromAspectRatio = from.width/from.height;
scaleFactorX = to.width/from.width;
scaleFactorY = to.height/from.height;
width = to.height * fromAspectRatio;
height = to.height; height = to.height;
x = (scaleFactorX * getNumFromPx(from.style.left)) * fromAspectRatio; width = to.height * (from.width/from.height);
y = scaleFactorY * getNumFromPx(from.style.top); }
return{width: width, height: height};
};
// (image, canvas) -> object
var getScaledDimensions = function(from, to) {
if(!from.style.width && !from.style.height && !to.width && !to.height) {
return null;
}
var current = {
width: getNumFromPx(from.style.width),
height: getNumFromPx(from.style.height),
top: getNumFromPx(from.style.top),
left: getNumFromPx(from.style.left)
};
var scaleFactorX = previewWidth / to.width;
var scaleFactorY = previewHeight / to.height;
var width = current.width / scaleFactorX;
var height = current.height / scaleFactorY;
var x = current.left / scaleFactorX;
var y = current.top / scaleFactorY;
if(current.width < previewWidth) {
x = ((previewWidth - current.width) / scaleFactorX ) / 2;
}
if(current.height < previewHeight) {
y = ((previewHeight - current.height) / scaleFactorY ) / 2;
} }
return{width: width, height: height, x: x, y: y}; return{width: width, height: height, x: x, y: y};
}; };
var writeUploadToCanvas = function(canvas, img) { var writeUploadToCanvas = function(canvas, img) {
var dim = getAutoFitDimensions(img, canvas); var dim = getScaledDimensions(img, canvas);
canvas.getContext("2d").drawImage(img, dim.x, dim.y, dim.width, dim.height); canvas.getContext("2d").drawImage(img, dim.x, dim.y, dim.width, dim.height);
console.log('writeUploadToCanvas', dim); console.log('writeUploadToCanvas', dim);
}; };
@ -200,7 +211,15 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
var moveImageRight = function() { var moveImageRight = function() {
$scope.prevImage.style.left = incrementPx($scope.prevImage.style.left); $scope.prevImage.style.left = incrementPx($scope.prevImage.style.left);
}; };
var moveImage = function(evt) { var makeImageLarger = function() {
$scope.prevImage.style.height = incrementPx($scope.prevImage.style.height);
$scope.prevImage.style.width = incrementPx($scope.prevImage.style.width);
};
var makeImageSmaller = function() {
$scope.prevImage.style.height = decrementPx($scope.prevImage.style.height);
$scope.prevImage.style.width = decrementPx($scope.prevImage.style.width);
};
var changeImage = function(evt) {
if(evt.data.intervalNum.num || !evt.data.action) { if(evt.data.intervalNum.num || !evt.data.action) {
clearInterval(evt.data.intervalNum.num); clearInterval(evt.data.intervalNum.num);
evt.data.intervalNum.num = null; evt.data.intervalNum.num = null;
@ -211,15 +230,20 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
} }
}; };
$element.find("#arrow-up").on('mousedown', null, {intervalNum: intervalNum, action: moveImageUp}, moveImage); $element.find("#arrow-up").on('mousedown', null, {intervalNum: intervalNum, action: moveImageUp}, changeImage);
$element.find("#arrow-down").on('mousedown', null, {intervalNum: intervalNum, action: moveImageDown}, moveImage); $element.find("#arrow-down").on('mousedown', null, {intervalNum: intervalNum, action: moveImageDown}, changeImage);
$element.find("#arrow-up").on('mouseup', null, {intervalNum: intervalNum}, moveImage); $element.find("#arrow-up").on('mouseup', null, {intervalNum: intervalNum}, changeImage);
$element.find("#arrow-down").on('mouseup', null, {intervalNum: intervalNum}, moveImage); $element.find("#arrow-down").on('mouseup', null, {intervalNum: intervalNum}, changeImage);
$element.find("#arrow-left").on('mousedown', null, {intervalNum: intervalNum, action: moveImageLeft}, changeImage);
$element.find("#arrow-right").on('mousedown', null, {intervalNum: intervalNum, action: moveImageRight}, changeImage);
$element.find("#arrow-left").on('mouseup', null, {intervalNum: intervalNum}, changeImage);
$element.find("#arrow-right").on('mouseup', null, {intervalNum: intervalNum}, changeImage);
$element.find("#arrow-left").on('mousedown', null, {intervalNum: intervalNum, action: moveImageLeft}, moveImage); $element.find("#larger").on('mousedown', null, {intervalNum: intervalNum, action: makeImageLarger}, changeImage);
$element.find("#arrow-right").on('mousedown', null, {intervalNum: intervalNum, action: moveImageRight}, moveImage); $element.find("#smaller").on('mousedown', null, {intervalNum: intervalNum, action: makeImageSmaller}, changeImage);
$element.find("#arrow-left").on('mouseup', null, {intervalNum: intervalNum}, moveImage); $element.find("#larger").on('mouseup', null, {intervalNum: intervalNum}, changeImage);
$element.find("#arrow-right").on('mouseup', null, {intervalNum: intervalNum}, moveImage); $element.find("#smaller").on('mouseup', null, {intervalNum: intervalNum}, changeImage);
}; };
return { return {

14
static/partials/buddypictureupload.html
Unescape View File

@ -1,18 +1,18 @@
<div class="buddyPictureUpload collapse" collapse="!showUploadPicture"> <div class="buddyPictureUpload collapse" collapse="!showUploadPicture">
<div class="showUploadPicture"> <div class="showUploadPicture">
<canvas class="uploadPrev hidden"></canvas> <canvas class="uploadPrev hidden"></canvas>
<div class="moveImage"> <div class="imageUtilites">
<div class="moveHorizontal"> <div class="moveHorizontal">
<i id="arrow-left" class="fa fa-long-arrow-left"></i> <i id="arrow-left" class="fa fa-long-arrow-left"></i>
<i id="arrow-right" class="fa fa-long-arrow-right"></i> <i id="arrow-right" class="fa fa-long-arrow-right"></i>
</div> </div>
<div class="moveVertical"> <div class="moveVertical">
<div class="item"> <i id="arrow-up" class="fa fa-long-arrow-up"></i>
<i id="arrow-up" class="fa fa-long-arrow-up"></i> <i id="arrow-down" class="fa fa-long-arrow-down"></i>
</div> </div>
<div class="item"> <div class="resize">
<i id="arrow-down" class="fa fa-long-arrow-down"></i> <i id="larger" class="fa fa-plus"></i>
</div> <i id="smaller" class="fa fa-minus"></i>
</div> </div>
</div> </div>
<img class="preview" ng-class="{previewUpload: previewUpload}" ng-src="{{imgData}}" /> <img class="preview" ng-class="{previewUpload: previewUpload}" ng-src="{{imgData}}" />

Write Preview
Loading…
Cancel
Save