js图片压缩dome

最新推荐文章于 2023-10-08 16:39:29 发布

yaoxinsong

最新推荐文章于 2023-10-08 16:39:29 发布

阅读量88

点赞数

分类专栏： JaveScript

本文链接：https://blog.csdn.net/qq_23159841/article/details/110308505

版权

JaveScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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.result
        image.onload = function() {
            let canvas = document.createElement('canvas'), 
            context = canvas.getContext('2d'),
            imageWidth = image.width / 2,    //压缩后图片的大小
            imageHeight = image.height / 2,
            data = ''

            canvas.width = imageWidth
            canvas.height = imageHeight

            context.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节点插入的document
	var event = new MouseEvent('click')           // 模拟鼠标click点击事件
	a.download = 'beautifulGirl'                  // 设置a节点的download属性值
	a.href = url;                                 // 将图片的src赋值给a节点的href
	a.dispatchEvent(event)                        // 触发鼠标点击事件
}
</script>
</html>