账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    js canvas如何实现压缩图片?
    24
    0

    需求是实现压缩上传。网上看了大多是canvas方法实现,于是仿照着写了个。但是似乎并没什么用。上传后下载下来图片依然很大。
    代码如下

            html5Reader(file, item){
    
                const reader = new FileReader();
                let Img = new Image();
                let newImageData;
                Img.src =  window.URL.createObjectURL(file);
                Img.onload = (e) => {
                    let canvas = document.createElement('canvas');
                    let ctx = canvas.getContext('2d');                       
                    canvas.width = Img.width;
                    canvas.height = Img.height;
                    ctx.drawImage(Img, 0, 0, canvas.width, canvas.height);
                    newImageData = canvas.toDataURL('image/jpeg', 0.1);
                    console.log(newImageData)                    
                    this.$set(item, 'src', newImageData);
                };                
    
    
            },
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 旧歌如梦 普通会员 1楼

      在JavaScript中,可以使用HTML5的Canvas API来实现图片压缩。以下是一个简单的示例:

      ```javascript // 创建一个canvas元素 var canvas = document.getElementById('myCanvas');

      // 获取canvas的绘图上下文 var ctx = canvas.getContext('2d');

      // 获取canvas上的图片 var img = new Image(); img.src = 'image.jpg'; // 图片的URL

      // 当图片加载完成时,更新canvas上的图片 img.onload = function() { // 压缩图片 var canvasData = ctx.getImageData(0, 0, img.width, img.height); var data = canvasData.data; data[0] = data[0] / 255; data[1] = data[1] / 255; data[2] = data[2] / 255;

      // 重新绘制canvas上的图片 ctx.putImageData(canvasData, 0, 0); };

      // 调用图片加载函数 img.src = ''; ```

      在这个示例中,我们首先创建了一个canvas元素,然后获取了它的绘图上下文。然后,我们获取了canvas上的图片,并在图片加载完成时,使用Canvas API的putImageData方法来压缩图片。最后,我们重新绘制了canvas上的图片。

      注意,这只是一个简单的压缩方法,实际的图片压缩可能会更复杂,需要考虑图片的压缩比率、压缩后的图片质量和原图的质量等因素。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部