为你的博客领养一只小猫 - live2d
2019-05-24 •
4 条评论
JS - 解决图片压缩 + IOS下拍照图片翻转问题
2019-01-25 •
评论
核心代码
var file = document.getElementById('#file');
//获取的图片文件
var fileList = file.files;
/**************************************************************************************************/
// 压缩图片需要的一些元素和对象
var reader = new FileReader();
var img = new Image();
// 缩放图片需要的canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
//图片大小
var fileSize = fileList[0].size;
reader.readAsDataURL(fileList[0]);
reader.onload = function(e) {
//e.target.result就是图片的base64地址信息
img.src = e.target.result;
};
img.onload = function(e) {
EXIF.getData(img, function() {
var Orientation = EXIF.getTag(this, 'Orientation');
console.log('方向:' + Orientation);
console.log('大小:' + fileSize/(1024*1024));
var wph = (img.height*1)/(img.width*1);
var hpw = wph.toFixed(2)*1;
var square = 700; //定义画布的大小，也就是图片压缩之后的像素
var imageWidth = 0; //压缩图片的大小
var imageHeight = 0;
var offsetX = 0;
var offsetY = 0;
var hsquare = Math.ceil(square*hpw);
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(isiOS){
if(Orientation === 6){
canvas.width = hsquare;
canvas.height = square;
context.clearRect(0, 0, hsquare, square);
}else if(Orientation === 8){
canvas.width = hsquare;
canvas.height = square;
}else{
canvas.width = square;
canvas.height = hsquare;
context.clearRect(0, 0, square, hsquare);
}
}else{
canvas.width = square;
canvas.height = hsquare;
context.clearRect(0, 0, square, hsquare);
}
if(isiOS){
var degree;
switch(Orientation){
case 3:
degree = 180;
imageWidth = -square;
imageHeight = -hsquare;
break;
case 6:
degree = 90;
imageWidth = square;
imageHeight = -hsquare;
break;
case 8:
degree = 270;
imageWidth = -square;
imageHeight = hsquare;
break;
default:
degree = 0;
imageWidth = square;
imageHeight = hsquare;
}
context.rotate(degree * Math.PI / 180.0);
}else{
if (img.width > img.height) {
imageWidth = square;
imageHeight = hsquare;
offsetX = - Math.round((imageWidth - square) / 2);
} else {
imageHeight = hsquare;
imageWidth = square;
offsetY = - Math.round((imageHeight - hsquare) / 2);
}
}
context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
//压缩处理得到的base64
var blob = canvas.toDataURL('image/jpeg', 1.0);
//base64转blob
var blobs = toBlob(blob);
});
});
//base64转blob
function toBlob(urlData) {
var bytes = window.atob(urlData.split(',')[1]);
// 去掉url的头，并转换为byte
// 处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab],{type : 'image/jpeg'});
}jQuery - textarea 自适应内容高度
2018-12-23 •
评论
<textarea id="textarea"></textarea>
<script>
function makeExpandingArea(el) {
var setStyle = function(el) {
el.style.height = 'auto';
el.style.height = el.scrollHeight + 'px';
// console.log(el.scrollHeight);
}
var delayedResize = function(el) {
window.setTimeout(function() {
setStyle(el);
},
0);
}
if (el.addEventListener) {
el.addEventListener('input',function() {
setStyle(el);
},false);
setStyle(el);
} else if (el.attachEvent) {
el.attachEvent('onpropertychange',function() {
setStyle(el);
});
setStyle(el);
}
if (window.VBArray && window.addEventListener) { //IE9
el.attachEvent("onkeydown",function() {
var key = window.event.keyCode;
if (key == 8 || key == 46) delayedResize(el);
});
el.attachEvent("oncut",function() {
delayedResize(el);
}); //处理粘贴
}
}
makeExpandingArea(textarea);
</script>js 数组被赋值变化后，保留原数据 - $.extend
2018-12-22 •
评论
var a = [1];
console.log(a);//[1]
var b = $.extend(true, [], a);
a = [1,2];
console.log(a);//[1,2]
console.log(b);//[1]ajax - 提交 checkbox
2017-06-12 •
评论
html
<button class="batchdel" id="submitbatchdel" type="submit">
<a href="" onclick="if(confirm('确定要删除数据吗？')) return true;else return false;">批量删除</a>
</button>jQuery - 回车提交
2017-06-08 •
评论
$(document).keyup(function(e){
if(e.keyCode == 13){
$('#submitform').trigger('click');
}
})
$("#submitform").bind('click', function () {
var login = {};
login['username'] = $.trim($("input[name=username]").val());
login['pwd'] = $.trim($("input[name=pwd]").val());
login['code'] = $.trim($("input[name=code]").val());
$('.login-error').html('');
if (login['username'] == '') {
errorDis('请输入用户名/手机/邮箱');
return false;
}
if(login['pwd']=='')
{
errorDis('请输入密码');
return false;
}
if (login['code'] == '') {
errorDis('请输入验证码');
return false;
}
$.ajax({
url: '/login/checkloginmsg',
type: 'POST',
dataType: 'json',
data: login,
success: function (data) {
if (data.code == 200) {
window.location.href = "/main";
} else {
errorDis(data.info);//返回错误提示
return false;
}
}
})
});jQuery - input 提示
2017-06-05 •
评论
jQuery
<script type="text/javascript">
$("#username").click(function(event){
$("#tip-username").show();
event.stopPropagation();//阻止冒泡
});
$("#username").blur(function(){
$("#tip-username").hide();
});
$("body").click(function(){
$("#tip-username").hide();
});
$('#tip-username').click(function(){
return false;
});
</script>jQuery - ajax
2017-06-04 •
评论
jQuery
$.ajax({
url: '/数据处理页面',
type: 'POST',
dataType: 'json',
data: login,
success: function (data) {
if (data.code == 200) {
window.location.href = "/验证成功后的跳转页";
} else {
errorDis(data.info);//返回错误提示
//alert(data.info);
return false;
}
}
})