3.0 source code
This commit is contained in:
21
OfficeWeb/vendor/megapixel/test/megapix-image.test.html
vendored
Normal file
21
OfficeWeb/vendor/megapixel/test/megapix-image.test.html
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>megapix-image.js test</title>
|
||||
<meta charset="utf-8">
|
||||
<script src="../src/megapix-image.js"></script>
|
||||
<script src="./megapix-image.test.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
Select MegaPixel Photo: <input type="file" id="fileInput">
|
||||
<br/>
|
||||
Image: <br/>
|
||||
<img id="resultImage">
|
||||
<br/>
|
||||
Canvas:<br/>
|
||||
<canvas id="resultCanvas1"></canvas>
|
||||
<br/>
|
||||
Canvas (rotated):<br/>
|
||||
<canvas id="resultCanvas2"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
23
OfficeWeb/vendor/megapixel/test/megapix-image.test.js
vendored
Normal file
23
OfficeWeb/vendor/megapixel/test/megapix-image.test.js
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
window.onload = function() {
|
||||
var fileInput = document.getElementById('fileInput');
|
||||
fileInput.onchange = function() {
|
||||
var file = fileInput.files[0];
|
||||
// MegaPixImage constructor accepts File/Blob object.
|
||||
var mpImg = new MegaPixImage(file);
|
||||
|
||||
// Render resized image into image element using quality option.
|
||||
// Quality option is valid when rendering into image element.
|
||||
var resImg = document.getElementById('resultImage');
|
||||
mpImg.render(resImg, { maxWidth: 300, maxHeight: 300, quality: 0.5 });
|
||||
|
||||
// Render resized image into canvas element.
|
||||
var resCanvas1 = document.getElementById('resultCanvas1');
|
||||
mpImg.render(resCanvas1, { maxWidth: 300, maxHeight: 300 });
|
||||
|
||||
// Render resized image into canvas element, rotating orientation = 6 (90 deg rotate right)
|
||||
// Types of orientation is defined in EXIF specification.
|
||||
// To detect orientation of JPEG file in JS, you can use exif.js from https://github.com/jseidelin/exif-js
|
||||
var resCanvas2 = document.getElementById('resultCanvas2');
|
||||
mpImg.render(resCanvas2, { maxWidth: 300, maxHeight: 300, orientation: 6 });
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user