h5裁剪图片
h5裁剪图片
直接效果图
先上干货
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#imgContainer {
width: 100px;
height: 100px;
overflow: hidden;
}
</style>
</head>
<body>
<button id="but">点击</button>
<div id="imgContainer"></div>
</body>
</html>
<script src="./cutScreen.js"></script>
<script>
var url = "./abc.jpg"
, imgContainer = document.getElementById("imgContainer")
, but = document.getElementById("but")
function cb (base64) {
var img = document.createElement("img")
img.src = base64
document.body.append(img)
}
cutimg ({ url , imgContainer , but , cb }) // 重点就在这,url是图片路径,imgContainer是装img的容器,里面不用有img标签,插件会自动生成,but是触发cb函数的,cb函数接受一个参数,是裁剪完的图片(base64)
</script>
插件下载
npm i cutimg_of_jiangji
插件不支持非手机端的。
html打开方式不支持file协议,只能在服务器上跑,推荐使用vscode中的插件live server直接运行测试。
或者github上也有
github地址 https://github.com/jiangji1/cutscreen.git
直接git clone https://github.com/jiangji1/cutscreen.git