HTML > Canvas >Pixler

Canvas som bitmap

Canvas til canvas | Canvas til image | Canvas til fil til canvas / bilde

Hva

Canvas som en bitmap

Vi kan bruke en rekke verktøy for å genere innhold i et canvas-element. Uansett hvordan innholdet har oppstaått, lasting av bilde, interaktiv manipulasjon eller tegning, eller programmering, så kan vi betrakte innholdet som en bitmap, altså som en rute med pixler. HTML5CanvasTutorials [1] har en del stoff om blandt annet dette.

Dette kan vi bruke til mange ting. Vi kan spare innholdet som en bitmap og vi kan kopiere innholdt over til et bild, et img-element. Vi skal se på noen av disse mulighetene nedenfor.

Canvas til canvas

Her benytter vi oss av to metoder i canvas, getImageData og putImageData:

  var imgData=thecanvas.getImageData(left,top,width,height);
  // do something with imgData
  theOthercanvas.putImageData(imgData,left,top);

Koden som kopierer ser slik ut:

// coy the content of one canvas to another
// manipulating data on the way
function copyData(fromID,toID){
    var fcan=document.getElementById(fromID);
    var tcan=document.getElementById(toID);
    if(fcan.getContext && tcan.getContext)
    {
        var fc=fcan.getContext('2d');
        var tc=tcan.getContext('2d');
        
        // get data
        var imgData=fc.getImageData(0,0,fcan.width,fcan.height);
        // how much we will increase lightness
        var change=70;
        // manipulate all pixels
        for (i=0; i<imgData.width*imgData.height*4;i+=4)
        {
            imgData.data[i]  =Math.min(imgData.data[i]+change,255);        //red
            imgData.data[i+1]=Math.min(imgData.data[i+1]+change,255);    //green
            imgData.data[i+2]=Math.min(imgData.data[i+2]+change,255);    //blue
            imgData.data[i+3]=255;                                        //alfa
        }
        // put it into the other canvas
        tc.putImageData(imgData,0,0);
    }    
    else 
    {alert('cannot do canvas');}
}

Hvis du vil se hvordan dataene, RGBA for hvert pixel, for originalbildet ser ut så

Canvas til image

Her benytter vi oss av en metode i canvas, toDataURL():

  var canvas = document.getElementById(canvasID);
  document.getElementById(imageID).src=canvas.toDataURL();

(og etterpå kan du høyreklikke på bildet for å spare det)

Koden som kopierer ser slik ut:

// making thye src for an image element
// from the content of a canvas
function makeImage(canvasID,imageID)
{
    var canvas = document.getElementById(canvasID);
    document.getElementById(imageID).src=canvas.toDataURL();
}

Koden som setter opp canvasen er slik:

var rotimg = new Image();   
rotimg.src = 'http://www.it.hiof.no/~borres/allround/selfimages/bs1.gif';

function drawFirstHead()
{
    var canvas = document.getElementById('original2');
    if (canvas.getContext)
    {
        var dc = canvas.getContext('2d');
        dc.restore();
        dc.fillStyle="rgb(256,256,256)";
        dc.fillRect(0,0,100,100);
        dc.translate(50,50);        
        dc.rotate(0.05);
        dc.drawImage(rotimg, -25, -25, 50, 50);
        dc.translate(-50,-50);
        //if(angle < 90)
            setTimeout(drawFirstHead,100);
        dc.save();
    } 
    else 
    {
          // canvas-unsupported
          alert('cannot do canvas');
    }
}

Hvis du vil se de dataene som beskriver bildet og som settes som src i img-elementet så

Canvas til fil til canvas / bilde

Vi kan i prinsipp oppbevare pixeldata for en canvas enten som pixeldata slik vi får tak i dem med getImageData eller vi kan lagre dem slik vi får tak i dem med toDataURL. Vi velger den siste varianten og skriver kode som bruker AJAX til å spare en canvas, hente data tilbake fra fil og kopiere til en ny canvas og et bilde.

Koden som tar seg av sparing og lasting er slik

// save the content of a canvas
// use ajax
function saveData(cid)
{
    var canvas = document.getElementById(cid);
    var S=canvas.toDataURL();
    // hide ;
    S=S.replace(';','|');
    $.ajax({
        url:'http://www.it.hiof.no/~borres/cgi-bin/canvas/pixels/receivebitmap.py',
        data:'image='+S,
        type:'POST',
        success:function(data, textStatus, jqXHR)
        {
            document.getElementById('dump').innerHTML='ok';
        },
        error:function(data, textStatus, jqXHR)
        {
            document.getElementById('dump').innerHTML=textStatus+' / '+data;
        }
    });
}
// load  data into a canvas and an image element
// use ajax
function loadData(cid,imid)
{
    $.ajax({
        url:'http://www.it.hiof.no/~borres/cgi-bin/canvas/pixels/deliverbitmap.py',
        async:false,
        dataType:'text',
        success:function(data, textStatus, jqXHR)
        {
            // reset ;
            data=data.trim().replace('|',';');
            // reestablish lost +
            data=data.replace(/ /g,'+');
            // prepare the canvas
            loadCanvas(cid,data);
            // prepare the image
            document.getElementById(imid).src=data;
        },
        error:function(data, textStatus, jqXHR)
        {
            document.getElementById('dump').innerHTML=textStatus+' / '+data;            
        }
        });
}
// prepare a canvas with data that describes the src of an image
function loadCanvas(cid,dataURL) {
    var canvas = document.getElementById(cid);
    var context = canvas.getContext("2d");
    // load image from data url format
    var im = new Image();
    im.onload=function(){
        context.drawImage(im,0,0,canvas.width,canvas.height);
    }
    im.src = dataURL;
}

Referanser

Canvas html5canvastutorials.com www.html5canvastutorials.com/ 02-10-2011

Vedlikehold

B. Stenseth, juli 2012

( Velkommen ) HTML > Canvas >Pixler ( Zoom )