【案例简介】

js实现imageCompress压缩图片水印和下载demo

【案例截图】

【核心代码】

  new Vue({
                el: '#app',
                data: {
                    file:
                        'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1477436123,3577936229&fm=26&gp=0.jpg',
                    width: 500,
                    quality: 1,
                    qualityList: [0.1, 0.5, 1],
                    mimeType: 'image/jpeg',
                    mimeTypeList: ['image/jpeg', 'image/png'],
                    instance: null,
                },
                methods: {
                    downImage() {
                        if (!this.instance) {
                            alert('请先生成图片');
                            return;
                        }
                        this.instance.downloadCompressFile();
                    },
                    // 上传图片
                    uploadImage(e) {
                        var that = this;
                        var file = e.target.files[0];
                        new imageCompress({
                            file,
                            width: that.width,
                            quality: that.quality,
                            mimeType: that.mimeType,
                        })
                            .then(instance => {
                                // 获取canvas，可用于自行加工绘制
                                let canvas = instance.getCanvas();
                                let context = canvas.getContext('2d');
                                context.fillStyle = '#ccc';
                                context.font = 'bold 35px Arial';
                                context.fillText('小皮咖图片压缩', 150, 150);

                                // 替换文档中存在图片节点
                                instance.replaceImageNode(document.getElementById('img'));
                                // 替换文档中存在的canvas节点
                                instance.replaceCanvasNode(document.getElementById('canvas'));
                                // 获取压缩后生成的image节点
                                instance.getCompressImageNode().then(image => {
                                    console.log(image);
                                });

                                // // 获取压缩后的blob文件，可用于上传
                                instance.getCompressFile().then(blob => {
                                    
                                });

                                // 下载压缩后文件
                                // instance.downloadCompressFile();
                            })
                            .catch(err => {
                                console.log(err);
                            });
                    },