如何使用画布裁剪图像？

HTML canvas元素允许用户在任何网页上绘制图形。它就像一个用于绘制图形的图形容器，代码中使用了 JavaScript。

以下是创建画布的属性。还可以添加更多可选属性。画布在 JavaScript 中通过其 id 引用。

drawImage() 方法：该方法可用于在网页上绘制图像或视频。它还可用于绘制图像的一部分。另一个有用的函数是增加或减少图像的大小。

使用drawImage()方法裁剪图像：为了将源图像裁剪为其目标图像。需要指定 drawImage() 的以下参数。

• image：要裁剪的图像。
• sourceX：源图像的 x 坐标
• sourceY：源图像的 y 坐标。
• sourceW：源图像的宽度。
• sourceH：源图像的高度。
• destinationX：目标图像的 x 坐标。
• destinationY：目标图像的 y 坐标。
• destinationW：目标图像的宽度。
• destinationH：目标图像的高度。

句法：

drawImage(image, sourceX, sourceY, sourceW, sourceH, 
    destinationX,destinationY, destinationW, destinationH)

例子：

javascript

  

    
        How to crop image
        using canvas?
    

  

  
    Source Image
    
  
    Cropped Image
  
    
        HTML5 canvas tag is not 
        supported by your browser.
    
  
    
        window.onload = function () {
            var canvas = document.getElementById("myCanvas");
            var contex = canvas.getContext("2d");
            var img = document.getElementById("myImage");
              
            contex.drawImage(img, 10, 10, 
                300, 175, 0, 0, 100, 175);
        }
    

  

输出：