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

/** * 裁切图片* @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);
})

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

[js] 使用js实现一个图片剪裁的功能相关推荐

使用前端js代码开发了一个图片转ico图标的功能
最近给自己的个人图像处理网站butterpig又新增加了一个在线的图片转ico功能,也是一键生成傻瓜式操作. 那么我们为什么需要favicon.ico图标呢? 首先,favicon即为favorite ...
JavaScript写的一个图片的抽奖功能的案例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
《小白H5成长之路50》js与PHP配合完成图片上传功能
"小白!还记得之前我们说过的jQuery中的ajax异步加载数据的方法么?" "记得,之前的代码我这里还有,你看看是不是这个?" 老朱:"恩,没错,通 ...
【matlab】：利用matlab实现QQ的一个图片显示变色功能
QQ有一项功能是这样的,点离图片,图片会变颜色.我下面的代码就是实现了这个功能如图所示,该图片就不是原来的图片的样子了. 实现的思路: 1,经过仔细观察,我发现图片仍旧是三色的,但是白色和黑色好像反 ...
原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
js 下载Base64格式数据图片（兼容主流浏览器）
最近的工作内容和前端有关.需要做一个图片下载的功能,然而后台只提供了byte[] 类型的图片数据,并且返回给前端的是Base64格式图片数据.那么,就遇到了最严重的问题了:浏览器兼容. 展示图片的时 ...
【JS】js常用方法
function obj$(id) //根据id得到对象 function val$(id) //根据id得到对象的值 function trim(str) //删除左边和右边空格 function ...
Web前端实现一个图片放大镜
文章目录图片放大镜效果实现过程一.UI界面主要样式设置二.加载缩略小图三.缩略图事件监听四.实现放大总结固定尺寸在一些电商网站上,经常看到有商品图片被放大查看的功能,包括另外一些图 ...
JS实现选择图片剪裁及保存
JS实现选择图片剪裁及保存以下是一个简单的示例代码,实现了显示一个文件上传框和一个canvas元素.用户可以选择一张图片文件后,该图像将显示在canvas中,并且用户可以通过鼠标拖拽来选取需要剪裁的 ...

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

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

个人简介

主目录

[js] 使用js实现一个图片剪裁的功能相关推荐

最新文章

热门文章