如何在不显示原始图像的情况下缩放图像以填充图案

Question

我根据这个主题的主题提出了适合我需要的东西。 事实证明，为了缩放图像以进行图案填充，您需要 2 个画布。第一个画布创建在第二个画布中使用的缩放图像。我发现的所有示例都显示了两个画布，但我只想显示第二个画布
截图：

  var c = document.getElementById("DrawQuote");
  var ctx = c.getContext("2d");
  ctx.clearRect(10, 10, c.width, c.height); 

然后ctx上下文用来画一些矩形和多边形，我省略了代码
然后我需要用缩放的图像图案绘制一个矩形
截图：

  // create the canvas with scaled image
  var imgtoscale = new Image();
  imgtoscale.src = "blah.jpg";
  var canvas1 = document.getElementById("TempCanvas");
  var ctx1 = canvas1.getContext("2d");
  canvas1.width = imgtoscale.width / Scale / 4;
  canvas1.height = imgtoscale.height / Scale / 4;
  ctx1.drawImage(imgtoscale, 0, 0, canvas1.width, canvas1.height);

  // draw a rectangle filled with the scaled image from above
  // ctx is my main canvas, the one I want to display
  ctx.fillStyle = ctx.createPattern(canvas1, "repeat");
  ctx.fillRect(400, 40, 300, 300);

显示 2 张图片：
1-将图像缩放到 TempCanvas 元素
2-DrawQuote 元素具有缩放填充图案的矩形

但我只想显示 DrawQuote 元素

Answer 1

不确定你看到了什么“线程”，但我猜他们显示第二个画布只是为了弄清楚发生了什么，但是，你真的不需要在文档中附加第二个画布，它可以保持“屏幕外” "：

// the only one visible
var canvas = document.getElementById( 'canvas' );
var ctx = canvas.getContext( '2d' );
var Scale = 2;
var imgtoscale = new Image();
imgtoscale.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Woodward_Iowa_Tornado_Damage.JPG/1024px-Woodward_Iowa_Tornado_Damage.JPG";
imgtoscale.onload = function() {

  // we create a new canvas element
  var canvas1 = document.createElement( 'canvas' );
  var ctx1 = canvas1.getContext( '2d' );
  canvas1.width = imgtoscale.width / Scale / 4;
  canvas1.height = imgtoscale.height / Scale / 4;
  ctx1.drawImage( imgtoscale, 0, 0, canvas1.width, canvas1.height );

  // draw a rectangle filled with the scaled image from above
  // ctx is my main canvas, the one I want to display
  ctx.fillStyle = ctx.createPattern( canvas1, 'repeat' );
  ctx.fillRect( 100, 100, 300, 300 );
};

canvas { border: 1px solid }

<canvas id="canvas" width="500" height="500"></canvas>

现在请注意，这些线程错过的是 fillStyle 依赖于上下文的当前转换矩阵，因此您甚至不需要第二个画布来做您想做的事情：

首先声明您希望以正常比例填充的路径，然后将上下文比例设置为您想要的，最后填充。

// the only canvas
var canvas = document.getElementById( 'canvas' );
var ctx = canvas.getContext( '2d' );
var Scale = 2;
var imgtoscale = new Image();
imgtoscale.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Woodward_Iowa_Tornado_Damage.JPG/1024px-Woodward_Iowa_Tornado_Damage.JPG";
imgtoscale.onload = function() {
  // create the CanvasPattern directly from the <img>
  ctx.fillStyle = ctx.createPattern( imgtoscale, 'repeat' );
  // declare your path to fill
  ctx.beginPath();
  ctx.rect( 100, 100, 300, 300 );
  // change the scaling (of the fillStyle)
  ctx.scale( 1 / Scale / 4, 1 / Scale / 4 );
  ctx.fill();
  // reset back to default?
  ctx.setTransform( 1, 0, 0, 1, 0, 0 );
};

canvas { border: 1px solid }

<canvas id="canvas" width="500" height="500"></canvas>