ridimensionare un'immagine \t con javascript per l'utilizzo all'interno di una tela createPattern

Question

Ho visto alcuni trucchi su come si ridimensiona un'immagine che si desidera utilizzo all'interno di un tag IMG-, ma voglio avere una variabile di immagine all'interno di una Javascript ridimensionarlo e quindi utilizzare l'immagine all'interno di un contesto.createPattern (immagine, "ripetizione"). Non ho trovato alcun suggerimento su come farlo.

È possibile trovare una dimostrazione funzionale a http://karllarsson.batcave.net/moon.html con immagini su ciò che voglio fare.

La soluzione di Loktar sembra buona. Non ho ancora avuto il tempo di correggere l'aspetto corretto ma ora so come farlo. Grazie ancora. Ecco una demo di lavoro http://karllarsson.batcave.net/moon2.html

Si tratta di due linee che non ottengono di lavorare come li voglio troppo.

image.width = side * 2;
image.height = side * 2;

function drawShape() { 
    try { 
     var canvas = document.getElementById('tutorial');     
     var image = new Image();           
     image.src = "http://xxx.yyy.zzz/jjj.jpg";       
     image.width = side * 2;           
     image.height = side * 2;           

     if (canvas.getContext){ 
      var ctx = canvas.getContext('2d');        
      ctx.clearRect(0, 0, canvas.width, canvas.height);    
      ctx.fillStyle = ctx.createPattern(image, "repeat");   
      ctx.beginPath();            
      var centerX = canvas.width/2 - side/2;      
      var centerY = canvas.height/2 - side/2;     
      ctx.rect(centerX, centerY, side, side);      
      ctx.fill();             
     } else { 
      alert('You need Safari or Firefox 1.5+ to see this demo.'); 
     } 
    } catch (err) { 
     console.log(err);             
    } 
} 

Answer 1

Che cosa si può fare è fare una tela temporanea e copiare l'immagine con le dimensioni desiderate e quindi utilizzare quella tela temporaneo come il modello, piuttosto che l'immagine stessa.

Live Demo

Innanzitutto creare la tela

  var tempCanvas = document.createElement("canvas"), 
       tCtx = tempCanvas.getContext("2d"); 

      tempCanvas.width = side*2; 
      tempCanvas.height = side*2; 

Ora disegnare l'immagine ad esso, rendendo il la dimensione in scala si richiede

  tCtx.drawImage(image,0,0,image.width,image.height,0,0,side*2,side*2); 

E ora utilizzare la tela appena creato come il modello

  ctx.fillStyle = ctx.createPattern(tempCanvas, "repeat"); 

codice completa

modificare ha creato un più generico esempio riutilizzabile

function drawPattern(img, size) { 
    var canvas = document.getElementById('canvas'); 

    canvas.height = 500; 
    canvas.width = 500; 

    var tempCanvas = document.createElement("canvas"), 
     tCtx = tempCanvas.getContext("2d"); 

    tempCanvas.width = size; 
    tempCanvas.height = size; 
    tCtx.drawImage(img, 0, 0, img.width, img.height, 0, 0, size, size); 

    // use getContext to use the canvas for drawing 
    var ctx = canvas.getContext('2d'); 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.fillStyle = ctx.createPattern(tempCanvas, 'repeat'); 

    ctx.beginPath(); 
    ctx.rect(0,0,canvas.width,canvas.height); 
    ctx.fill(); 

} 

var img = new Image(); 
img.src = "http://static6.depositphotos.com/1070439/567/v/450/dep_5679549-Moon-Surface-seamless.jpg"; 
img.onload = function(){ 
    drawPattern(this, 100); 
}