调整图像大小 ；使用javascript在canvas createPattern中使用

我已经看到了一些调整图像大小的技巧 在IMG标记中使用，但我希望在其中包含一个image变量 一个Javascript，调整它的大小，然后在 createPattern（图“repeat”）。我没有发现任何暗示 关于如何做到这一点

您可以在以下位置找到功能演示： 在我想做的事情上有图片

Loktar的解决方案看起来不错。我还没来得及修好机器 正确的方面，但现在我知道怎么做了。再次感谢你。这是一个 工作演示

这两行我也不想用，因为我也想用

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

---

您可以做的是制作一个临时画布，并将图像按所需的尺寸复制到其中，然后将该临时画布用作模式，而不是图像本身

首先创建画布

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

---

还有一种方法对我很有效：

const ctx: CanvasRenderingContext2D;
const patternAsBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGRjIyRTA3RDgyNkUxMUU5ODQ1QUM2QjE5RUMzRTMwRCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGRjIyRTA3RTgyNkUxMUU5ODQ1QUM2QjE5RUMzRTMwRCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkZGMjJFMDdCODI2RTExRTk4NDVBQzZCMTlFQzNFMzBEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkZGMjJFMDdDODI2RTExRTk4NDVBQzZCMTlFQzNFMzBEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+y2y13AAAAV1JREFUeNqc0kFLAkEUB/B9b1ZR1m4FQZeocx2MYI3CxC8QmVBfJAjqVLQQfY/MFI+dREpQIeqQxwgiCrq72661M9Nb0ZKo3dU5zOU//Hj/3Qep04YUn04Ludxq7mdflYCzfFKbprdnLKatc9u8Z1zZbBxkHwc58q79gpGYLgBKqaPqTBB4s5t5Ewx2XNu8YvHEImeysnJYnf8GoyCz/MO+ZXFN56iUw6JSxW333SJ0YoEzpbJq1Oe8DLxLN2qzQoqSGkss8a41Un1wZUGNa2mq346A3IBB6KGSUOahdqeFEsZAO20YDnXjktDomKgoUMM0/A6HJ3UJZSNOCn+FPVSIMv3FpOuYTSaUfGj0v/AH1ZLcsZoYEgW/sF+/TPUJNUOh6Be29jJPAJijlbgjNEV7ehG0p6CEOIP62K/v900xXyyyILA3KWJO2FbgpPj8MHm+dnw9FRp1/Ot/CTAAd/XmF3ta0fUAAAAASUVORK5CYII=';
const imagePattern = new Image();
imagePattern.onload = () => {
    const pattern: CanvasPattern = ctx.createPattern(imagePattern, 'repeat-y');
    const svgMatrix: SVGMatrix = document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix();

    svgMatrix.scale(0.5);
    pattern.setTransform(svgMatrix);
}
imagePattern.src = patternAsBase64;

---

基本上与将变换矩阵设置为该值相同（下面的内容）（但是注意！patterns setTransform方法等待SVGMatrix。 这在Chrome中也同样适用于我（但TypeScript当然抱怨）：

请记住，在绘制图案之前，您可能还需要翻译画布，否则它无法从您希望的地方开始

const offset_x: number = positionXOfElement;
const offset_y: number = positionYOfElement;

// offset
ctx.translate(offset_x, offset_y);

// draw
ctx.fillStyle = pattern;
roundRect.fill();
//ctx.fillRect(0, 0, 300, 300);

// undo offset
ctx.translate(-offset_x, -offset_y);

---

你收到了什么错误？你还尝试了什么？图像没有调整大小，请参见演示。没有实际的错误。我尝试了其他一些我在这里和那里发现的东西，但没有一个有效。我没有一个列表，列出了我尝试过的东西。非常棒的方法。我试图在创建图案之前调整图像大小。创建临时al canvas做到了。谢谢，请将此答案标记为正确，因为这是用图像填充画布的唯一方法，确保图像将100%填充画布（无需重复）

const offset_x: number = positionXOfElement;
const offset_y: number = positionYOfElement;

// offset
ctx.translate(offset_x, offset_y);

// draw
ctx.fillStyle = pattern;
roundRect.fill();
//ctx.fillRect(0, 0, 300, 300);

// undo offset
ctx.translate(-offset_x, -offset_y);