So ändern Sie den Code für die Anzeige der stereoskopischen Ansicht vom HTML5 zu HTML ⇐ JavaScript

[Guest]

Ich bin Derby. Ich bin neu in dieser Community. Ich bräuchte Hilfe, um den Code für die Anzeige der stereoskopischen Ansicht vom Html5- in das Html-Format zu ändern, als Ergebnis der Demonstration auf der Website „3d-stereo-html5“ (https://github.com/moul/ 3d-stereo-html5?tab=readme-ov-file). Der Quellcode stammt aus dem Projekt mit dem Titel „3d-stereo-html5“ (https://github.com/moul/3d-stereo-html5 ... me-ov-file). Ich kann nicht das gleiche Ergebnis wie die Demonstration auf der Website „3d-stereo-html5“ (https://github.com/moul/3d-stereo-html5 ... me-ov-file) erzielen, da der Quellcode darauf basiert auf dem Html5, dass ich für dieses Format neu bin, nicht für den Html. Das Bild kann nicht auf der Webseite angezeigt werden und keinen stereoskopischen Effekt erzielen. Im Anhang ist der Quellcode. Ich wünschte, der Quellcode und der Link eines alten Projekts würden Ihnen helfen, das Problem zu lösen und die Lösungen bereitzustellen, die auf Ihrem Fachgebiet basieren. Vielen Dank.

Code: Select all

test



statue2-3D-side-by-side-960.jpg
5310631602_dc8361d16e.jpg
masters3dsidebyside1.jpg
side-by-Side-LCI.jpg
G-Force-trailer-3D.jpg
side-by-side-3d.jpg
5305857371_a7b21074a2.jpg



Default

True Anaglyphs
Optimized Anaglyphs
Gray Anaglyphs
Color Anaglyphs
Half Color Anaglyphs


Grayscale
Brightness
Threshold






var canvas = document.createElement('canvas');
var canvas2 = document.createElement('canvas');
var algorythm = 'default';
var img = new Image;
img.onload = function() {
handleImg(img);
};

function handleImg(img) {
halfWidth = img.width / 2;
canvas.width = img.width;
//canvas.width = halfWidth;
canvas.height = img.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pixels = imageData.data;
console.info('canvas.width', canvas.width);
console.info('canvas.height', canvas.height);
console.info('pixels.length', pixels.length);
for (var i = 0, il = pixels.length; i < il; i+= 4) {
//var color = Math.random() * 255;
if ((i / 4) % img.width <  img.width / 2) {
var r1 = pixels[i + 0],
r2 = pixels[i + 0 + img.width * 2],
g1 = pixels[i + 1],
g2 = pixels[i + 1 + img.width * 2],
b1 = pixels[i + 2],
b2 = pixels[i + 2 + img.width * 2],
ra = 0,
ga = 0,
ba = 0;

switch (algorythm) {
case 'true-anaglyphs':
ra = 0.299 * r1 + 0.587 * g1 + 0.114 * b1;
ba = 0.299 * r2 + 0.587 * g2 + 0.114 * b2;
break;
case 'optimized-anaglyphs':
ra = 0.7 * g1 + 0.3 * b1;
ga = g2;
ba = b2;
break;
case 'gray-anaglyphs':
ra = 0.299 * r1 + 0.587 * g1 + 0.114 * b1;
ga = ba = 0.299 * r2 + 0.587 * g2 + 0.114 * b2;
break;
case 'color-anaglyphs':
ra = r1;
ga = r2;
ba = b2;
break;
case 'half-color-anaglyphs':
ra = 0.299 * r1 + 0.587 * g1 + 0.114 * b1;
ga = r2;
ba = b2;
break;
case 'grayscale':
var v = 0.299 * r1 + 0.587 * g1 + 0.114 * b1;
ra = ga = ba = v;
break;
case 'brightness':
var adjustment = 100;
ra = r1 + adjustment;
ga = g1 + adjustment;
ba = b1 + adjustment;
break;
case 'threshold':
var v = (r1 + 0.2126 * r1 + 0.7152 * g1 + 0.0722 * b1) ? 255 : 0;
ra = ga = ba = v;
break;
case 'default':
ra = r1;
ga = g1;
ba = b1;
break;
default:
break;
}
} else {
ra = 255;
ga = 255;
ba = 255;
}
pixels[i + 0] = ra;
pixels[i + 1] = ga;
pixels[i + 2] = ba;
}
ctx.putImageData(imageData, 0, 0);

canvas2.width = img.width;
canvas2.height = img.height;
canvas.style.display = 'block';
var ctx2 = canvas2.getContext('2d');
ctx2.drawImage(img, 0, 0);

document.body.appendChild(canvas);
document.body.appendChild(canvas2);
}
img.src = 'images/statue2-3D-side-by-side-960.jpg';