Question

使用drawImage，我尝试使用1280x720的图像执行以下操作...

将其升级为1920x1080
裁剪，以便只有600x1080来自中心

到目前为止，我有这个......

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

        img=new Image();
        img.onload=function(){
            canvas.width=1920;
            canvas.height=1080;
            ctx.drawImage(img,0,0,img.width,img.height,0,0,1920,1080);
        }
        img.src="https://dummyimage.com/1280x720/000/fff";
        //img.src="https://dummyimage.com/1920x1080/000/fff";

        body{ background-color: ivory; }
        canvas{border:1px solid red;}

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

升级部分我已经开始工作，但现在我正在看作物，任何人都有一个我能看到的例子吗？

在重新缩放之前先裁剪是否有任何好处？

Answer 1

ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 1920, 1080);

类似的东西：

x = (img.width - 600) / 2;
y = (img.height - 1080) / 2;
ctx.drawImage(img, x, y, 600, 1080, 0, 0, 1920, 1080);

但请检查目标区域参数，具体取决于您想要获得的内容。

Answer 2

剪裁图片以适合画布

画布将为您剪辑图像。

默认情况下，所有渲染都将剪辑区域设置为画布大小。因为无论内容的大小如何都执行剪辑（必须根据剪辑区域检查所有内容并且在硬件（GPU）中完成），渲染完整图像比渲染图像的一部分要快一些。

 ctx.drawImage(image,x,y); // is the quicker function
 ctx.drawImage(image,ix,iy,iw,ih,x,y,w,h); // the slower function

注;当渲染的可见目标内容明显小于图像源

时，情况并非如此

因此，要将图像裁剪为较小的画布，您只需要找到中心，然后将图像的大小设置为远离该中心的一半。

ctx.drawImage(
    image,      // image to render
    (ctx.canvas.width - image.width) / 2,  // center sub half image width
    (ctx.canvas.height - image.height) / 2 // center sub half image height
);

如果您需要首先进行缩放，则以下内容将渲染任何尺寸的图像以适合1080高度。

const imgW = 1920;
const imgH = 1080;
ctx.drawImage(
    image,      // image to render
    (ctx.canvas.width - imgW) / 2,  // center sub half image display width
    (ctx.canvas.height - imgH) / 2,  // center sub half image display height
    imgW, imgH
);

裁剪图像

如果您想保存内存并裁剪图像，请使用画布来保存裁剪后的图像。

function cropImageCenter(image,w,h){
    const c = document.createElement("canvas");
    c.width = w;
    c.height = h;
    const ctx = c.getContext("2d");
    ctx.drawImage(image,(w - image.width) / 2, (h - image.height) / 2);
    return c;
}

var img = new Image;
img.src = "imageURL1280by720.jpg";
img.onload = () => { 
     img = cropImageCenter(img, 600, 1080); 
     ctx.drawImage(img,0,0); /// render cropped image on to canvas
};

或升级和裁剪

function scaleCropToHeight(image,w,h){
    const c = document.createElement("canvas");
    c.width = w;
    c.height = h;
    const scale = h / image.height;
    const ctx = c.getContext("2d");
    ctx.drawImage(
        image,
        (w - image.width * scale) / 2, 
        (h - image.height * scale) / 2,
        image.width * scale,
        image.height * scale
    );
    return c;
}

var img = new Image;
img.src = "imageURL1920by1080.jpg";
img.onload = () => { 
     img = scaleCropToHeight(img, 600, 1080);
     ctx.drawImage(img,0,0); /// render cropped image on to canvas
};

画布drawImage高档然后裁剪

2 个答案:

剪裁图片以适合画布

裁剪图像