exif-rotate-js
Advanced tools
exif-rotate-js - npm Package Compare versions
Comparing version 0.0.7 to 0.0.8
344
lib/index.js
@@ -55,10 +55,4 @@ /******/ (function(modules) { // webpackBootstrap | ||
| var _exifJs = __webpack_require__(1); | ||
| var _set = __webpack_require__(5); | ||
| var _exifJs2 = _interopRequireDefault(_exifJs); | ||
| var _size = __webpack_require__(2); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
@@ -74,4 +68,2 @@ | ||
| value: function changeFile(elem_id) { | ||
| var _this = this; | ||
| var elem = document.getElementById(elem_id); | ||
@@ -83,3 +75,3 @@ | ||
| reader.onload = function (e) { | ||
| _this.setImage(e.target.result); | ||
| (0, _set.setImage)(e.target.result); | ||
| }; | ||
@@ -90,146 +82,2 @@ reader.readAsDataURL(e.target.files[index]); | ||
| } | ||
| /** | ||
| * @param result_reader {string} base64 の string | ||
| */ | ||
| }, { | ||
| key: 'setImage', | ||
| value: function setImage(result_reader) { | ||
| var _this2 = this; | ||
| var img = new Image(); | ||
| img.onload = function () { | ||
| var canvas = document.createElement('canvas'); | ||
| var ctx = canvas.getContext('2d'); | ||
| img.re_width = img.width; | ||
| img.re_height = img.height; | ||
| var orientation = _this2.getOrientation(img); | ||
| if (orientation === 6) { | ||
| // 縦画像だった場合スマートフォンでは幅・高さは横画像と認識されるため、 width height を手動で入れ替える必要あり | ||
| img.re_height = img.width; | ||
| img.re_width = img.height; | ||
| } | ||
| _this2.canvasResizeAndDrawImage(img, canvas, ctx); | ||
| _this2.rotateFromOrientation(orientation, img, ctx, canvas); | ||
| _this2.appendNewImage(canvas); | ||
| }; | ||
| img.src = result_reader; | ||
| } | ||
| /** | ||
| * @param img {elem} | ||
| * @param canvas {elem} | ||
| * @param ctx {canvas obj} | ||
| */ | ||
| }, { | ||
| key: 'canvasResizeAndDrawImage', | ||
| value: function canvasResizeAndDrawImage(img, canvas, ctx) { | ||
| if (img.re_width > img.re_height) { | ||
| var resize = img.re_height * (_size.max_size / img.re_width); | ||
| canvas.width = _size.max_size; | ||
| canvas.height = resize; | ||
| ctx.drawImage(img, 0, 0, _size.max_size, resize); | ||
| } else if (img.re_height > img.re_width) { | ||
| var _resize = img.re_width * (_size.max_size / img.re_height); | ||
| canvas.width = _resize; | ||
| canvas.height = _size.max_size; | ||
| ctx.drawImage(img, 0, 0, _resize, _size.max_size); | ||
| } else { | ||
| canvas.width = _size.max_size; | ||
| canvas.height = _size.max_size; | ||
| ctx.drawImage(img, 0, 0, _size.max_size, _size.max_size); | ||
| } | ||
| } | ||
| /** | ||
| * @param img {elem} | ||
| */ | ||
| }, { | ||
| key: 'getOrientation', | ||
| value: function getOrientation(img) { | ||
| var orientation = void 0; | ||
| _exifJs2.default.getData(img, function () { | ||
| orientation = _exifJs2.default.getTag(img, 'Orientation'); | ||
| }); | ||
| return orientation; | ||
| } | ||
| /** | ||
| * #container に append | ||
| * @param canvas {elem} | ||
| */ | ||
| }, { | ||
| key: 'appendNewImage', | ||
| value: function appendNewImage(canvas) { | ||
| var base_64 = canvas.toDataURL('image/jpeg'); | ||
| var new_img = new Image(); | ||
| new_img.setAttribute('src', base_64); | ||
| var container = document.getElementById('container'); | ||
| return container.appendChild(new_img); | ||
| } | ||
| /** | ||
| * for mobile | ||
| * orientation があった場合に正しい角度で見せるように canvas を使って回転させる | ||
| * @param orientation {number} | ||
| * @param img {elem} | ||
| * @param ctx {canvas obj} | ||
| * @param canvas {elem} | ||
| */ | ||
| }, { | ||
| key: 'rotateFromOrientation', | ||
| value: function rotateFromOrientation(orientation, img, ctx, canvas) { | ||
| switch (orientation) { | ||
| case 2: | ||
| // horizontal flip | ||
| ctx.translate(canvas.width, 0); | ||
| ctx.scale(-1, 1); | ||
| break; | ||
| case 3: | ||
| // 180° rotate left | ||
| ctx.translate(canvas.width, canvas.height); | ||
| ctx.rotate(Math.PI); | ||
| ctx.drawImage(img, 0, 0, canvas.width, canvas.height); | ||
| break; | ||
| case 4: | ||
| // vertical flip | ||
| ctx.translate(0, canvas.height); | ||
| ctx.scale(1, -1); | ||
| break; | ||
| case 5: | ||
| // vertical flip + 90 rotate right | ||
| ctx.rotate(0.5 * Math.PI); | ||
| ctx.scale(1, -1); | ||
| break; | ||
| case 6: | ||
| // 90° rotate right | ||
| ctx.rotate(0.5 * Math.PI); | ||
| ctx.translate(0, -canvas.height); | ||
| var img_ratio = img.re_height / img.re_width - 1; | ||
| ctx.drawImage(img, 0, canvas.width * img_ratio, canvas.height, canvas.width); | ||
| break; | ||
| case 7: | ||
| // horizontal flip + 90 rotate right | ||
| ctx.rotate(0.5 * Math.PI); | ||
| ctx.translate(canvas.width, -canvas.height); | ||
| ctx.scale(-1, 1); | ||
| break; | ||
| case 8: | ||
| // 90° rotate left | ||
| ctx.rotate(-0.5 * Math.PI); | ||
| ctx.translate(-canvas.width, 0); | ||
| ctx.drawImage(img, 0, 0, canvas.width, canvas.height); | ||
| break; | ||
| } | ||
| } | ||
| }]); | ||
@@ -1066,3 +914,191 @@ | ||
| /***/ }, | ||
| /* 3 */, | ||
| /* 4 */, | ||
| /* 5 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| 'use strict'; | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| }); | ||
| exports.appendNewImage = exports.rotateFromOrientation = exports.canvasResizeAndDrawImage = exports.getOrientation = exports.setImage = undefined; | ||
| var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); | ||
| var _size = __webpack_require__(2); | ||
| var _exifJs = __webpack_require__(1); | ||
| var _exifJs2 = _interopRequireDefault(_exifJs); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
| var Helper = function () { | ||
| function Helper() { | ||
| _classCallCheck(this, Helper); | ||
| } | ||
| _createClass(Helper, null, [{ | ||
| key: 'setImage', | ||
| /** | ||
| * @param result_reader {string} base64 の string | ||
| */ | ||
| value: function setImage(result_reader) { | ||
| var img = new Image(); | ||
| img.onload = function () { | ||
| var canvas = document.createElement('canvas'); | ||
| var ctx = canvas.getContext('2d'); | ||
| img.re_width = img.width; | ||
| img.re_height = img.height; | ||
| var orientation = getOrientation(img); | ||
| if (orientation === 6) { | ||
| // 縦画像だった場合スマートフォンでは幅・高さは横画像と認識されるため、 width height を手動で入れ替える必要あり | ||
| img.re_height = img.width; | ||
| img.re_width = img.height; | ||
| } | ||
| canvasResizeAndDrawImage(img, canvas, ctx); | ||
| rotateFromOrientation(orientation, img, ctx, canvas); | ||
| appendNewImage(canvas); | ||
| }; | ||
| img.src = result_reader; | ||
| } | ||
| /** | ||
| * @param img {elem} | ||
| * @param canvas {elem} | ||
| * @param ctx {canvas obj} | ||
| */ | ||
| }, { | ||
| key: 'canvasResizeAndDrawImage', | ||
| value: function canvasResizeAndDrawImage(img, canvas, ctx) { | ||
| if (img.re_width > img.re_height) { | ||
| var resize = img.re_height * (_size.max_size / img.re_width); | ||
| canvas.width = _size.max_size; | ||
| canvas.height = resize; | ||
| ctx.drawImage(img, 0, 0, _size.max_size, resize); | ||
| } else if (img.re_height > img.re_width) { | ||
| var _resize = img.re_width * (_size.max_size / img.re_height); | ||
| canvas.width = _resize; | ||
| canvas.height = _size.max_size; | ||
| ctx.drawImage(img, 0, 0, _resize, _size.max_size); | ||
| } else { | ||
| canvas.width = _size.max_size; | ||
| canvas.height = _size.max_size; | ||
| ctx.drawImage(img, 0, 0, _size.max_size, _size.max_size); | ||
| } | ||
| } | ||
| /** | ||
| * @param img {elem} | ||
| */ | ||
| }, { | ||
| key: 'getOrientation', | ||
| value: function getOrientation(img) { | ||
| var orientation = void 0; | ||
| _exifJs2.default.getData(img, function () { | ||
| orientation = _exifJs2.default.getTag(img, 'Orientation'); | ||
| }); | ||
| return orientation; | ||
| } | ||
| /** | ||
| * #container に append | ||
| * @param canvas {elem} | ||
| */ | ||
| }, { | ||
| key: 'appendNewImage', | ||
| value: function appendNewImage(canvas) { | ||
| var base_64 = canvas.toDataURL('image/jpeg'); | ||
| var new_img = new Image(); | ||
| new_img.setAttribute('src', base_64); | ||
| var container = document.getElementById('container'); | ||
| return container.appendChild(new_img); | ||
| } | ||
| /** | ||
| * for mobile | ||
| * orientation があった場合に正しい角度で見せるように canvas を使って回転させる | ||
| * @param orientation {number} | ||
| * @param img {elem} | ||
| * @param ctx {canvas obj} | ||
| * @param canvas {elem} | ||
| */ | ||
| }, { | ||
| key: 'rotateFromOrientation', | ||
| value: function rotateFromOrientation(orientation, img, ctx, canvas) { | ||
| switch (orientation) { | ||
| case 2: | ||
| // horizontal flip | ||
| ctx.translate(canvas.width, 0); | ||
| ctx.scale(-1, 1); | ||
| break; | ||
| case 3: | ||
| // 180° rotate left | ||
| ctx.translate(canvas.width, canvas.height); | ||
| ctx.rotate(Math.PI); | ||
| ctx.drawImage(img, 0, 0, canvas.width, canvas.height); | ||
| break; | ||
| case 4: | ||
| // vertical flip | ||
| ctx.translate(0, canvas.height); | ||
| ctx.scale(1, -1); | ||
| break; | ||
| case 5: | ||
| // vertical flip + 90 rotate right | ||
| ctx.rotate(0.5 * Math.PI); | ||
| ctx.scale(1, -1); | ||
| break; | ||
| case 6: | ||
| // 90° rotate right | ||
| ctx.rotate(0.5 * Math.PI); | ||
| ctx.translate(0, -canvas.height); | ||
| var img_ratio = img.re_height / img.re_width - 1; | ||
| ctx.drawImage(img, 0, canvas.width * img_ratio, canvas.height, canvas.width); | ||
| break; | ||
| case 7: | ||
| // horizontal flip + 90 rotate right | ||
| ctx.rotate(0.5 * Math.PI); | ||
| ctx.translate(canvas.width, -canvas.height); | ||
| ctx.scale(-1, 1); | ||
| break; | ||
| case 8: | ||
| // 90° rotate left | ||
| ctx.rotate(-0.5 * Math.PI); | ||
| ctx.translate(-canvas.width, 0); | ||
| ctx.drawImage(img, 0, 0, canvas.width, canvas.height); | ||
| break; | ||
| } | ||
| } | ||
| }]); | ||
| return Helper; | ||
| }(); | ||
| exports.default = Helper; | ||
| var setImage = Helper.setImage; | ||
| var getOrientation = Helper.getOrientation; | ||
| var canvasResizeAndDrawImage = Helper.canvasResizeAndDrawImage; | ||
| var rotateFromOrientation = Helper.rotateFromOrientation; | ||
| var appendNewImage = Helper.appendNewImage; | ||
| exports.setImage = setImage; | ||
| exports.getOrientation = getOrientation; | ||
| exports.canvasResizeAndDrawImage = canvasResizeAndDrawImage; | ||
| exports.rotateFromOrientation = rotateFromOrientation; | ||
| exports.appendNewImage = appendNewImage; | ||
| /***/ } | ||
| /******/ ]); |
| { | ||
| "name": "exif-rotate-js", | ||
| "version": "0.0.7", | ||
| "version": "0.0.8", | ||
| "description": "", | ||
| "main": "lib/index.js", | ||
| "scripts": { | ||
| "start": "webpack --watch", | ||
| "build": "webpack", | ||
| "start": "babel src --out-dir lib && webpack --watch", | ||
| "build": "babel src --out-dir lib", | ||
| "prepublish": "npm run build" | ||
@@ -10,0 +10,0 @@ }, |
@@ -5,3 +5,4 @@ module.exports = { | ||
| entry: { | ||
| bundle: './src/rotate.js', | ||
| index: './src/rotate.js', | ||
| sample: './sample.js', | ||
| }, | ||
@@ -11,3 +12,3 @@ | ||
| path: __dirname + '/lib/', | ||
| filename: 'index.js', | ||
| filename: '[name].js', | ||
| }, | ||
@@ -14,0 +15,0 @@ |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by121.03%
89014
- Number of package files
- increased by83.33%
11
- Lines of code
- increased by123.42%
2118
- Number of medium supply chain risk alerts
- decreased by-100%
0
No dependency changes