裁剪图像 Processing.js答案

【问题标题】：Crop image Processing.js裁剪图像 Processing.js
【发布时间】：2012-06-13 18:02:45
【问题描述】：

Processing.js 允许使用以下方法绘制图像：

image(x,y,width,height)

但添加宽度和高度参数只会将图像缩放到该尺寸。我该如何裁剪图像，只在右侧绘制第一个 width 像素，在底部绘制第一个 height 像素？

例如，只绘制 X'ed 部分：

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

【问题讨论】：

标签： javascript canvas processing.js

【解决方案1】：

您可以使用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);
}

这会加载一张图片，然后将其垂直裁剪为一半大小。

【讨论】：

【解决方案2】：

听起来像一个图像精灵：

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

【讨论】：

正如我所说，我正在使用 processing.js 。绘图是在画布上完成的。我希望能够在画布上绘制（如你所说）精灵，这里不涉及 HTML/CSS。

【解决方案3】：

我不知道在处理中执行此操作的方法，但上下文自己的drawImage 支持此https://developer.mozilla.org/en/DOM/CanvasRenderingContext2D#drawImage

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

【讨论】：

查看 Tobi Lehman 的回答，似乎可以正常工作：D 请注意，在处理文件中我没有使用任何上下文。