canvas drawImage 放大然后裁剪答案

【问题标题】：canvas drawImage upscale and then cropcanvas drawImage 放大然后裁剪
【发布时间】：2017-08-21 19:52:19
【问题描述】：

使用 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;}

&lt;canvas id="canvas" width=100 height=100&gt;&lt;/canvas&gt;

我已经开始工作的升级部分，但现在我正在查看作物，有人有我可以看到的例子吗？

在重新缩放之前先裁剪有什么好处吗？

【问题讨论】：

标签： html css canvas drawimage

【解决方案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);

但根据您想要获得的具体内容检查目标区域参数。

【讨论】：

【解决方案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
};

【讨论】：