使用javascript调整图像大小以在canvas createPattern内使用 [英] Resize an image with javascript for use inside a canvas createPattern

问题描述

我已经看到了一些技巧如何调整你想要
在IMG标记中使用的图像，但我想有一个图像变量里面
a Javascript，调整它的大小，然后使用image里面有一个
context.createPattern（image，repeat）。我没有找到任何提示
如何做。

I've seen a few tricks on how you resize an image you want to use inside an IMG-tag but I want to have an image variable inside a Javascript, resize it and then use the image inside a context.createPattern(image, "repeat"). I have not found any hint on how to do that.

你可以在 http://karllarsson.batcave.net/moon.html
上有我想做的图片。

You can find a functional demo at http://karllarsson.batcave.net/moon.html with images on what I want to do.

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

The solution from Loktar looks good. I haven't had the time yet to fix the correct aspect but now I know how to do it. Thank you once again. Here is an working demo http://karllarsson.batcave.net/moon2.html

这是我不想工作的两行，因为我也想这样。

This is the two lines I don't get to work as I want them too.

width = side * 2;

image.height = side * 2;

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

推荐答案

你可以做一个临时画布，并使用所需的尺寸将图像复制到它，然后使用该临时画布作为模式而不是图像本身。

What you can do is make a temporary canvas, and copy the image to it with the dimensions you require, and then use that temporary canvas as the pattern rather than the image itself.

Live Demo

Live Demo

首先创建画布

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

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

现在将图片绘制到其中，使您需要的缩放大小

Now draw the image to it, making the the scaled size you require

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

现在使用刚创建的canvas作为模式

And now use the canvas you just created as the pattern

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

完整代码

创建了更通用的可重用示例

edit created a more generic reusable example

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

这篇关于使用javascript调整图像大小以在canvas createPattern内使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！