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);}}})}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！