JS—— canvas 加载图片等比例缩放
第一种:等比例缩放图片(没有设置清除画布,所以在第一次上传图片后再上传一次会被覆盖掉)
<input type="file" name="" id="inputBox"> <!-- 获取对文件的描述信息 -> 选择文件 -->
<canvas id="avatar"></canvas> <!-- 在画布上加载图片 -->
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById('avatar');
// 检测canvas支持性
if (canvas.getContext) {
var ctx = canvas.getContext('2d'); // 返回一个对象,该对象提供了用在画布上绘图的方法和属性
}else {
document.write("你的浏览器不支持canvas,请升级你的浏览器");
// return
}
// canvas 大小
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight - 102;
// 读取文件数据 -> 显示图片
var inputBox = document.getElementById("inputBox");
inputBox.addEventListener("change", function() {
var reader = new FileReader();
reader.readAsDataURL(inputBox.files[0]); // 发起异步请求
reader.onload = function() {
// 图片加载完后,将其显示在canvas中
var img = new Image();
img.src = this.result;
img.onload = function() {
// 等比例缩放图片
var scale = 1;
var tt = 1000; // 可以根据具体的要求去设定
if (this.width > tt || this.height > tt) {
if (this.width > this.height) {
scale = tt / this.width;
}else {
scale = tt / this.height;
}
}
ctx.width = this.width * scale;
ctx.height = this.height * scale; // 计算等比缩小后图片
ctx.drawImage(this, 0, 0, ctx.width, ctx.height); // 加载图片
}
}
})
}
</script>
第二种:上传的图片的宽/高会等比例满屏 (设置了清除画布,所以第二次上传图片不会覆盖第一次上传的图片)
有一个问题就是像素小的图片会放在角落上,这时候要设置在画布居中显示。还有一个问题就是,像素小的图片放大了会模糊。
read(ctx,canvas.width,canvas.height);
// 读取文件的数据
function read(ctx,canvasWidth, canvasHeight) {
var inputBox = document.getElementById("inputBox");
inputBox.addEventListener("change", function() {
console.log('清除画布');
ctx.clearRect(0,0,canvasWidth,canvasHeight);
var reader = new FileReader();
reader.readAsDataURL(inputBox.files[0]); // 发起异步请求
reader.onload = function() {
// 读取完成后,数据保存在对象的result 属性中
// 图片加载完后,将其显示在canvas中
var img = new Image();
img.src = this.result;
img.onload = function() {
var xRate = canvasWidth / img.width;
var yRate = canvasHeight / img.height;
var setRate = xRate<yRate ? xRate : yRate;
if(setRate>5){ setRate = 5;}
ctx.drawImage(this, 0, 0, img.width * setRate, img.height*setRate);
}
}
})
}