zoukankan      html  css  js  c++  java
  • canvas 压缩图片的大小

    使用 signature_pad canvas 库生成的图片太大。但又没有提供方法来压缩。

    当然这是根据你canvas的画布大小决定的,某些原因导致我的画布就得是那么大。

    随随便便一个图片转化为base64 之后就是200kb-300kb。所以得想办法压缩。

    思路就是把生成的base64 图片再一次放入canvas 中 ,然后等比缩小4倍即可。

    save () {
        if (this.$refs.signature.isEmpty() === false) {
            // https://github.com/WangShayne/vue-signature
            var png = this.$refs.signature.save();
            this.compressedPicture(png, _ => {
                console.log(_);
            })
        }
    },
    compressedPicture (url, callback) {
        var canvas = document.createElement('canvas'); 
        var ctx = canvas.getContext('2d'); 
        var img = new Image; 
        img.onload = function(){
            console.log(img.width);
            var width = img.width;
            var height = img.height;
            // 按比例压缩4倍
            var rate = (width < height ? width / height : height / width) / 4;
            canvas.width = width * rate; 
            canvas.height = height * rate; 
            ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate); 
            var dataURL = canvas.toDataURL('image/jpeg'); 
            callback.call(this, dataURL); 
            canvas = null; 
            console.log(dataURL);
        };
        img.src = url
    },

  • 相关阅读:
    C#-获取磁盘,cpu,内存信息
    C#-WiFi共享
    C#-WiFi共享
    C#-DES加解密
    C#-DES加解密
    C#-播放器相关
    C#-播放器相关
    Windowsw核心编程 第13章 Windows内存结构
    Windowsw核心编程 第13章 Windows内存结构
    C#-CHTTPDownload
  • 原文地址:https://www.cnblogs.com/CyLee/p/9049193.html
Copyright © 2011-2022 走看看