virtuoworks / canvascamera-cordova-demo Goto Github PK
View Code? Open in Web Editor NEWA sample Apache Cordova application that uses the canvas camera plugin.
License: MIT License
A sample Apache Cordova application that uses the canvas camera plugin.
License: MIT License
How to change image / picture ratio size?
here is my options setup:
var options = {
canvas: {
width: 270,
height: 360,
},
capture: {
width: 270,
height: 360,
},
when the image captured, the final image size is: 270 x 202 pixel.
So, how to capture the image in portrait orientation and same size as option.
Hello,
Just tried to add Cordova plugin to a project in vain.
$ cordova plugin add https://github.com/VirtuoWorks/CanvasCameraPlugin.git Installing "com.virtuoworks.cordova-plugin-canvascamera" for android Plugin dependency "[email protected]" already fetched, using that version. Installing "cordova-plugin-compat" for android Plugin doesn't support this project's cordova-android version. cordova-android: 8.1.0, failed version requirement: <6.3.0 Skipping 'cordova-plugin-compat' for android Adding com.virtuoworks.cordova-plugin-canvascamera to package.json
Thank you for your feedback.
Regards.
I found the function to apply green screen to webcam but I am confused about applying it to this plugin. How to apply a green screen to the canvas?
function draw() {
var frame = readFrame();
if (frame) {
replaceGreen(frame.data);
context.putImageData(frame, 0, 0);
}
// Wait for the next frame.
requestAnimationFrame(draw);
}
function readFrame() {
try {
context.drawImage(video, 0, 0, width, height);
} catch (e) {
// The video may not be ready, yet.
return null;
}
return context.getImageData(0, 0, width, height);
}
function replaceGreen(data) {
var len = data.length;
for (var i = 0, j = 0; j < len; i++, j += 4) {
// Convert from RGB to HSL...
var hsl = rgb2hsl(data[j], data[j + 1], data[j + 2]);
var h = hsl[0], s = hsl[1], l = hsl[2];
// ... and check if we have a somewhat green pixel.
//if (h >= 90 && h <= 160 && s >= 25 && s <= 90 && l >= 20 && l <= 75) {
if (h >= 65 && h <= 185 && s >= 0 && s <= 115 && l >= 0 && l <= 100) {
data[j + 3] = 0;
}
}
}
function rgb2hsl(r, g, b) {
r /= 255; g /= 255; b /= 255;
var min = Math.min(r, g, b);
var max = Math.max(r, g, b);
var delta = max - min;
var h, s, l;
if (max == min) {
h = 0;
} else if (r == max) {
h = (g - b) / delta;
} else if (g == max) {
h = 2 + (b - r) / delta;
} else if (b == max) {
h = 4 + (r - g) / delta;
}
h = Math.min(h * 60, 360);
if (h < 0) {
h += 360;
}
l = (min + max) / 2;
if (max == min) {
s = 0;
} else if (l <= 0.5) {
s = delta / (max + min);
} else {
s = delta / (2 - max - min);
}
return [h, s * 100, l * 100];
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.