|
|
@ -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> |
|
|
|