vue-web-cam icon indicating copy to clipboard operation
vue-web-cam copied to clipboard

Add encoderOptions to toDataURL()

Open abrichr opened this issue 4 years ago • 4 comments

The call to canvas.toDataURL() omits the second parameter for controlling the image quality:

https://github.com/VinceG/vue-web-cam/blob/42d9b6e3a830e19e1d83d50ca2d80487c056a88f/src/webcam.vue#L267

From https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

canvas.toDataURL(type, encoderOptions); ... encoderOptions Optional A Number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp. If this argument is anything else, the default value for image quality is used. The default value is 0.92. Other arguments are ignored.

It would be useful to be able to specify a value of 1.0 for maximum image quality.

abrichr avatar Oct 30 '20 20:10 abrichr

@abrichr As a prop pass it down or just hard code it to 1.0 ?

return this.getCanvas().toDataURL(this.screenshotFormat, this.quality); 
or
return this.getCanvas().toDataURL(this.screenshotFormat, 1.0); 

VinceG avatar Oct 30 '20 21:10 VinceG

As a prop would be ideal:

return this.getCanvas().toDataURL(this.screenshotFormat, this.quality); 

abrichr avatar Oct 30 '20 21:10 abrichr

@abrichr Going to try and add it, if you have the time and would like to submit a PR that'll be great.

VinceG avatar Oct 30 '20 21:10 VinceG

@VinceG thank you for the quick reply! I may submit a PR if we end up using vue-web-cam, but I'm considering whether to use <input capture="camera"> instead. I submitted another issue about it here: https://github.com/VinceG/vue-web-cam/issues/67

abrichr avatar Oct 30 '20 21:10 abrichr