Bence son IMG-etiketi içinde kullanım istediğiniz bir görüntüyü yeniden boyutlandırmak nasıl birkaç hile gördüm

Question

bir tuval createPattern iç kullanım için javascript ile bir görüntü \t yeniden boyutlandırma ama JavaScript içine bir görüntü değişkeni sahip olmak istiyorum , yeniden boyutlandırın ve görüntüyü bir context.createPattern (image, "repeat") içinde kullanın. Bunun nasıl yapılacağına dair hiçbir ipucu bulamadım .

İşlevsel bir demoyu http://karllarsson.batcave.net/moon.html adresinde bulabildiğim resimlerle bulabilirsiniz.

Loktar'ın çözümü iyi görünüyor. doğru yönünü düzeltmek için henüz zamanım olmadı ama şimdi nasıl yapacağımı biliyorum. Tekrar teşekkürler. İşte bir çalışan demo http://karllarsson.batcave.net/moon2.html

Ben de onları istemediğim gibi işe yaramayacağım iki satır.

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

Ne yapabilirsiniz desen ziyade resmin kendisi kadar o geçici tuval kullanmak sonra geçici bir tuval yapmak ve size gereken boyutları ile kendisine görüntüyü kopyalamak ve olduğunu.

Live Demo

İlk kullanmak artık tuval sen ölçekli boyutu

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

gerektiren yapım

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

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

Şimdi buna resim çizmek tuval oluşturmak Ve sadece desen olarak oluşturuldu

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

Tam kod

düzenlemek daha genel yeniden örnek

oluşturulan

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); 
} 

aldığınız hangi hataları