Javascript画布drawImage与原始图像的界限较大

Question

我在画布上进行图像缩放/裁剪，但我遇到了问题。如果我尝试从生成的图片不完美，那么：

铬中的
• （第2张图片）一切正常
• Opera生成图像，但不正确（第3个）
• Firefox和IE出错。 IndexSizeError: Index or size is negative or greater than the allowed amount

我需要正确生成图像，保持比例，如果图像不完美，那么灰色区域应该是透明的。

图片尺寸为259x194。在示例中，变量具有值：sx = 0, sy = 0, sw = 259, sh = 259, x = 0, y = 0, width = 119, height = 119。问题是我尝试从垂直位置超过194px（＆lt; = 259）的图像中获取像素。如果我将sy更改为图像高度然后生成图像，但比例是错误的。如何保留它们？

ctx.drawImage(resizableBgImage, sx, sy, sw, sh, x, y, width, height);

1. 

2. 

3. 

Answer 1

您可以使用上下文变换（缩放）来缩放具有透明背景的原始图像。

• 保存未缩放的上下文状态。
• 翻译到画布中心
• 将缩放图像偏移一半图像宽度和高度
• 恢复未缩放的上下文状态。

以下是示例代码和演示：http://jsfiddle.net/m1erickson/765Jt/

function drawScaled(img,scaleFactor,canvas,ctx){
    var cw=canvas.width;
    var ch=canvas.height;
    var scaledIW=img.width*scaleFactor;
    var scaledIH=img.height*scaleFactor;

    // save the unscaled context state
    ctx.save();

    // translate to the center of the canvas
    // Note: the 0,0 coordinate is now center-canvas
    ctx.translate(cw/2,ch/2);

    // draw the image using the extended drawImage scaling ability
    // be sure to offset your canvas drawing by half the image size
    // since the 0,0 coordinate is now center-canvas

    ctx.drawImage(img,
        0,0,img.width,img.height,
        -scaledIW/2,-scaledIH/2,scaledIW,scaledIH
    );   
    ctx.restore();

}

Answer 2

我有同样的问题，这是我使用的：

function patchedDrawImage(source, destination, sx, sy, sw, sh, dx, dy, dw, dh) {
var scaled = dw !== undefined;
if (scaled) {
    var wRatio = dw / sw;
    var hRatio = dh / sh;
}
if (sx < 0) {
    dx -= sx;
    sx = 0;
    if (scaled) {
        dw += wRatio * sx;
        sw += sx;   // or sw -= (-sx), same for dw, sh, dh
    }
}
if (sy < 0) {
    dy -= sy;
    sy = 0;
    if (scaled) {
        dh += hRatio * sy;
        sh += sy;
    }
}
if (scaled) {
    if (sx + sw > source.width) {
        dw -= wRatio * (sx + sw - source.width);
        sw -= (sx + sw - source.width);
    }
    if (sy + sh > source.height) {
        dh -= hRatio * (sy + sh - source.height);
        sh -= (sy + sh - source.height);
    }
}
destination.getContext("2d").drawImage(source, sx, sy, sw, sh, dx, dy, dw, dh);   }

请注意，此函数会更改参数，I（和您:)）应该更改。