<input type="file" onchange="go(this)" >
<img class="img" src="www">
<img class="img" src="www">
<canvas id="canvas"></canvas>
<script>
function go(e){
var s = new FileReader()
s.readAsDataURL(e.files[0])
s.onload=function(a){
document.getElementsByClassName('img')[0].src=a.target.result
var q=document.getElementsByClassName('img')[0]
var canvas=document.getEle`在这里插入代码片`mentById('canvas') //获取canvas
canvas.setAttribute('width',q.offsetWidth/2) //canvas设宽高
canvas.setAttribute('height',q.offsetHeight/2)//canvas设宽高
var ctx=canvas.getContext('2d')
ctx.drawImage(q,0,0,q.offsetWidth/2,q.offsetHeight/2); //将图片绘制在画布,设置宽高
const ba=canvas.toDataURL('image/jpeg',0.5) //转成base64码 并设置图片质量
document.getElementsByClassName('img')[1].src=ba
}
}
</script>
上传图片 压缩大小
最新推荐文章于 2021-09-29 22:36:41 发布