trent_larson/crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 22 Releases 5 Wiki Activity

finalize the photo-taking code, adding comments and removing logging

Browse Source
This commit is contained in:
Trent Larson
2024-03-20 18:23:57 -06:00
parent 121991b53a
commit 313cd79e60
2 changed files with 27 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/GiftedPhotoDialog.vue
View File

@@ -32,8 +32,6 @@
>
<span>Upload</span>
</button>
<!-- TODO remove, this and console.logs -->
<!--{{ imageHeight }} {{ imageWidth }} {{ imageWarning }}-->
<button
@click="retryImage"
class="bg-slate-500 hover:bg-slate-700 text-white font-bold py-2 px-4 rounded-full"
@@ -133,62 +131,45 @@ export default class GiftedPhotoDialog extends Vue {
async takeImage(/* payload: MouseEvent */) {
const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>;
console.log(
"cameraComponent on snapshot",
cameraComponent,
cameraComponent.resolution,
);
this.imageHeight = cameraComponent?.resolution?.height;
this.imageWidth = cameraComponent?.resolution?.width;
const initialImageRatio = this.imageWidth / this.imageHeight;
console.log(
"initialImageRatio",
initialImageRatio,
this.imageWidth,
this.imageHeight,
);
/**
* This logic to set the image height & width correctly.
* Without it, the portrait orientation ends up with an image that is stretched horizontally.
* Note that it's the same with raw browser Javascript; see the "drawImage" example below.
* Now that I've done it, I can't explain why it works.
*/
let imageHeight = cameraComponent?.resolution?.height;
let imageWidth = cameraComponent?.resolution?.width;
const initialImageRatio = imageWidth / imageHeight;
const windowRatio = window.innerWidth / window.innerHeight;
console.log(
"windowRatio",
windowRatio,
window.innerWidth,
window.innerHeight,
);
if (initialImageRatio > 1 && windowRatio < 1) {
// the image is wider than it is tall, and the window is taller than it is wide
this.imageWarning = "?";
// For some reason, mobile in portrait orientation renders a horizontally-stretched image.
// We're gonna force it opposite.
this.imageHeight = cameraComponent?.resolution?.width;
this.imageWidth = cameraComponent?.resolution?.height;
imageHeight = cameraComponent?.resolution?.width;
imageWidth = cameraComponent?.resolution?.height;
} else if (initialImageRatio < 1 && windowRatio > 1) {
// the image is taller than it is wide, and the window is wider than it is tall
// Haven't seen this happen, but just in case.
this.imageWarning = "??";
this.imageHeight = cameraComponent?.resolution?.width;
this.imageWidth = cameraComponent?.resolution?.height;
// Haven't seen this happen, but we'll do it just in case.
imageHeight = cameraComponent?.resolution?.width;
imageWidth = cameraComponent?.resolution?.height;
}
const newImageRatio = this.imageWidth / this.imageHeight;
console.log(
"newImageRatio",
newImageRatio,
this.imageWidth,
this.imageHeight,
);
const newImageRatio = imageWidth / imageHeight;
if (newImageRatio < windowRatio) {
// the image is a taller ratio than the window, so fit the height first
this.imageHeight = window.innerHeight / 2;
this.imageWidth = this.imageHeight * newImageRatio;
imageHeight = window.innerHeight / 2;
imageWidth = imageHeight * newImageRatio;
} else {
// the image is a wider ratio than the window, so fit the width first
this.imageWidth = window.innerWidth / 2;
this.imageHeight = this.imageWidth / newImageRatio;
imageWidth = window.innerWidth / 2;
imageHeight = imageWidth / newImageRatio;
}
// The resolution is only necessary because of that mobile portrait-orientation case.
// But setting this screws up desktop the mobile emulation.
// The mobile emulation in a browser shows something stretched vertically, but real devices work fine.
this.blob = await cameraComponent?.snapshot({
height: this.imageHeight,
width: this.imageWidth,
height: imageHeight,
width: imageWidth,
}); // png is default; if that changes, change extension in formData.append
if (!this.blob) {
this.$notify(
@@ -210,7 +191,8 @@ export default class GiftedPhotoDialog extends Vue {
/****
Here's an approach without a library, which works similarly and looks ugly.
Here's an approach to photo capture without a library. It has similar quirks.
Now that we've fixed styling for simple-vue-camera, it's not critical to refactor. Maybe someday.
<button id="start-camera" @click="cameraClicked">Start Camera</button>
<video id="video" width="320" height="240" autoplay></video>