图片压缩dome"/>
js图片压缩dome
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>压缩图片demo</title>
</head>
<body><img id="img" src=""><input id="file" type="file" onchange="compress()"><button class="downloadBtn" type="button" onclick="downloadImg()">下载图片</button>
</body>
<script>// 对图片进行压缩
function compress() { let fileObj = document.getElementById('file').files[0] //上传文件的对象let reader = new FileReader()reader.readAsDataURL(fileObj)reader.onload = function(e) {let image = new Image() //新建一个img标签（还没嵌入DOM节点)image.src = e.target.resultimage.onload = function() {let canvas = document.createElement('canvas'), context = canvas.getContext('2d'),imageWidth = image.width / 2, //压缩后图片的大小imageHeight = image.height / 2,data = ''canvas.width = imageWidthcanvas.height = imageHeightcontext.drawImage(image, 0, 0, imageWidth, imageHeight)data = canvas.toDataURL('image/jpeg')//压缩完成 document.getElementById('img').src = data}}
}
function downloadImg(){var img = document.getElementById('img'); // 获取要下载的图片var url = img.src; // 获取图片地址var a = document.createElement('a'); // 创建一个a节点插入的documentvar event = new MouseEvent('click') // 模拟鼠标click点击事件a.download = 'beautifulGirl' // 设置a节点的download属性值a.href = url; // 将图片的src赋值给a节点的hrefa.dispatchEvent(event) // 触发鼠标点击事件
}
</script>
</html>
更多推荐
js图片压缩dome
发布评论