console
let downimg = ''
let imgw = 200
let imgh = 200
let tailW = 200
let tailH = 200
let tailX = 0
let tailY = 0
$(".checkbox").attr("checked",true)
$(".saveImg").on("click", function() {
if (downimg) {
let img = saveImg(downimg)
let type = $(".selectImg").val()
let name = $(".imgName").val() || 'test'
if(type == 'jpg'){
download(img.src, name + ".jpg", "image/jpg");
}else if(type == 'png'){
download(img.src, name + ".png", "image/png");
}
}
})
$(document).on("keyup",function(e){
console.log(e.keyCode)
switch(e.keyCode){
case 37:
$("#img").cropper('move', -1, 0)
break;
case 38:
$("#img").cropper('move', 0, 1)
break;
case 39:
$("#img").cropper('move', 1, 0)
break;
case 40:
$("#img").cropper('move', 0, -1)
break;
}
})
$(".scaleInit").on("click", function() {
$("#img").cropper('reset')
})
$(".magnify").on("click", function() {
$("#img").cropper('zoom', 0.1)
})
$(".shrink").on("click", function() {
$("#img").cropper('zoom', -0.1)
})
$(".up").on("click", function() {
$("#img").cropper('move', 0, 1)
})
$(".bottom").on("click", function() {
$("#img").cropper('move', 0, -1)
})
$(".left").on("click", function() {
$("#img").cropper('move', -1, 0)
})
$(".right").on("click", function() {
$("#img").cropper('move', 1, 0)
})
$(".openImg").on("click", function() {
$("#addImg").click()
})
$(".previewImg").on("click",function(){
$("#img").cropper('setCropBoxData',{width:500})
var a = $("#img").cropper('getCropBoxData')
console.log(a)
})
$("#addImg").on("change", function(e) {
var file = e.target.files[0]
fr = new FileReader();
$(".imgName").val( file.name.replace(/\..{3}$/,'') )
fr.onload = function(e) {
if (!$("#img").attr("src")) {
$("#img").attr("src", e.target.result)
} else {
$("#img").attr("src", e.target.result)
$("#img").cropper('replace', e.target.result)
}
let img = new Image()
img.src = e.target.result
img.onload = function() {
imgw = img.width
imgh = img.height
$(".source-width").html(img.width)
$(".source-height").html(img.height)
$(".source-size").html( (parseInt(file.size)/1024).toFixed(2) + 'kb' )
$("#imgWidth").val( img.width )
$("#imgHeight").val( img.height )
let obj = setWh(imgw, imgh)
run()
$(document).trigger("resize")
$("#img").cropper('reset')
tailW = $("#tailorWidth").val()
tailH = $("#tailorHeight").val()
$("#img").cropper('setCropBoxData',{width: parseInt(tailW),height: parseInt(tailH) } )
}
};
fr.readAsDataURL(file);
})
$(".tailSize").on("keyup", function(e) {
console.log(222)
if( $(".tailSize .checkbox").is(":checked") ){
console.log(11)
let w = parseInt( $(".source-width").text() )
let h = parseInt( $(".source-height").text() )
let scalew = (w / h).toFixed(2)
if( e.target === $("#tailorWidth").get(0) ){
let height = parseInt( $("#tailorWidth").val() ) / scalew
$("#tailorHeight").val( parseInt(height) )
}else if( e.target === $("#tailorHeight").get(0) ){
let width = parseInt( $("#tailorHeight").val() ) * scalew
$("#tailorWidth").val( parseInt(width) )
}
}
tailW = $("#tailorWidth").val()
tailH = $("#tailorHeight").val()
tailW = parseInt(tailW)
tailH = parseInt(tailH)
console.log(tailW,tailH)
$("#img").cropper('setAspectRatio', tailW / tailH )
$("#img").cropper('setCropBoxData',{width: tailW,height: tailH } )
})
$(".imgSize").on("keyup", function(e) {
if( $(".imgSize .checkbox").is(":checked") ){
let w = parseInt( $(".source-width").text() )
let h = parseInt( $(".source-height").text() )
let scalew = (w / h).toFixed(2)
if( e.target === $("#imgWidth").get(0) ){
let height = parseInt( $("#imgWidth").val() ) / scalew
$("#imgHeight").val( parseInt(height) )
}else if( e.target === $("#imgHeight").get(0) ){
let width = parseInt( $("#imgHeight").val() ) * scalew
$("#imgWidth").val( parseInt(width) )
}
}
imgw = $("#imgWidth").val()
imgh = $("#imgHeight").val()
})
$(".tailStart").on("keyup", function() {
tailX = $("#tailorX").val() || 0
tailY = $("#tailorY").val() || 0
$("#img").cropper('setCropBoxData', {
top: parseInt(tailY),
left: parseInt(tailX)
})
})
function run() {
$("#img").cropper({
aspectRatio: imgw / imgh,
crop: function(e) {
$("#currentX").val(e.x)
$("#currentY").val(e.y)
$("#currentW").val(e.width)
$("#currentH").val(e.height)
var img = $("#img").get(0)
imgw = $("#imgWidth").val()
imgh = $("#imgHeight").val()
var cvs = ImageToCanvas(img, e.x, e.y, e.width, e.height)
var new_img = canvasToImage(cvs, parseInt(imgw), parseInt(imgh))
downimg = new_img
}
})
}
function setWh(imgw, imgh) {
if( 200 < imgw < 800 && 100 < imgh < 800 ){
$(".img-source").css({
width: imgw,
height: imgh,
})
}
if (imgw < 200) {
let scale = 200 / imgw
let h = imgh * scale
imgh = h.toFixed(2)
imgw = 200
$(".img-source").css({
width: 200,
height: h.toFixed(2),
})
}
if (imgh < 100) {
let scale = 200 / imgh
let w = imgw * scale
imgw = w.toFixed(2)
imgh = 100
$(".img-source").css({
width: w.toFixed(2),
height: 100,
})
}
if (imgw > 800) {
let scale = imgw / 800
let h = imgh / scale
imgh = h.toFixed(2)
imgw = 800
$(".img-source").css({
width: 800,
height: h.toFixed(2),
})
}
if (imgh > 800) {
let scale = imgh / 800
let w = imgw / scale
imgw = w.toFixed(2)
height = 800
$(".img-source").css({
width: w.toFiexd(2),
height: 800,
})
}
$("#tailorWidth").val( parseInt(imgw) )
$("#tailorHeight").val( parseInt(imgh) )
return {imgw, imgh}
}
function ImageToCanvas(image, x, y, w, h) {
imgw = $("#imgWidth").val()
imgh = $("#imgHeight").val()
var canvas = document.createElement("canvas");
canvas.width = parseInt(imgw) || w;
canvas.height = parseInt(imgh) || h;
canvas.getContext("2d").drawImage(image, x, y, w, h, 0, 0, canvas.width, canvas.height);
return canvas;
}
function canvasToImage(canvas, w, h) {
var image = new Image();
image.width = w
image.height = h
image.crossOrigin = "*";
image.src = canvas.toDataURL();
return image;
}
function saveImg(img) {
var canvas = document.createElement("canvas");
canvas.width = parseInt($("#imgWidth").val())
canvas.height = parseInt($("#imgHeight").val())
canvas.getContext("2d").drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
return canvasToImage(canvas, canvas.width, canvas.height)
}
function dataURItoBlob(base64Data) {
var byteString;
if (base64Data.split(',')[0].indexOf('base64') >= 0) {
byteString = atob(base64Data.split(',')[1]);
} else {
byteString = unescape(base64Data.split(',')[1]);
}
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {
type: mimeString
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片裁剪</title>
<link href="https://cdn.bootcss.com/tether/1.4.0/css/tether.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.bootcss.com/cropper/3.0.0-rc/cropper.css">
<link href="https://cdn.bootcss.com/bootstrap-modal/2.2.6/css/bootstrap-modal-bs3patch.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-modal/2.2.6/css/bootstrap-modal.css" rel="stylesheet">
<link rel="stylesheet" href="css/img.css">
</head>
<body>
<div class="container wrap">
<div class="setting-img">
<div class="module-size imgSize">
<h6>当前信息</h6>
<label for=""><span class="input-text">x</span><input readonly id="currentX" value="0" class="form-control" type="text"></label>
<label for=""><span class="input-text">y</span><input readonly id="currentY" value="0" class="form-control" type="text"></label>
<label for=""><span class="input-text">宽</span><input readonly id="currentW" value="0" class="form-control" type="text"></label>
<label for=""><span class="input-text">高</span><input readonly id="currentH" value="0" class="form-control" type="text"></label>
<p>源文件宽度: <span class="source-width">0</span>px</p>
<p>源文件高度: <span class="source-height">0</span>px</p>
<p>源文件大小: <span class="source-size">0</span></p>
</div>
<div class="module-size imgSize">
<h6>保存图片</h6>
<label for=""><span class="input-text">宽</span><input id="imgWidth" value="200" class="form-control" type="text"></label>
<label for=""><span class="input-text">高</span><input id="imgHeight" value="200" class="form-control" type="text"></label>
<label for=""><input class="checkbox" type="checkbox" >按比例缩放</label>
<label>
<span class="input-text">类型</span>
<select class="form-control selectImg">
<option value="jpg">.jpg</option>
<option value="png">.png</option>
</select>
</label>
<label><span class="input-text">名称</span><input class="form-control imgName" type="text"></label>
</div>
<div class="module-size tailStart">
<h6>裁剪起点</h6>
<label for=""><span class="input-text">X</span><input id="tailorX" value="0" class="form-control" type="text"></label>
<label for=""><span class="input-text">Y</span><input id="tailorY" value="0" class="form-control" type="text"></label>
</div>
<div class="module-size tailSize">
<h6>裁剪大小</h6>
<label for=""><span class="input-text">宽</span><input id="tailorWidth" value="200" class="form-control" type="text"></label>
<label for=""><span class="input-text">高</span><input id="tailorHeight" value="200" class="form-control" type="text"></label>
<label for=""><input class="checkbox" type="checkbox" >按比例缩放</label>
</div>
</div>
<div class="right-main">
<div>
<span class="btn btn-danger openImg">打开图片</span>
<span class="btn btn-danger saveImg">保存</span>
<span class="btn btn-danger previewImg">预览</span>
<span class="btn btn-danger scaleInit">还原</span>
<span class="btn btn-danger magnify">放大</span>
<span class="btn btn-danger shrink">缩小</span>
<span class="btn btn-danger up">上移</span>
<span class="btn btn-danger bottom">下移</span>
<span class="btn btn-danger left">左移</span>
<span class="btn btn-danger right">右移</span>
<input type="file" id="addImg" style="display:none;">
</div>
<div class="line"></div>
<div class="row img-wrap">
<div class="img-source">
<img id="img" src="" alt="">
</div>
</div>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/cropper/3.0.0-rc/cropper.min.js"></script>
<script src="https://cdn.bootcss.com/downloadjs/1.4.7/download.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-modal/2.2.6/js/bootstrap-modal.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-modal/2.2.6/js/bootstrap-modalmanager.min.js"></script>
<script src="./index.js"></script>
</body>
</html>
p{
margin:0;
}
.wrap{
margin:10px auto;
border:1px solid #999;
padding:10px;
border-radius:4px;
display:flex;
.btn{
cursor:pointer;
}
}
.line{
height:1px;
background-color:#e8e8e8;
margin:10px 0;
}
.setting-img{
margin:0;
width:280px;
.module-size{
display:block;
height:auto;
margin:5px;
padding:10px;
border-radius:4px;
border:1px solid #e8e8e8;
h6{
display:block;
text-align:center;
}
label{
display:block;
}
.input-text,input,.form-control{
display:inline-block;
width:80%;
}
.selectImg{
width:78%;
padding:0 5px;
}
.checkbox{
width:20%;
}
.input-text{
text-align: center;
width:20%;
}
}
}
.right-main{
flex-grow:1;
display:flex;
flex-direction:column;
}
.img-wrap{
flex-grow: 1;
text-align: center;
width:100%;
margin:10px auto;
padding:0;
display:flex;
justify-content: center;
align-items: center;
.img-source{
max-width:100%;
}
#img{
width:100%;
}
}