Fork me on GitHub

关于图片处理的唠唠叨叨

发表于 | 更新于: | 分类于
字数统计: 847 | 阅读时长 ≈ 4
图片处理方法集锦，包括图片上传、图片压缩、图片增加马赛克等方法

以下代码是以vue语法为主，如果使用其他框架，请更改语法

图片上传并获取图片方法

图片上传

本方法是获取图片的文件流，通过formData方法处理图片参数以文件流方式传递到后台（同样支持文件）;

  1. 为input绑定change事件，并绑定accept

    1
    <input type="file" ref="input" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" @change="uploadImg($event)">

  2. 通过change方法获取图片

1
2
3
4
5
6
7
8
9
uploadImg(e) {
    var event = e ? e : window.event;
    var obj = event.srcElement ? event.srcElement : event.target;
    //obj.files[0]为获取的图片文件流
    // getObjectURL方法上传图片方法
    var srcs = this.getObjectURL(obj.files[0]);
    //清除input的方法，防止change事件不触发
    this.$refs.input.value = ""
},

获取上传的图片

如果在图片上传之前需要预览图片，可以通过以下方法获取图片，url绑定到img标签即可

1
2
3
4
5
6
7
8
9
10
11
getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) {
        url = window.createObjectURL(file)
    } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file)
    } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file)
    }
    return url;
}

判断图片链接是否有效

  • 场景：如果后台返回图片链接，如果有效则展示，无效的话不展示
  • 原理：通过img标签引入图片，可以通过img的onload（有效）和onerror（无效）回调来区分

注意回调方法是异步的

1
2
3
4
5
6
7
8
9
10
11
 checkImgExists(imgurl) {
    var ImgObj = new Image();
    ImgObj.src = imgurl;

    image.onload = function () {
        return true
    };
    image.onerror = function () {
        return false
    };
}

图片压缩

图片压缩

方法有点长，懒得分了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/**
    * 
    * @param {文件} file 
    * @param {配置属性} options 
    * @param {回调函数} callback 
    */

loopPhotoCompress(file, options, callback) {
    options.size = 1;//此处的单位为MB
    var self = this;
    var imgtype = 'image/jpeg';

    // 用FileReader读取文件
    var reader = new FileReader();
    // 将图片读取为base64
    reader.readAsDataURL(file);
    reader.onload = function (evt) {
        var base64 = evt.target.result;
        // 创建图片对象
        var img = new Image();
        // 用图片对象加载读入的base64
        img.src = base64;
        img.onload = function () {
            var that = this,
                canvas = document.createElement('canvas'),
                ctx = canvas.getContext('2d');
            canvas.setAttribute('width', that.width);
            canvas.setAttribute('height', that.height);
            // 将图片画入canvas
            ctx.drawImage(that, 0, 0, that.width, that.height);

            // 压缩到指定体积以下（M）
            if (options.size) {
                var scale = 0.9;
                (function f(scale) {
                    if (base64.length / 1024 / 1024 > options.size && scale > 0) {
                        base64 = canvas.toDataURL(imgtype, scale);
                        scale = scale - 0.1;
                        f(scale);
                    } else {
                        callback(self.convertBase64UrlToBlob(base64, file));

                    }
                })(scale);
            } else if (options.scale) {
                // 按比率压缩
                base64 = canvas.toDataURL(imgtype, options.scale);
                callback(self.convertBase64UrlToBlob(base64, file));
            }

        }
    }
}

base64转file文件流

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/**
    * 将以base64的图片url数据转换为Blob
    * @param urlData
    *用url方式表示的base64图片数据
    */
convertBase64UrlToBlob(urlData, file) {
    var arr = urlData.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], file.name, { type: file.type });
}

图片增加马赛克

  • 获取图片写入到canvas，通过检测鼠标的落下，移动、抬起事件，获取矩形
  • 通过getImageData方法获取图片像素点数组
  • 通过改变数据中像素点的颜色（不同像素点交换颜色）setXY方法

getImageData此方法对于跨域图片，浏览器会进行拦截，服务器需要设置允许跨域访问

文件：图片增加马赛克