html需要一个上传的input,一个canvas
<input type="file" id="img"/><br /><br /><br />
<canvas id="canvas"></canvas>
input是用来上传图片的,而canvas则是用来展示上传的图片的,由于上传的图片获取的路径是经过保护的假路径,所以需要经过特殊处理之后,在由canvas展示
js代码:
var image;
img.onchange = function () {
let file = document.querySelector('input[type=file]').files[0] // 获取选择的文件,这里是图片类型
let reader = new FileReader()
reader.readAsDataURL(file) //读取文件并将文件以URL的形式保存在resulr属性中 base64格式
reader.onload = function(e) { // 文件读取完成时触发
let result = e.target.result // base64格式图片地址
image = new Image();
image.src = result // 设置image的地址为base64的地址
image.onload = function(){
var canvas = document.querySelector("#canvas");
var context = canvas.getContext("2d");
canvas.width = image.width; // 设置canvas的画布宽度为图片宽度
canvas.height = image.height;
context.drawImage(image, 0, 0, image.width, image.height) // 在canvas上绘制图片
//let dataUrl = canvas.toDataURL('image/jpeg', 0.92) // 0.92为压缩比,可根据需要设置,设置过小会影响图片质量
// dataUrl 为压缩后的图片资源,可将其上传到服务器
}
}
}
js代码是由上传图片成功开始的,所以监控input的onchange事件,如果传输成功执行以下代码,可以js绘制在页面中 前提是浏览器支持canvas,下面代码才有效果