Otaku-Projects /
AngularJS-CRUD-PHP
| @@ 2129-2269 (lines=141) @@ | ||
| 2126 | } |
|
| 2127 | ]); |
|
| 2128 | ||
| 2129 | ngFileUpload.service('UploadResize', ['UploadValidate', '$q', function (UploadValidate, $q) { |
|
| 2130 | var upload = UploadValidate; |
|
| 2131 | ||
| 2132 | /** |
|
| 2133 | * Conserve aspect ratio of the original region. Useful when shrinking/enlarging |
|
| 2134 | * images to fit into a certain area. |
|
| 2135 | * Source: http://stackoverflow.com/a/14731922 |
|
| 2136 | * |
|
| 2137 | * @param {Number} srcWidth Source area width |
|
| 2138 | * @param {Number} srcHeight Source area height |
|
| 2139 | * @param {Number} maxWidth Nestable area maximum available width |
|
| 2140 | * @param {Number} maxHeight Nestable area maximum available height |
|
| 2141 | * @return {Object} { width, height } |
|
| 2142 | */ |
|
| 2143 | var calculateAspectRatioFit = function (srcWidth, srcHeight, maxWidth, maxHeight, centerCrop) { |
|
| 2144 | var ratio = centerCrop ? Math.max(maxWidth / srcWidth, maxHeight / srcHeight) : |
|
| 2145 | Math.min(maxWidth / srcWidth, maxHeight / srcHeight); |
|
| 2146 | return { |
|
| 2147 | width: srcWidth * ratio, height: srcHeight * ratio, |
|
| 2148 | marginX: srcWidth * ratio - maxWidth, marginY: srcHeight * ratio - maxHeight |
|
| 2149 | }; |
|
| 2150 | }; |
|
| 2151 | ||
| 2152 | // Extracted from https://github.com/romelgomez/angular-firebase-image-upload/blob/master/app/scripts/fileUpload.js#L89 |
|
| 2153 | var resize = function (imagen, width, height, quality, type, ratio, centerCrop, resizeIf) { |
|
| 2154 | var deferred = $q.defer(); |
|
| 2155 | var canvasElement = document.createElement('canvas'); |
|
| 2156 | var imageElement = document.createElement('img'); |
|
| 2157 | imageElement.setAttribute('style', 'visibility:hidden;position:fixed;z-index:-100000'); |
|
| 2158 | document.body.appendChild(imageElement); |
|
| 2159 | ||
| 2160 | imageElement.onload = function () { |
|
| 2161 | var imgWidth = imageElement.width, imgHeight = imageElement.height; |
|
| 2162 | imageElement.parentNode.removeChild(imageElement); |
|
| 2163 | if (resizeIf != null && resizeIf(imgWidth, imgHeight) === false) { |
|
| 2164 | deferred.reject('resizeIf'); |
|
| 2165 | return; |
|
| 2166 | } |
|
| 2167 | try { |
|
| 2168 | if (ratio) { |
|
| 2169 | var ratioFloat = upload.ratioToFloat(ratio); |
|
| 2170 | var imgRatio = imgWidth / imgHeight; |
|
| 2171 | if (imgRatio < ratioFloat) { |
|
| 2172 | width = imgWidth; |
|
| 2173 | height = width / ratioFloat; |
|
| 2174 | } else { |
|
| 2175 | height = imgHeight; |
|
| 2176 | width = height * ratioFloat; |
|
| 2177 | } |
|
| 2178 | } |
|
| 2179 | if (!width) { |
|
| 2180 | width = imgWidth; |
|
| 2181 | } |
|
| 2182 | if (!height) { |
|
| 2183 | height = imgHeight; |
|
| 2184 | } |
|
| 2185 | var dimensions = calculateAspectRatioFit(imgWidth, imgHeight, width, height, centerCrop); |
|
| 2186 | canvasElement.width = Math.min(dimensions.width, width); |
|
| 2187 | canvasElement.height = Math.min(dimensions.height, height); |
|
| 2188 | var context = canvasElement.getContext('2d'); |
|
| 2189 | context.drawImage(imageElement, |
|
| 2190 | Math.min(0, -dimensions.marginX / 2), Math.min(0, -dimensions.marginY / 2), |
|
| 2191 | dimensions.width, dimensions.height); |
|
| 2192 | deferred.resolve(canvasElement.toDataURL(type || 'image/WebP', quality || 0.934)); |
|
| 2193 | } catch (e) { |
|
| 2194 | deferred.reject(e); |
|
| 2195 | } |
|
| 2196 | }; |
|
| 2197 | imageElement.onerror = function () { |
|
| 2198 | imageElement.parentNode.removeChild(imageElement); |
|
| 2199 | deferred.reject(); |
|
| 2200 | }; |
|
| 2201 | imageElement.src = imagen; |
|
| 2202 | return deferred.promise; |
|
| 2203 | }; |
|
| 2204 | ||
| 2205 | upload.dataUrltoBlob = function (dataurl, name, origSize) { |
|
| 2206 | var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], |
|
| 2207 | bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); |
|
| 2208 | while (n--) { |
|
| 2209 | u8arr[n] = bstr.charCodeAt(n); |
|
| 2210 | } |
|
| 2211 | var blob = new window.Blob([u8arr], {type: mime}); |
|
| 2212 | blob.name = name; |
|
| 2213 | blob.$ngfOrigSize = origSize; |
|
| 2214 | return blob; |
|
| 2215 | }; |
|
| 2216 | ||
| 2217 | upload.isResizeSupported = function () { |
|
| 2218 | var elem = document.createElement('canvas'); |
|
| 2219 | return window.atob && elem.getContext && elem.getContext('2d') && window.Blob; |
|
| 2220 | }; |
|
| 2221 | ||
| 2222 | if (upload.isResizeSupported()) { |
|
| 2223 | // add name getter to the blob constructor prototype |
|
| 2224 | Object.defineProperty(window.Blob.prototype, 'name', { |
|
| 2225 | get: function () { |
|
| 2226 | return this.$ngfName; |
|
| 2227 | }, |
|
| 2228 | set: function (v) { |
|
| 2229 | this.$ngfName = v; |
|
| 2230 | }, |
|
| 2231 | configurable: true |
|
| 2232 | }); |
|
| 2233 | } |
|
| 2234 | ||
| 2235 | upload.resize = function (file, options) { |
|
| 2236 | if (file.type.indexOf('image') !== 0) return upload.emptyPromise(file); |
|
| 2237 | ||
| 2238 | var deferred = $q.defer(); |
|
| 2239 | upload.dataUrl(file, true).then(function (url) { |
|
| 2240 | resize(url, options.width, options.height, options.quality, options.type || file.type, |
|
| 2241 | options.ratio, options.centerCrop, options.resizeIf) |
|
| 2242 | .then(function (dataUrl) { |
|
| 2243 | if (file.type === 'image/jpeg' && options.restoreExif !== false) { |
|
| 2244 | try { |
|
| 2245 | dataUrl = upload.restoreExif(url, dataUrl); |
|
| 2246 | } catch (e) { |
|
| 2247 | setTimeout(function () {throw e;}, 1); |
|
| 2248 | } |
|
| 2249 | } |
|
| 2250 | try { |
|
| 2251 | var blob = upload.dataUrltoBlob(dataUrl, file.name, file.size); |
|
| 2252 | deferred.resolve(blob); |
|
| 2253 | } catch (e) { |
|
| 2254 | deferred.reject(e); |
|
| 2255 | } |
|
| 2256 | }, function (r) { |
|
| 2257 | if (r === 'resizeIf') { |
|
| 2258 | deferred.resolve(file); |
|
| 2259 | } |
|
| 2260 | deferred.reject(r); |
|
| 2261 | }); |
|
| 2262 | }, function (e) { |
|
| 2263 | deferred.reject(e); |
|
| 2264 | }); |
|
| 2265 | return deferred.promise; |
|
| 2266 | }; |
|
| 2267 | ||
| 2268 | return upload; |
|
| 2269 | }]); |
|
| 2270 | ||
| 2271 | (function () { |
|
| 2272 | ngFileUpload.directive('ngfDrop', ['$parse', '$timeout', '$window', 'Upload', '$http', '$q', |
|
| @@ 1707-1847 (lines=141) @@ | ||
| 1704 | } |
|
| 1705 | ]); |
|
| 1706 | ||
| 1707 | ngFileUpload.service('UploadResize', ['UploadValidate', '$q', function (UploadValidate, $q) { |
|
| 1708 | var upload = UploadValidate; |
|
| 1709 | ||
| 1710 | /** |
|
| 1711 | * Conserve aspect ratio of the original region. Useful when shrinking/enlarging |
|
| 1712 | * images to fit into a certain area. |
|
| 1713 | * Source: http://stackoverflow.com/a/14731922 |
|
| 1714 | * |
|
| 1715 | * @param {Number} srcWidth Source area width |
|
| 1716 | * @param {Number} srcHeight Source area height |
|
| 1717 | * @param {Number} maxWidth Nestable area maximum available width |
|
| 1718 | * @param {Number} maxHeight Nestable area maximum available height |
|
| 1719 | * @return {Object} { width, height } |
|
| 1720 | */ |
|
| 1721 | var calculateAspectRatioFit = function (srcWidth, srcHeight, maxWidth, maxHeight, centerCrop) { |
|
| 1722 | var ratio = centerCrop ? Math.max(maxWidth / srcWidth, maxHeight / srcHeight) : |
|
| 1723 | Math.min(maxWidth / srcWidth, maxHeight / srcHeight); |
|
| 1724 | return { |
|
| 1725 | width: srcWidth * ratio, height: srcHeight * ratio, |
|
| 1726 | marginX: srcWidth * ratio - maxWidth, marginY: srcHeight * ratio - maxHeight |
|
| 1727 | }; |
|
| 1728 | }; |
|
| 1729 | ||
| 1730 | // Extracted from https://github.com/romelgomez/angular-firebase-image-upload/blob/master/app/scripts/fileUpload.js#L89 |
|
| 1731 | var resize = function (imagen, width, height, quality, type, ratio, centerCrop, resizeIf) { |
|
| 1732 | var deferred = $q.defer(); |
|
| 1733 | var canvasElement = document.createElement('canvas'); |
|
| 1734 | var imageElement = document.createElement('img'); |
|
| 1735 | imageElement.setAttribute('style', 'visibility:hidden;position:fixed;z-index:-100000'); |
|
| 1736 | document.body.appendChild(imageElement); |
|
| 1737 | ||
| 1738 | imageElement.onload = function () { |
|
| 1739 | var imgWidth = imageElement.width, imgHeight = imageElement.height; |
|
| 1740 | imageElement.parentNode.removeChild(imageElement); |
|
| 1741 | if (resizeIf != null && resizeIf(imgWidth, imgHeight) === false) { |
|
| 1742 | deferred.reject('resizeIf'); |
|
| 1743 | return; |
|
| 1744 | } |
|
| 1745 | try { |
|
| 1746 | if (ratio) { |
|
| 1747 | var ratioFloat = upload.ratioToFloat(ratio); |
|
| 1748 | var imgRatio = imgWidth / imgHeight; |
|
| 1749 | if (imgRatio < ratioFloat) { |
|
| 1750 | width = imgWidth; |
|
| 1751 | height = width / ratioFloat; |
|
| 1752 | } else { |
|
| 1753 | height = imgHeight; |
|
| 1754 | width = height * ratioFloat; |
|
| 1755 | } |
|
| 1756 | } |
|
| 1757 | if (!width) { |
|
| 1758 | width = imgWidth; |
|
| 1759 | } |
|
| 1760 | if (!height) { |
|
| 1761 | height = imgHeight; |
|
| 1762 | } |
|
| 1763 | var dimensions = calculateAspectRatioFit(imgWidth, imgHeight, width, height, centerCrop); |
|
| 1764 | canvasElement.width = Math.min(dimensions.width, width); |
|
| 1765 | canvasElement.height = Math.min(dimensions.height, height); |
|
| 1766 | var context = canvasElement.getContext('2d'); |
|
| 1767 | context.drawImage(imageElement, |
|
| 1768 | Math.min(0, -dimensions.marginX / 2), Math.min(0, -dimensions.marginY / 2), |
|
| 1769 | dimensions.width, dimensions.height); |
|
| 1770 | deferred.resolve(canvasElement.toDataURL(type || 'image/WebP', quality || 0.934)); |
|
| 1771 | } catch (e) { |
|
| 1772 | deferred.reject(e); |
|
| 1773 | } |
|
| 1774 | }; |
|
| 1775 | imageElement.onerror = function () { |
|
| 1776 | imageElement.parentNode.removeChild(imageElement); |
|
| 1777 | deferred.reject(); |
|
| 1778 | }; |
|
| 1779 | imageElement.src = imagen; |
|
| 1780 | return deferred.promise; |
|
| 1781 | }; |
|
| 1782 | ||
| 1783 | upload.dataUrltoBlob = function (dataurl, name, origSize) { |
|
| 1784 | var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], |
|
| 1785 | bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); |
|
| 1786 | while (n--) { |
|
| 1787 | u8arr[n] = bstr.charCodeAt(n); |
|
| 1788 | } |
|
| 1789 | var blob = new window.Blob([u8arr], {type: mime}); |
|
| 1790 | blob.name = name; |
|
| 1791 | blob.$ngfOrigSize = origSize; |
|
| 1792 | return blob; |
|
| 1793 | }; |
|
| 1794 | ||
| 1795 | upload.isResizeSupported = function () { |
|
| 1796 | var elem = document.createElement('canvas'); |
|
| 1797 | return window.atob && elem.getContext && elem.getContext('2d') && window.Blob; |
|
| 1798 | }; |
|
| 1799 | ||
| 1800 | if (upload.isResizeSupported()) { |
|
| 1801 | // add name getter to the blob constructor prototype |
|
| 1802 | Object.defineProperty(window.Blob.prototype, 'name', { |
|
| 1803 | get: function () { |
|
| 1804 | return this.$ngfName; |
|
| 1805 | }, |
|
| 1806 | set: function (v) { |
|
| 1807 | this.$ngfName = v; |
|
| 1808 | }, |
|
| 1809 | configurable: true |
|
| 1810 | }); |
|
| 1811 | } |
|
| 1812 | ||
| 1813 | upload.resize = function (file, options) { |
|
| 1814 | if (file.type.indexOf('image') !== 0) return upload.emptyPromise(file); |
|
| 1815 | ||
| 1816 | var deferred = $q.defer(); |
|
| 1817 | upload.dataUrl(file, true).then(function (url) { |
|
| 1818 | resize(url, options.width, options.height, options.quality, options.type || file.type, |
|
| 1819 | options.ratio, options.centerCrop, options.resizeIf) |
|
| 1820 | .then(function (dataUrl) { |
|
| 1821 | if (file.type === 'image/jpeg' && options.restoreExif !== false) { |
|
| 1822 | try { |
|
| 1823 | dataUrl = upload.restoreExif(url, dataUrl); |
|
| 1824 | } catch (e) { |
|
| 1825 | setTimeout(function () {throw e;}, 1); |
|
| 1826 | } |
|
| 1827 | } |
|
| 1828 | try { |
|
| 1829 | var blob = upload.dataUrltoBlob(dataUrl, file.name, file.size); |
|
| 1830 | deferred.resolve(blob); |
|
| 1831 | } catch (e) { |
|
| 1832 | deferred.reject(e); |
|
| 1833 | } |
|
| 1834 | }, function (r) { |
|
| 1835 | if (r === 'resizeIf') { |
|
| 1836 | deferred.resolve(file); |
|
| 1837 | } |
|
| 1838 | deferred.reject(r); |
|
| 1839 | }); |
|
| 1840 | }, function (e) { |
|
| 1841 | deferred.reject(e); |
|
| 1842 | }); |
|
| 1843 | return deferred.promise; |
|
| 1844 | }; |
|
| 1845 | ||
| 1846 | return upload; |
|
| 1847 | }]); |
|
| 1848 | ||
| 1849 | (function () { |
|
| 1850 | ngFileUpload.directive('ngfDrop', ['$parse', '$timeout', '$window', 'Upload', '$http', '$q', |
|
| @@ 1-141 (lines=141) @@ | ||
| 1 | ngFileUpload.service('UploadResize', ['UploadValidate', '$q', function (UploadValidate, $q) { |
|
| 2 | var upload = UploadValidate; |
|
| 3 | ||
| 4 | /** |
|
| 5 | * Conserve aspect ratio of the original region. Useful when shrinking/enlarging |
|
| 6 | * images to fit into a certain area. |
|
| 7 | * Source: http://stackoverflow.com/a/14731922 |
|
| 8 | * |
|
| 9 | * @param {Number} srcWidth Source area width |
|
| 10 | * @param {Number} srcHeight Source area height |
|
| 11 | * @param {Number} maxWidth Nestable area maximum available width |
|
| 12 | * @param {Number} maxHeight Nestable area maximum available height |
|
| 13 | * @return {Object} { width, height } |
|
| 14 | */ |
|
| 15 | var calculateAspectRatioFit = function (srcWidth, srcHeight, maxWidth, maxHeight, centerCrop) { |
|
| 16 | var ratio = centerCrop ? Math.max(maxWidth / srcWidth, maxHeight / srcHeight) : |
|
| 17 | Math.min(maxWidth / srcWidth, maxHeight / srcHeight); |
|
| 18 | return { |
|
| 19 | width: srcWidth * ratio, height: srcHeight * ratio, |
|
| 20 | marginX: srcWidth * ratio - maxWidth, marginY: srcHeight * ratio - maxHeight |
|
| 21 | }; |
|
| 22 | }; |
|
| 23 | ||
| 24 | // Extracted from https://github.com/romelgomez/angular-firebase-image-upload/blob/master/app/scripts/fileUpload.js#L89 |
|
| 25 | var resize = function (imagen, width, height, quality, type, ratio, centerCrop, resizeIf) { |
|
| 26 | var deferred = $q.defer(); |
|
| 27 | var canvasElement = document.createElement('canvas'); |
|
| 28 | var imageElement = document.createElement('img'); |
|
| 29 | imageElement.setAttribute('style', 'visibility:hidden;position:fixed;z-index:-100000'); |
|
| 30 | document.body.appendChild(imageElement); |
|
| 31 | ||
| 32 | imageElement.onload = function () { |
|
| 33 | var imgWidth = imageElement.width, imgHeight = imageElement.height; |
|
| 34 | imageElement.parentNode.removeChild(imageElement); |
|
| 35 | if (resizeIf != null && resizeIf(imgWidth, imgHeight) === false) { |
|
| 36 | deferred.reject('resizeIf'); |
|
| 37 | return; |
|
| 38 | } |
|
| 39 | try { |
|
| 40 | if (ratio) { |
|
| 41 | var ratioFloat = upload.ratioToFloat(ratio); |
|
| 42 | var imgRatio = imgWidth / imgHeight; |
|
| 43 | if (imgRatio < ratioFloat) { |
|
| 44 | width = imgWidth; |
|
| 45 | height = width / ratioFloat; |
|
| 46 | } else { |
|
| 47 | height = imgHeight; |
|
| 48 | width = height * ratioFloat; |
|
| 49 | } |
|
| 50 | } |
|
| 51 | if (!width) { |
|
| 52 | width = imgWidth; |
|
| 53 | } |
|
| 54 | if (!height) { |
|
| 55 | height = imgHeight; |
|
| 56 | } |
|
| 57 | var dimensions = calculateAspectRatioFit(imgWidth, imgHeight, width, height, centerCrop); |
|
| 58 | canvasElement.width = Math.min(dimensions.width, width); |
|
| 59 | canvasElement.height = Math.min(dimensions.height, height); |
|
| 60 | var context = canvasElement.getContext('2d'); |
|
| 61 | context.drawImage(imageElement, |
|
| 62 | Math.min(0, -dimensions.marginX / 2), Math.min(0, -dimensions.marginY / 2), |
|
| 63 | dimensions.width, dimensions.height); |
|
| 64 | deferred.resolve(canvasElement.toDataURL(type || 'image/WebP', quality || 0.934)); |
|
| 65 | } catch (e) { |
|
| 66 | deferred.reject(e); |
|
| 67 | } |
|
| 68 | }; |
|
| 69 | imageElement.onerror = function () { |
|
| 70 | imageElement.parentNode.removeChild(imageElement); |
|
| 71 | deferred.reject(); |
|
| 72 | }; |
|
| 73 | imageElement.src = imagen; |
|
| 74 | return deferred.promise; |
|
| 75 | }; |
|
| 76 | ||
| 77 | upload.dataUrltoBlob = function (dataurl, name, origSize) { |
|
| 78 | var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], |
|
| 79 | bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); |
|
| 80 | while (n--) { |
|
| 81 | u8arr[n] = bstr.charCodeAt(n); |
|
| 82 | } |
|
| 83 | var blob = new window.Blob([u8arr], {type: mime}); |
|
| 84 | blob.name = name; |
|
| 85 | blob.$ngfOrigSize = origSize; |
|
| 86 | return blob; |
|
| 87 | }; |
|
| 88 | ||
| 89 | upload.isResizeSupported = function () { |
|
| 90 | var elem = document.createElement('canvas'); |
|
| 91 | return window.atob && elem.getContext && elem.getContext('2d') && window.Blob; |
|
| 92 | }; |
|
| 93 | ||
| 94 | if (upload.isResizeSupported()) { |
|
| 95 | // add name getter to the blob constructor prototype |
|
| 96 | Object.defineProperty(window.Blob.prototype, 'name', { |
|
| 97 | get: function () { |
|
| 98 | return this.$ngfName; |
|
| 99 | }, |
|
| 100 | set: function (v) { |
|
| 101 | this.$ngfName = v; |
|
| 102 | }, |
|
| 103 | configurable: true |
|
| 104 | }); |
|
| 105 | } |
|
| 106 | ||
| 107 | upload.resize = function (file, options) { |
|
| 108 | if (file.type.indexOf('image') !== 0) return upload.emptyPromise(file); |
|
| 109 | ||
| 110 | var deferred = $q.defer(); |
|
| 111 | upload.dataUrl(file, true).then(function (url) { |
|
| 112 | resize(url, options.width, options.height, options.quality, options.type || file.type, |
|
| 113 | options.ratio, options.centerCrop, options.resizeIf) |
|
| 114 | .then(function (dataUrl) { |
|
| 115 | if (file.type === 'image/jpeg' && options.restoreExif !== false) { |
|
| 116 | try { |
|
| 117 | dataUrl = upload.restoreExif(url, dataUrl); |
|
| 118 | } catch (e) { |
|
| 119 | setTimeout(function () {throw e;}, 1); |
|
| 120 | } |
|
| 121 | } |
|
| 122 | try { |
|
| 123 | var blob = upload.dataUrltoBlob(dataUrl, file.name, file.size); |
|
| 124 | deferred.resolve(blob); |
|
| 125 | } catch (e) { |
|
| 126 | deferred.reject(e); |
|
| 127 | } |
|
| 128 | }, function (r) { |
|
| 129 | if (r === 'resizeIf') { |
|
| 130 | deferred.resolve(file); |
|
| 131 | } |
|
| 132 | deferred.reject(r); |
|
| 133 | }); |
|
| 134 | }, function (e) { |
|
| 135 | deferred.reject(e); |
|
| 136 | }); |
|
| 137 | return deferred.promise; |
|
| 138 | }; |
|
| 139 | ||
| 140 | return upload; |
|
| 141 | }]); |
|
| 142 | ||
