裁剪图像Processing.js

时间:2012-06-13 18:02:45

标签: javascript canvas processing.js

Processing.js允许使用以下方式绘制图像:

image(x,y,width,height)

但是增加宽度&高度参数只会将图像缩放到该大小。 如何裁剪图像并仅将第一个width像素绘制到右侧,将第一个height像素绘制到底部?

例如,只绘制X'ed部分:

---------------------------.  
|XXXXXXXXXXXXX             | 
|XXXXXXXXXXXXX             | 
|XXXXXXXXXXXXX             | 
|XXXXXXXXXXXXX             | 
|                          | 
|                          | 
|                          |                            
---------------------------.

3 个答案:

答案 0 :(得分:2)

您可以使用copy function

有效地裁剪图像

以下是一个例子:

PImage oImg;
void setup() {
   oImg = loadImage("postgres.jpeg");
   size(oImg.width, oImg.height); 
}

void draw() {
   background(0);
   int iStart = new Float(oImg.width/2).intValue();
   int iWidth = oImg.width-iStart;
   copy(oImg, iStart,0,iWidth,oImg.height,0,0,iWidth,oImg.height);
}

这会加载图像,然后将图像垂直裁剪为其大小的一半。

答案 1 :(得分:0)

听起来像是一个图像精灵:

#yourImage
{
    width:46px;
    height:44px;
    background:url(yourimage.gif) 0 0;
}

答案 2 :(得分:0)

我不知道如何在Processing中执行此操作,但上下文自己的drawImage支持此https://developer.mozilla.org/en/DOM/CanvasRenderingContext2D#drawImage

context.drawImage(image, x, y, realWidth, realHeight, startX, startY, drawnWidth, drawnHeight)