/**
* 裁切图片
* @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);
})
第11天 使用js实现一个图片剪裁的功能
最新推荐文章于 2024-04-14 12:13:08 发布