JS—— canvas 加载图片等比例缩放

第一种：等比例缩放图片（没有设置清除画布，所以在第一次上传图片后再上传一次会被覆盖掉）

 

第二种：上传的图片的宽/高会等比例满屏 （设置了清除画布，所以第二次上传图片不会覆盖第一次上传的图片）

有一个问题就是像素小的图片会放在角落上，这时候要设置在画布居中显示。还有一个问题就是，像素小的图片放大了会模糊。

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 = xRate5){ setRate = 5;}
					ctx.drawImage(this, 0, 0, img.width * setRate, img.height*setRate);
				}
			}
		})
	}