使用js实现一个图片剪裁的功能

Answer 1

/** 
 * 裁切图片
 * @param imgUrl 原始图片路径
 * @param x,y,width,height 从点[x, y]开始，将宽度width,高度height的区域裁切下来
 * tips：需要运行于服务器环境下切图片为同域
 */
function clipImage(imgUrl, x, y, width, height) {
    return new Promise((resolve, reject) => {
        let cvs = document.createElement("canvas");
        cvs.width = width;
        cvs.height = height;

        var ctx = cvs.getContext('2d');
        let _img = new Image();
        _img.src = imgUrl;
        _img.onload = () => {
            ctx.drawImage(_img, 0 - x, 0 - y);
            resolve(cvs.toDataURL());
        }
    })
}

clipImage("./img/loginbg.jpg", 100, 100, 300, 400).then(res => {
    let __img = document.createElement("img");
    __img.src = res;
    document.body.appendChild(__img);
})