WebService / ben-test · Files

import * as THREE from 'three';

const canvasWidth = 3840;
const canvasHeight = 2160;

const getColor2 = (canvas, data, x, y) => {
    var width = canvas.width;
    var height = canvas.height;
    var index = (y * width + x) * 4;
    //return (data[index] + data[index + 1] + data[index + 2]) / 3;

    return {
        x: data[index],
        y: data[index + 1],
        z: data[index + 2]
    };
};

const getColor = (canvas, data, x, y) => {
    var width = canvas.width;
    var height = canvas.height;
    var index = (y * width + x) * 4;
    return (data[index] + data[index + 1] + data[index + 2]) / 3;
};

// Perform MSAA by averaging neighboring pixel values
const applyFXAA = (canvas, ctx, sampleRadius = 3, scene) => {
    var width = canvas.width;
    var height = canvas.height;
    var imageData = ctx.getImageData(0, 0, width, height);

    const imageDataCopy = new ImageData(new Uint8ClampedArray(imageData.data), imageData.width, imageData.height);
    var pixels = imageData.data;
    var pixelsCopy = imageDataCopy.data;

    var halfRadius = Math.floor(sampleRadius / 2);

    const group = new THREE.Object3D();

    for (var y = halfRadius; y < height - halfRadius; y++) {
        for (var x = halfRadius; x < width - halfRadius; x++) {
            var index = (y * width + x) * 4;

            // 获取周围像素
            var sum = 0;
            var sumCopy = 0;

            var sumx = 0;
            var sumy = 0;
            var sumz = 0;

            var sumCopyx = 0;
            var sumCopyy = 0;
            var sumCopyz = 0;

            for (var dy = -halfRadius; dy <= halfRadius; dy++) {
                for (var dx = -halfRadius; dx <= halfRadius; dx++) {
                    sum += getColor(canvas, pixels, x + dx, y + dy);
                    sumCopy += getColor(canvas, pixelsCopy, x + dx, y + dy);

                    sumx += getColor2(canvas, pixels, x + dx, y + dy).x;
                    sumy += getColor2(canvas, pixels, x + dx, y + dy).y;
                    sumz += getColor2(canvas, pixels, x + dx, y + dy).z;

                    sumCopyx += getColor2(canvas, pixelsCopy, x + dx, y + dy).x;
                    sumCopyy += getColor2(canvas, pixelsCopy, x + dx, y + dy).y;
                    sumCopyz += getColor2(canvas, pixelsCopy, x + dx, y + dy).z;
                }
            }
            const edges = sum / (sampleRadius * sampleRadius);
            const edgesCopy = sumCopy / (sampleRadius * sampleRadius);
            // 根据梯度和阈值应用抗锯齿
            if (
                edgesCopy > 0 &&
                edgesCopy > 255 * 0.3 &&
                pixelsCopy[index] <= 200 &&
                pixelsCopy[index + 1] <= 200 &&
                pixelsCopy[index + 2] <= 200
            ) {
                pixels[index] = sumCopyx / (sampleRadius * sampleRadius);
                pixels[index + 1] = sumCopyy / (sampleRadius * sampleRadius);
                pixels[index + 2] = sumCopyz / (sampleRadius * sampleRadius);
            }
            /*
            const geometry = new THREE.BoxGeometry(1, 1, 1);
            const material = new THREE.MeshBasicMaterial({
                color: new THREE.Color(pixels[index] / 255, pixels[index + 1] / 255, pixels[index + 2] / 255)
            });
            const cube = new THREE.Mesh(geometry, material);
            cube.position.set(x, y, 10);
            group.add(cube);*/
        }
    }
    //scene.add(group);
    ctx.putImageData(imageData, 0, 0);
};

const applyGaussianBlur = (ctx, width, height, radius) => {
    var imageData = ctx.getImageData(0, 0, width, height);
    var pixels = imageData.data;

    var weights = generateGaussianWeights(radius);
    console.log(weights);
    for (var y = 0; y < height; y++) {
        for (var x = 0; x < width; x++) {
            var red = 0,
                green = 0,
                blue = 0;

            for (var i = -radius; i <= radius; i++) {
                for (var j = -radius; j <= radius; j++) {
                    var offsetX = x + j;
                    var offsetY = y + i;

                    if (offsetX >= 0 && offsetX < width && offsetY >= 0 && offsetY < height) {
                        var index = (offsetY * width + offsetX) * 4;
                        var weight = weights[i + radius] * weights[j + radius];

                        red += pixels[index] * weight;
                        green += pixels[index + 1] * weight;
                        blue += pixels[index + 2] * weight;
                    }
                }
            }

            var currentIndex = (y * width + x) * 4;
            pixels[currentIndex] = red;
            pixels[currentIndex + 1] = green;
            pixels[currentIndex + 2] = blue;
        }
    }

    ctx.putImageData(imageData, 0, 0);
};

const generateGaussianWeights = (radius) => {
    var weights = [];
    var sigma = radius / 3.0;

    for (var i = -radius; i <= radius; i++) {
        var weight = Math.exp(-(i * i) / (2 * sigma * sigma));
        weights.push(weight);
    }

    // Normalize the weights
    var sum = weights.reduce((a, b) => a + b, 0);
    weights = weights.map((w) => w / sum);

    return weights;
};

const agenerate2DGaussianKernel2 = (size, sigma) => {
    const kernel = new Array(size);

    const sigmaSquared = sigma * sigma;
    const sigmaRoot = Math.sqrt(2 * Math.PI) * sigma;
    const coefficient = 1 / (sigmaRoot * sigmaRoot);

    const center = (size - 1) / 2;

    let sum = 0;

    for (let i = 0; i < size; i++) {
        kernel[i] = new Array(size);
        for (let j = 0; j < size; j++) {
            const x = i - center;
            const y = j - center;
            const xSquared = x * x;
            const ySquared = y * y;
            kernel[i][j] = coefficient * Math.exp(-(xSquared + ySquared) / (2 * sigmaSquared));
            sum += kernel[i][j];
        }
    }

    // Normalize the kernel
    for (let i = 0; i < size; i++) {
        for (let j = 0; j < size; j++) {
            kernel[i][j] /= sum;
        }
    }

    console.log(kernel);

    return kernel;
};

const generateAveragingKernel = (size) => {
    // Ensure that the size is an odd number
    if (size % 2 === 0) {
        size++;
    }

    // Calculate the center position of the kernel
    const center = Math.floor(size / 2);

    // Initialize the kernel matrix with equal weights
    const kernel = Array.from({ length: size }, () => Array.from({ length: size }, () => 1));

    // Normalize the kernel by dividing each element by the sum of all elements
    const sum = kernel.flat().reduce((acc, val) => acc + val, 0);
    const normalizedKernel = kernel.map((row) => row.map((val) => val / sum));
    console.log(normalizedKernel);
    return normalizedKernel;
};

// Helper function to calculate luma value for a pixel
const calculateLuma = (pixels, index) => {
    return 0.299 * pixels[index] + 0.587 * pixels[index + 1] + 0.114 * pixels[index + 2];
};

const applyGrayscaleCompensation = (ctx, width, height, compensationValue) => {
    // Get the pixel data from the canvas
    var imageData = ctx.getImageData(0, 0, width, height);
    var pixels = imageData.data;

    // Calculate the compensation factor based on the input value
    var compensationFactor = (compensationValue / 8) * 255;

    // Apply grayscale compensation with specified segments
    for (var i = 0; i < pixels.length; i += 4) {
        if (
            pixels[i] > 0 &&
            pixels[i] < 255 &&
            pixels[i + 1] > 0 &&
            pixels[i + 1] < 255 &&
            pixels[i + 2] > 0 &&
            pixels[i + 2] < 255
        ) {
            // Adjust the grayscale value based on the compensation factor

            pixels[i] += compensationFactor;
            pixels[i + 1] += compensationFactor;
            pixels[i + 2] += compensationFactor;
        }
    }

    // Put the modified pixel data back onto the canvas
    ctx.putImageData(imageData, 0, 0);
};

const clamp = (value, min, max) => {
    return Math.min(Math.max(value, min), max);
};

const generate2DGaussianKernel = (size) => {
    var sigma = size / 6; // Adjust the sigma based on kernel size
    var kernel = [];

    for (var i = 0; i < size; i++) {
        var row = [];
        for (var j = 0; j < size; j++) {
            var x = j - Math.floor(size / 2);
            var y = i - Math.floor(size / 2);
            var value = Math.exp(-(x * x + y * y) / (2 * sigma * sigma)) / (2 * Math.PI * sigma * sigma);
            row.push(value);
        }
        kernel.push(row);
    }
    console.log(kernel);
    return kernel;
};

const applyEdgeBlur = (ctx, width, height, kernelSize) => {
    // Get the pixel data from the canvas
    var imageData = ctx.getImageData(0, 0, width, height);
    var pixels = imageData.data;

    // Generate a 2D Gaussian blur kernel of specified size
    var kernel = generate2DGaussianKernel(kernelSize);

    const sigma = 1.0;
    //const kernel = agenerate2DGaussianKernel2(kernelSize, 1.0);

    //const kernel = generateAveragingKernel(kernelSize);

    var divisor = kernel.reduce((sum, row) => sum + row.reduce((rowSum, value) => rowSum + value, 0), 0);

    // Apply the kernel to the pixel data
    for (var i = 0; i < pixels.length; i += 4) {
        var sumR = 0,
            sumG = 0,
            sumB = 0;

        for (var j = 0; j < kernelSize; j++) {
            for (var k = 0; k < kernelSize; k++) {
                var rowIndex = i + (j - Math.floor(kernelSize / 2)) * 4 + (k - Math.floor(kernelSize / 2)) * width * 4;
                var factor = kernel[j][k];

                sumR += pixels[rowIndex] * factor;
                sumG += pixels[rowIndex + 1] * factor;
                sumB += pixels[rowIndex + 2] * factor;
            }
        }

        pixels[i] = clamp(sumR / divisor, 0, 255);
        pixels[i + 1] = clamp(sumG / divisor, 0, 255);
        pixels[i + 2] = clamp(sumB / divisor, 0, 255);
    }

    // Put the modified pixel data back onto the canvas
    ctx.putImageData(imageData, 0, 0);
};

const applywhite = (ctx, width, height) => {
    // Get the pixel data from the canvas
    var imageData = ctx.getImageData(0, 0, width, height);
    var pixels = imageData.data;

    // Apply grayscale compensation with specified segments
    for (var i = 0; i < pixels.length; i += 4) {
        if (pixels[i] > 0 && pixels[i] < 255) {
            pixels[i] = 0;
        }
        if (pixels[i + 1] > 0 && pixels[i + 1] < 255) {
            pixels[i + 1] = 0;
        }
        if (pixels[i + 2] > 0 && pixels[i + 2] < 255) {
            pixels[i + 2] = 0;
        }
    }

    // Put the modified pixel data back onto the canvas
    ctx.putImageData(imageData, 0, 0);
};

class ScreenShot {
    constructor({ editor }) {
        this.editor = editor;
        this.box = { x: 0, y: 0, z: 0 };
    }

    init = ({ x, y, z }) => {
        this.box = { x, y, z };
    };

    setViewsPosition = () => {
        const { x, y } = this.box;
        const dx = x * 0.5;
        const dy = y * 0.5;
        const cx = 0 / 2;
        const cy = 0 / 2;

        const left = cx - dx;
        const right = cx + dx;
        const top = cy + dy;
        const bottom = cy - dy;

        this.editor.camera.position.set(0, 0, 200);
        this.editor.camera.updateProjectionMatrix();
        this.editor.control.target.set(0, 0, 0);
        // this.editor.control.resetViewPort();
        this.editor.camera.projectionMatrix.makeOrthographic(left, right, top, bottom, -10000, 10000);
        this.editor.camera.projectionMatrixInverse.copy(this.editor.camera.projectionMatrix).invert();
        this.editor.camera.zoom = 6;
    };

    createCanvasForImage = (img) => {
        const canvas = document.createElement('canvas');
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;
        const ctx = canvas.getContext('2d');
        //ctx.filter = 'blur(1px)';
        //ctx.imageSmoothingEnabled = true;
        //ctx.imageSmoothingQuality = 'high';
        ctx.drawImage(img, 0, 0);
        return canvas;
    };

    applyAntiAliasing = (imageData) => {
        var pixels = imageData.data;
        for (var i = 0; i < pixels.length; i += 4) {
            var avg = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3;
            pixels[i] = avg;
            pixels[i + 1] = avg;
            pixels[i + 2] = avg;
        }
    };

    aliasing = (canvas, newImageData, imageData, scale) => {
        for (let y = 0; y < canvas.height; y++) {
            for (let x = 0; x < canvas.width; x++) {
                const sourceIndex = (y * canvas.width + x) * 4;
                const color = [
                    imageData.data[sourceIndex],
                    imageData.data[sourceIndex + 1],
                    imageData.data[sourceIndex + 2],
                    imageData.data[sourceIndex + 3]
                ];

                for (let dy = 0; dy < scale; dy++) {
                    for (let dx = 0; dx < scale; dx++) {
                        const destIndex = ((y * scale + dy) * canvas.width * scale + (x * scale + dx)) * 4;
                        newImageData.data[destIndex] = color[0];
                        newImageData.data[destIndex + 1] = color[1];
                        newImageData.data[destIndex + 2] = color[2];
                        newImageData.data[destIndex + 3] = color[3];
                    }
                }
            }
        }
    };

    getImage2 = (fileName) => {
        const canvas = this.editor.renderer.domElement;
        const ctx = canvas.getContext('2d');

        this.setViewsPosition();
        this.editor.render();
        const oc = document.createElement('canvas');
        const octx = oc.getContext('2d');
        oc.width = canvasWidth;
        oc.height = canvasHeight;

        // step 2: pre-filter image using steps as radius
        const steps = (oc.width / canvas.width) >> 1;
        octx.filter = `blur(${steps}px)`;
        octx.drawImage(oc, 0, 0);

        // step 3, draw scaled
        ctx.drawImage(oc, 0, 0, oc.width, oc.height, 0, 0, canvas.width, canvas.height);
        const link = document.createElement('a');

        if (typeof link.download === 'string') {
            document.body.appendChild(link); // Firefox requires the link to be in the body
            link.download = fileName;
            link.href = oc.toDataURL('image/png', 1.0);
            link.click();
            document.body.removeChild(link); // remove the link when done
        }
    };

    getImage = (fileName) => {
        this.setViewsPosition();
        this.editor.render();
        this.editor.camera.up.set(0, 1, 0);
        const canvas = document.createElement('canvas');

        canvas.width = this.editor.renderer.domElement.width;
        canvas.height = this.editor.renderer.domElement.height;

        const canvasNode = this.editor.renderer.domElement;
        const cc = this.createCanvasForImage(canvasNode);

        const ctx = canvas.getContext('2d');

        //ctx.imageSmoothingEnabled = true;
        //ctx.imageSmoothingQuality = 'high';
        ctx.translate(canvas.width, canvas.height);
        ctx.scale(-1, -1);

        ctx.drawImage(this.editor.renderer.domElement, 0, 0, canvas.width, canvas.height);

        // 获取ImageData
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

        const scale = 2;
        const newImageData = ctx.createImageData(canvas.width * scale, canvas.height * scale);

        // 对ImageData进行抗锯齿处理
        //this.aliasing(canvas, newImageData, imageData, scale);

        //applyEdgeBlur(ctx, canvas.width, canvas.height, 3);
        //ctx.imageSmoothingEnabled = true;

        //applyFXAA(canvas, ctx, 3, this.editor.scene);
        //applyEdgeBlur(ctx, canvas.width, canvas.height, 5);

        //ctx.filter = `blur(9px)`;
        // const compensationValue = 2;
        //applyGrayscaleCompensation(ctx, canvas.width, canvas.height, compensationValue);

        //applywhite(ctx, canvas.width, canvas.height);

        // 将处理后的ImageData绘制回Canvas
        // ctx.putImageData(imageData, 0, 0);

        const link = document.createElement('a');
        if (typeof link.download === 'string') {
            document.body.appendChild(link); // Firefox requires the link to be in the body
            link.download = fileName;
            link.href = canvas.toDataURL('image/jepg', 0.1);
            link.click();
            document.body.removeChild(link); // remove the link when done
        }

        this.editor.camera.up.set(0, -1, 0);
        return;
        // ctx.drawImage(canvasNode, 0, 0, canvasWidth, canvasHeight);


        const screenshot = this.editor.renderer.domElement.toDataURL();
        const a = document.createElement('a');
        a.download = fileName;
        a.href = screenshot;

        //const cc = this.createCanvasForImage(canvasNode);
        ctx.drawImage(cc, 0, 0);

        /*
        pica.resize(cc, canvas, {
            unsharpAmount: 0,
            unsharpRadius: 0,
            unsharpThreshold: 0
        })
            .then((result) => pica.toBlob(result, 'image/jpeg'))
            .then((blob) => {
                const url = window.URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = url;
                link.download = fileName;
                link.click();
                window.URL.revokeObjectURL(url);
            });

        
        ctx.drawImage(canvasNode, 0, 0, canvasWidth, canvasHeight);
*/
        // const screenshot = this.editor.renderer.domElement.toDataURL();
        //const link = document.createElement('a');
        if (typeof link.download === 'string') {
            document.body.appendChild(link); // Firefox requires the link to be in the body
            link.download = fileName;
            link.href = cc.toDataURL('image/png');
            link.click();
            document.body.removeChild(link); // remove the link when done
        }
    };
}

export default ScreenShot;