Как изменить код отображения стереоскопического изображения с Html5 на Html ⇐ Html

[Anonymous]

Я Дерби. Я новичок в этом сообществе. Мне понадобится помощь, чтобы изменить код для отображения стереоскопического представления от HTML5 в формат HTML в результате демонстрации на веб-сайте "3D-Stereo-html5" (https://github.com/moul/ 3d-stereo-html5? Tab = readme-ov-file). Исходный код из проекта под названием «3d-Stereo-html5» (https://github.com/moul/3d-stereo-html5 ... me-ov-file). Я не могу выполнить тот же результат, что и демонстрация на веб-сайте "3D-Stereo-html5" (https://github.com/moul/3d-stereo-html5 ... me-ov-file), потому что исходный код основан На HTML5 я новичок в этом формате, а не HTML. Изображение не может отображаться на веб -странице и выполнить стереоскопический эффект. Прилагается исходный код. Я бы хотел, чтобы исходный код и ссылка из одного старого проекта помогут вам решить проблему и предоставить решения на основе вашей специальности. Спасибо. < /P>


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





Подробнее здесь: https://stackoverflow.com/questions/793 ... he-html5-t