/**********************************html 代码**************************************************************/
<body>
<div>
<div>
<div>
<input type="file" id="fileInput" name="file" accept="image/*" οnchange="fileSelectFace(this)" />
<p><img id="cardImg" alt="" /></p>
</div>
</div>
</div>
</body>
</html>
/**********************************js 代码**************************************************************/
function fileSelectFace(file) {
var thesrc = window.URL.createObjectURL(file.files[0]);//创建图片地址
appendFile(thesrc);
}
//压缩方法
function appendFile(path) {
var img = new Image();
img.src = path;
img.onload = function () {
var that = this;
//生成比例
var w = that.width,
h = that.height,
scale = w / h;
w = 1024 || w;//1024 调节生成图片质量大小
h = w / scale;
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
$(canvas).attr({ width: w, height: h });
ctx.drawImage(img, 0, 0, w, h);
var base64 = canvas.toDataURL('image/jpeg', 1 || 0.8);
document.getElementById('cardImg').src = base64;//显示到当前页面
}
}
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
