diff --git a/project.task.yaml b/project.task.yaml
index a3167c4..f1c6025 100644
--- a/project.task.yaml
+++ b/project.task.yaml
@@ -6,6 +6,7 @@ tasks :
- add to readme - check version, close tabs & restart phone if necessary
- bug maybe - a new give remembers the previous project
- alert & stop if give amount < 0
+- add warning that all data (except ID) is public
- onboarding video
- .1 on feed, don't show "to someone anonymous" if it's to a project
diff --git a/src/components/GiftedPhotoDialog.vue b/src/components/GiftedPhotoDialog.vue
index 38b4572..705018e 100644
--- a/src/components/GiftedPhotoDialog.vue
+++ b/src/components/GiftedPhotoDialog.vue
@@ -32,8 +32,6 @@
>
Upload
-
-
;
- 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.
Start Camera