Canvas som bitmap

Hva

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 bilde, et img-element. Og motsatt, vi kan kopiere fra et img-element til canvas. Vi skal se på noen av disse mulighetene nedenfor.

img til canvas

Her tar vi utgangspunkt i et bilde som er lastet opp i et img-element på vanlig måte. Vi ønsker å kopierer dette bildet til et canvas-element. Basis funksjonen er slik:

// pick up the image
var img1=document.getElementById("myimage");
// draw in upper-left corner of canvas devicecontent (dc)
dc.drawImage(img1, 0, 0) ;

Koden som kopierer ser slik ut:

function copyToCanvas(imgID,canID){
    var can=document.getElementById(canID);
    var dc=can.getContext('2d');
    // white canvas
    dc.fillStyle = "rgb(255,255,255)";
    dc.fillRect (0, 0, can.width, can.height);    
    // pick up image and draw it
    var img1=document.getElementById(imgID);
    dc.drawImage(img1, 0, 0) ;
}

Merk at funksjonen drawImage kan ha mange parametere. (d for destination and s for source)

drawImage(img, dx,dy)
drawImage(img, dx,dy,dw,dh)
drawImage(img, sx,sy,sw,sh, dx,dy,dw,dh)

På denne måten kan vi plassere vilken del av bildet vi måtte ønske i vilken del av canvas vi måtte ønske, med eller uten skalering.

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 the src for an image element
// from the content of a canvas
function makeImage(canvasID,imageID)
{
    var can = document.getElementById(canvasID);
    var canData=can.toDataURL();
    var im=document.getElementById(imageID);
    im.src=canData;
}

Koden som setter opp canvasen er slik:

var rotimg = new Image();   
rotimg.src = 'bs8.png';

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);
        setTimeout(drawFirstHead,100);
        dc.save();
    } 
    else 
        alert('cannot do canvas');
}

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

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:'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:'deliverbitmap.py',
        async:true,
        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-04-2014