使用 javascript 调整图像大小以在画布 createPattern 中使用

我见过一些关于如何调整图像大小的技巧 在 IMG 标签内使用，但我想在里面有一个图像变量 一个 Javascript，调整它的大小，然后使用 a 中的图像 context.createPattern（图像，“重复”）。我还没有找到任何提示 关于如何做到这一点。

您可以在以下位置找到功能演示：http://karllarsson.batcave.net/moon.html http://karllarsson.batcave.net/moon.html带有我想做的事情的图像。

Loktar 的解决方案看起来不错。我还没有时间去修复 正确的方面，但现在我知道该怎么做了。再一次感谢你。这是一个 工作演示http://karllarsson.batcave.net/moon2.html http://karllarsson.batcave.net/moon2.html

这是我无法正常工作的两条线，因为我也想要它们。

图片宽度=边长*2；
image.height = 边长 * 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);                                                 
    }
}

您可以做的是制作一个临时画布，并将具有所需尺寸的图像复制到其中，然后使用该临时画布作为图案而不是图像本身。

现场演示 http://jsfiddle.net/loktar/cLpybwbb/

首先创建画布

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

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

现在将图像绘制到其上，调整为您需要的缩放尺寸

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

现在使用您刚刚创建的画布作为图案

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

完整代码

edit创建了一个更通用的可重用示例

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