Я какое-то время работал над инструментом, который захватывает изображение с веб-камеры, а затем обрезает его до заданного размера.У меня есть инструмент, работающий в предыдущей версии, где он будет просто захватывать середину кадра.Это было немного неудобно, поэтому я пытался обновить его, чтобы вместо этого поместить данные на холст, где они затем обрезаются.К сожалению, я не смог понять, как это сделать правильно.В настоящее время он помещает данные в холст, но сценарий, который я использую для обрезки, ранее использовал заранее определенное изображение.Я не могу понять, как вместо этого заставить его использовать уже существующие данные холста.Любая помощь будет отличной.
<head>
<title>SPL-Samera</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
.gridbox{display:grid;grid-template-columns:[leftstart] 640px [leftend rightstart] 640px [rightend] auto;grid-template-rows:480px auto auto;grid-column-gap:10px;grid-row-gap:10px;}
#snap,#download{display:block;width:640px;height:90px;background-color:#295496;border:3px solid #172f54;font-size:42px;color:#fff}
#download{box-sizing:border-box;text-decoration:none;font-family:sans-serif;padding-top:15px;text-align:center}
.important{color:red;font-size:20px;font-weight:bold;}
span{}
.downloadbox{display:block}
#StreamBox{grid-column-start:leftstart;grid-column-end:leftend}
#PhotoBox{grid-column-start:rightstart;grid-column-end:rightend}
</style>
</head>
<body>
<!--version 2.0.0-->
<div id="wrapper" class="gridbox">
<div id="StreamBox">
<video id="video" width="640" height="480" autoplay>
</video>
<button id="snap">Snap Photo</Button>
<div class="overlay">
</div>
</div>
<div id="PhotoBox">
<canvas id="panel" class="cropimage" width="640" height="480" cropwidth="200" cropheight="300">
</canvas>
<div class="downloadbox">
<a href="#" id="download">Download Photo</a>
<span class="important">
Make sure there is an image showing above BEFORE hitting download!
</span>
<div class="contr">
<button onclick="getResults()">Crop</button>
</div>
<div id="results">
<img id="crop_result" />
</div>
</div>
</div>
</div>
<script>
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById('panel');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
var mediaConfig = { video: true };
var errBack = function(e) {
console.log('An error has occurred!', e)
};
// Put video listeners into place
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
// video.src = window.URL.createObjectURL(stream); --Old way to do things pre-firefox 62
video.srcObject = stream; // new method
video.play();
});
}
//Download Stuff
function downloadCanvas(link, canvasId, filename) {
link.href = document.getElementById(canvasId).toDataURL('image/jpeg');
link.download = filename;
}
// Trigger photo take and Download photo
document.getElementById('snap').addEventListener('click', function() {
// context.drawImage(video, 220, 90, 200, 300, 0, 0, 200, 300);
context.drawImage(video, 0, 0, 640, 480, 0, 0, 640, 480);
});
document.getElementById('download').addEventListener('click', function() {
downloadCanvas(this, 'panel', 'capture.jpg');
}, false);
}, false);
// variables
var canvas, context;
var image;
var iMouseX, iMouseY = 1;
var theSelection;
// define Selection constructor
function Selection(x, y, w, h){
this.x = x; // initial positions
this.y = y;
this.w = w; // and size
this.h = h;
this.px = x; // extra variables to dragging calculations
this.py = y;
this.bHow = [false, false, false, false]; // hover statuses
this.bDrag = [false, false, false, false]; // drag statuses
this.bDragAll = false; // drag whole selection
}
// define Selection draw method
Selection.prototype.draw = function(){
context.strokeStyle = '#f00';
context.lineWidth = 2;
context.strokeRect(this.x, this.y, this.w, this.h);
// draw part of original image
if (this.w > 0 && this.h > 0) {
context.drawImage(image, this.x, this.y, this.w, this.h, this.x, this.y, this.w, this.h);
}
}
function drawScene() { // main drawScene function
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // clear canvas
// draw source image
context.drawImage(image, 0, 0, context.canvas.width, context.canvas.height);
// and make it darker
context.fillStyle = 'rgba(0, 0, 0, 0.5)';
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
// draw selection
theSelection.draw();
}
$(function(){
// loading source image
image = new Image();
image.onload = function () {
}
image.src = '';
// creating canvas and context objects
canvas = document.getElementById('panel');
context = canvas.getContext('2d');
// create initial selection
theSelection = new Selection(220, 90, 200, 300);
$('#panel').mousemove(function(e) { // binding mouse move event
var canvasOffset = $(canvas).offset();
iMouseX = Math.floor(e.pageX - canvasOffset.left);
iMouseY = Math.floor(e.pageY - canvasOffset.top);
// in case of drag of whole selector
if (theSelection.bDragAll) {
theSelection.x = iMouseX - theSelection.px;
theSelection.y = iMouseY - theSelection.py;
}
for (i = 0; i < 4; i++) {
theSelection.bHow[i] = false;
}
drawScene();
});
$('#panel').mousedown(function(e) { // binding mousedown event
var canvasOffset = $(canvas).offset();
iMouseX = Math.floor(e.pageX - canvasOffset.left);
iMouseY = Math.floor(e.pageY - canvasOffset.top);
theSelection.px = iMouseX - theSelection.x;
theSelection.py = iMouseY - theSelection.y;
theSelection.bDragAll = true;
if (theSelection.bHow[0]) {
theSelection.px = iMouseX - theSelection.x;
theSelection.py = iMouseY - theSelection.y;
}
if (theSelection.bHow[1]) {
theSelection.px = iMouseX - theSelection.x - theSelection.w;
theSelection.py = iMouseY - theSelection.y;
}
if (theSelection.bHow[2]) {
theSelection.px = iMouseX - theSelection.x - theSelection.w;
theSelection.py = iMouseY - theSelection.y - theSelection.h;
}
if (theSelection.bHow[3]) {
theSelection.px = iMouseX - theSelection.x;
theSelection.py = iMouseY - theSelection.y - theSelection.h;
}
for (i = 0; i < 4; i++) {
if (theSelection.bHow[i]) {
theSelection.bDrag[i] = true;
}
}
});
$('#panel').mouseup(function(e) { // binding mouseup event
theSelection.bDragAll = false;
for (i = 0; i < 4; i++) {
theSelection.bDrag[i] = false;
}
theSelection.px = 0;
theSelection.py = 0;
});
drawScene();
});
function getResults() {
var temp_context, temp_canvas;
temp_canvas = document.createElement('canvas');
temp_context = temp_canvas.getContext('2d');
temp_canvas.width = theSelection.w;
temp_canvas.height = theSelection.h;
temp_context.drawImage(image, theSelection.x, theSelection.y, theSelection.w, theSelection.h, 0, 0, theSelection.w, theSelection.h);
var vData = temp_canvas.toDataURL();
$('#crop_result').attr('src', vData);
}
</script>
</body>
Codepen