Nuxt项目部署注意事项
在Nuxt项目部署的时候需要注意nginx配置问题
林氏智造 于 2014-06-06 发布 49241 人已阅
<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput" class="sign_file"/>
注意:capture="camera"属性只有在iphone里面的浏览器才能识别出摄像头,安卓系列手机有些内置的浏览器可以,不过大多都不行。
function drawOnCanvas(file) {
var reader = new FileReader();
reader.onload = function (e) {
var dataURL = e.target.result,
canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d'),
img = new Image();
img.onload = function() {
var square = 320;
canvas.width = square;
canvas.height = square;
var context = canvas.getContext('2d');
context.clearRect(0, 0, square, square);
var imageWidth;
var imageHeight;
var offsetX = 0;
var offsetY = 0;
if (this.width > this.height) {
imageWidth = Math.round(square * this.width / this.height);
imageHeight = square;
offsetX = - Math.round((imageWidth - square) / 2);
} else {
imageHeight = Math.round(square * this.height / this.width);
imageWidth = square;
offsetY = - Math.round((imageHeight - square) / 2);
}
context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
var base64 = canvas.toDataURL('image/jpeg',0.5);
$('#j_thumb').val(base64.substr(22));
};
img.src = dataURL;
};
reader.readAsDataURL(file);
}
FileReader对象是用来解析file控件获取的本地图片地址的,具体介绍请百度一下。把解析好的地址设置给IMG标签的SRC属性,然后通过canvas对象把图片绘制; 在这过程中就有个等比缩放的算法,再用drawImage方法把图像画到canvas中。
通过 canvas.toDataURL('image/jpeg',0.5)就可以获取到base64编码值,然后你就可以按照传统的POST或者AJAX方式处理了。
document.querySelector('input[type=file]').onchange = function () {
var file = input.files[0];
drawOnCanvas(file);
};
$base64 = $_POST['formFile'];
$IMG = base64_decode( $base64 );
file_put_contents('1.png', $IMG );
与传统的上传图片不同,这时候后台需要用base64_decode解码
在Nuxt项目部署的时候需要注意nginx配置问题
当前项目对字体要求很高,之前对font-family这个属性没怎么仔细去研究它,现在整理了一个通用方案适合大多数网站使用。
React+webpack 组合已经成为开发react的经典搭配,把常用的webpack配置文件和一些react的常用代码规范记录下方便以后开发使用
gulp 前端自动化代码,根据自己的项目需求编写,包括压缩合并css,压缩合并js,雪碧图,版本号插入等功能
参照Yslow-23条规则让你的网站更快
用图片做图标会加大页面的大小,现在能用CSS写图标就用CSS写,维护起来也方便加载速度也快