Question

所以我的一个朋友给我发了代码 - 代码由以下内容组成：

演示 - Demo

第一张图像为黑色和白色}两张图像尺寸相同 - 基本相同，颜色不同。
第二张图片 - 原始颜色。
两张照片所在的画布。
按钮，触发功能 - 更改图像像素，直到它恢复原始颜色。

我希望每次单击按钮并且像素发生变化时，我都希望保存更改。所以，如果生病刷新它 - 它不会从一开始就改变像素 - 图像将在主机服务器或外部数据库中进行更新。我无法找到解决方案......

JS CODE：

///////////////////////global variables///////////////////
var gray_url="bwcat.jpg"; //black and white image URI
var regular_url="cat.jpg"; //regular image URI
var n=100; //number of pixels changed per click
/////////////////////////////////////

document.addEventListener("DOMContentLoaded", function(){
    var c=new EditableCanvas(document.getElementById('cnvs'));
    grayScaleImage=new Image();
    grayScaleImage.src=gray_url;
    grayScaleImage.onload=function()
    {
        c.drawImage(this);
    }
    regularImage=new Image();
    regularImage.src=regular_url;
    regularImage.onload=function()
    {
        var p=getPixelArray(this);
        btn.onclick=function(){
                for(var i=1;i<=n&&p.length>0;i++){
                removeDrawRandomPixel(p,c);
                }
            }
    }
},false);   

//create a Pixel object
function ImagePixel(x,y,r,g,b,a)
{
    this.x=x;
    this.y=y;
    this.r=r;
    this.g=g;
    this.b=b;
    this.a=a;
}

//object that allows custom methods
function EditableCanvas(canvas)
{
    this.canvas=canvas;
    this.context=canvas.getContext('2d');
    this.width=canvas.width;
    this.height=canvas.height;
    this.pixelImage=this.context.createImageData(1,1);
    //draw an entire picture and adjust the canvas for it
    this.drawImage=function(image)
    {
        this.width=image.width;
        this.height=image.height;
        this.canvas.height=image.height;
        this.canvas.width=image.width;
        this.context.drawImage(image,0,0);
    }
    //draw a single pixel, ImagePixel pixel
    this.drawPixel=function(pixel)
    {
        this.pixelImage.data[0]=pixel.r;
        this.pixelImage.data[1]=pixel.g;
        this.pixelImage.data[2]=pixel.b;
        this.pixelImage.data[3]=pixel.a;
        this.context.putImageData(this.pixelImage,pixel.x,pixel.y);//,pixel.x,pixel.y);
    }
}
//the function returns an ordered array of Pixel pixels of the image at `src`.
function getPixelArray(img)
{
    var pixelArray=[];
    var cnvs=document.createElement('canvas');
    cnvs.width=img.width;
    cnvs.height=img.width;
    var context=cnvs.getContext('2d');
    context.drawImage(img,0,0);
    var originalData = context.getImageData(0,0,img.width,img.height).data;
    for(var i=0,pixelId=0,px;i<originalData.length;i+=4)
    {
        px=new ImagePixel(pixelId%img.width,Math.floor(pixelId/img.width),originalData[i],originalData[i+1],originalData[i+2],originalData[i+3]);
        pixelArray.push(px);
        pixelId++;
    }
    return pixelArray;
}

//the function remove a random pixel from pixelArray and draws it on editableCnvs
function removeDrawRandomPixel(pixelArray,editableCnvs)
{
    var place=Math.floor(Math.random()*pixelArray.length);
    var px=pixelArray.splice(place,1)[0];
    editableCnvs.drawPixel(px);
}

每次更改时我的主机上的文件都会更新

0 个答案: