s94-imgclip
Version:
图片裁剪工具
51 lines (50 loc) • 1.55 kB
HTML
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>s94-imgclip测试</title>
<script src="../s94-web/s94.js?debug" type="text/javascript" charset="utf-8"></script>
</head>
<style>
body{font-size: 0.16rem;}
.show img{max-width: 100%;}
</style>
<body>
<p>选择文件 <input type="file" id="file" accept="image/*" ></p>
<p>旋转 <input type="range" ></p>
<p><button onclick="ok()">剪切</button></p>
<p><button onclick="imgclip.clean()">清除</button></p>
<div id="imgclip" style="width: 500px;height: 800px;"></div>
<div class="show"></div>
</body>
<script>
$.rem.setScale().display();
require.debug=1;
var ImgClip = require('s94-imgclip');
var imgclip = new ImgClip(document.querySelector('#imgclip'),{
// ratioWH: 75/128,
outputWH: '300'
});// 第一步、在容器(#imgclip)中构建裁剪工具
$('input[type="file"]').on('change',function(){
var img = new Image();
img.onload = ()=>{
imgclip.start(img); // 第二步、指定需要裁剪的图片，img必须为Image对象
}
img.src = window.URL.createObjectURL(this.files[0]);
this.value = '';
})
//进度条
$('input[type="range"]').on('input',function(){
imgclip.rotate(Math.PI*(50-this.value)/50 );
})
function ok(){
imgclip.toBlob(function(blobData){
$('.show').html('<img src="'+window.URL.createObjectURL(blobData)+'" alt="">');
});
// $('.show').html('<img src="'+imgclip.toBase64()+'" alt="">');
}
for (const key in imgclip) {
console.log(key)
}
</script>
</html>