So ändern Sie den Code für die Anzeige der stereoskopischen Ansicht von Html5 auf Html ⇐ HTML

[Guest]

Ich bin Derby. Ich bin neu in dieser Gemeinschaft. Ich würde Hilfe benötigen, um den Code für die Anzeige der stereoskopischen Ansicht vom HTML5 in das HTML-Format als Ergebnis der Demonstration auf der Website "3D-Sstereo-html5" (https://github.com/moul/ 3D-stereo-html5? Tab = readme-av-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-Sstereo-html ... me-ov-file) ausführen, da der Quellcode basiert ist) Auf dem HTML5, dass ich für dieses Format neu bin, nicht für das HTML. Das Bild kann auf der Webseite nicht angezeigt werden und den stereoskopischen Effekt ausführen. Angehängt ist der Quellcode. Ich wünschte, der Quellcode und der Link aus einem alten Projekt würden Ihnen helfen, das Problem zu lösen und die Lösungen basierend auf Ihrer Spezialität bereitzustellen. Danke. < /P>

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';