H5兼容VIdeo
H5让兼容安卓和IOS调用相机
//事件使用onchange ，oninput事件IOS端存在兼容性问题
移动端debug
input file 拍照上传IOS图片旋转问题处理
解决方法：exif.js+canvas
利用exif.js读取照片的拍摄信息，通过Orientation属性
EXIF.getData(imgFile, function() { //imgFile图片数据
var Orientation = EXIF.getTag(this, 'Orientation');
return Orientation //Orientation返回的参数 1 、3 、6 、8
});
Orientation 参数 1、3、6、8 对应所需要旋转的角度
1 0°
3 180°
6 顺时针90°
8 逆时针90°
获取到旋转信息后利用canvas rotate 旋转后使用drawImage绘制图片（需要注意的是旋转后的x，y坐标也会跟随旋转），最后利用toDataURL导出为base64数据（src属性可以直接赋值base64数据）
使用FromData提交表单，包括文件上传
原生
//获取按钮
var btn = document.querySelector('[type=button]');
//绑定事件
btn.onclick = function () {
//获取input标签
var file = document.querySelector('[type=file]');
// 新建FormData对象
var formData = new FormData();
// 取得input标签中的文件。注：input标签中的文件可以选择多个
formData.append('upload', file.files[0]);
//创建XMLHttpRequest，用这个来发送数据
var xhr = new XMLHttpRequest;
/*初始化HTTP请求参数(请求方式,url,是否同步)*/
xhr.open('post', 'file.php');
/*
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
设置请求头的contentType
*/
// 监听上传进度
xhr.upload.onprogress = function (ev) {
// 事件对象
// console.log(ev);
var percent = (ev.loaded / ev.total) * 100 + '%';
console.log(percent);
progress.style.width = percent;
}
xhr.send(formData);
xhr.onreadystatechange = function () {
//status状态为200 表示请求成功，readystate为4表示对象传递完毕或者准备就绪
if(xhr.readyState == 4 && xhr.status == 200) {
}
}
}
jQuery
//绑定提交事件
function upload() {
//获取form表单元素
var f = document.getElementById("myForm");
//使用表单元素来构造FromData
var myform = new FormData(f);
$.ajax({
url : "/Library/test/upload",
type : "post",
dataType : "json",
data : myform,
cache: false, // 不缓存
processData: false, // jQuery不要去处理发送的数据
contentType: false, // jQuery不要去设置Content-Type请求头
success : function(data) {
console.log(data);
}
});
}
参考：https://blog.csdn.net/candy_27/article/details/83961635
html2canvas 5.0 生成图片解决污染模糊问题
var dpr = window.devicePixelRatio;
var canvas = document.createElement('canvas');
canvas.width = window.innerWidth*dpr;
canvas.height = window.innerHeight*dpr;
canvas.getContext('2d').scale(dpr, dpr);
html2canvas($(".page6-box")[0],{
useCORS:true,//启用跨域图绘制
canvas:canvas,//指定自定义canvas -解决图片模糊
onclone:function(cloneDom){
//对克隆出来的dom进行一些操作
},
onrendered:function(canvas){
canvas.toDataURL('image/jpeg');
}
});
css reset
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
iOS系统禁止微信客户端修改字体大小：
body {
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
}
Android 禁止微信客户端修改字体大小：
滚动条默认样式
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
image.png