javascript - 使用 JavaScript 调整图像大小以在 Canvas 中使用 createPattern

Question

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

您可以在 http://karllarsson.batcave.net/moon.html 找到功能演示用图片说明我想做什么。

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

这是我没有按照我的意愿工作的两条线。

image.width = side * 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);                                                 
    }
}

Answer 1

您可以做一个临时 Canvas ，将图像复制到您需要的尺寸，然后使用该临时 Canvas 作为图案而不是图像本身。

Live Demo

首先创建 Canvas

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

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

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

完整代码

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

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