ie js html 压缩,H5图片裁剪-压缩-上传-神奇的Croppie.js

Croppie.js之图片裁剪压缩上传

h5图片裁剪, 压缩, 上传, 预览是常见功能, 幸运的是我们有cropp.js这款利器.

1. style

.actions button,

.actions a.btn {

background-color: #189094;

color: white;

padding: 10px 15px;

border-radius: 3px;

border: 1px solid rgba(255, 255, 255, 0.5);

font-size: 16px;

cursor: pointer;

text-decoration: none;

text-shadow: none;

}

.actions button:focus {

outline: 0;

}

.actions .file-btn {

position: relative;

}

.actions .file-btn input[type="file"] {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

opacity: 0;

}

.actions {

padding: 5px 0;

}

.actions button {

margin-right: 5px;

}

.actions .crop{display:none}

2.html

上传

裁剪

3.JavaScript

$(function(){

var $uploadCrop;

function readFile(input) {

if (input.files && input.files[0]) {

var reader = new FileReader();

reader.onload = function (e) {

$uploadCrop.croppie('bind', {

url: e.target.result

});

}

reader.readAsDataURL(input.files[0]);

}

else {

alert("Sorry - you're browser doesn't support the FileReader API");

}

}

$uploadCrop = $('#upload-demo').croppie({

viewport: {

width: 200,

height: 200,

type: 'circle'

},

boundary: {

width: 300,

height: 300

},

showZoomer: false,

});

$('#upload').on('change', function () {

$(".crop").show();

readFile(this);

});

$('.upload-result').on('click', function (ev) {

$uploadCrop.croppie('result', 'canvas').then(function (resp) {

popupResult({

src: resp

});

});

});

function popupResult(result) {

var html;

if (result.html) {

html = result.html;

}

if (result.src) {

html = '';

}

$("#result").html(html);

}

});