Uniapp H5 上傳圖片的壓縮問題

 

 

<template>
    <view class="content">
        <view @tap="ChooseImage()">點擊上傳圖片</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {
            ChooseImage() {
                uni.chooseImage({
                    count: 1,
                    sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認二者都有
                    sourceType: ['album'], //從相冊選擇
                    success: res => {
                        const imgSize = res.tempFiles[0] && res.tempFiles[0].size ? res.tempFiles[0].size : 0;
                        const imgName = res.tempFiles[0]&&res.tempFiles[0].name?res.tempFiles[0].name:'';
                        console.log(imgSize)
                        this.photoCompress(res.tempFiles[0], (base64Codes) => {
                            var fl = this.dataURLtoFile(base64Codes,imgName)
                            console.log(fl, "壓縮后的文件")
                        })
                    }
                })
            },
            photoCompress(file, objDiv) {
                var ready = new FileReader();
                ready.readAsDataURL(file);
                const _this = this;
                ready.onload = function() {
                    var fileResult = this.result;
                    _this.canvasDataURL(fileResult, objDiv)
                }
            },
            canvasDataURL(path, callback) {
                var img = new Image();
                img.src = path;
                var objCompressed = {}
                img.onload = function() {
                    var that = this;
                    //默認壓縮后圖片規格
                    var quality = 0.7;
                    var w = that.width;
                    var h = that.height;
                    var scale = w / h;
                    //實際要求
                    w = objCompressed.width || w;
                    h = objCompressed.height || (w / scale);
                    //生成canvas
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    // 創建屬性節點
                    var anw = document.createAttribute("width");
                    anw.nodeValue = w;
                    var anh = document.createAttribute("height");
                    anh.nodeValue = h;
                    canvas.setAttributeNode(anw);
                    canvas.setAttributeNode(anh);
                    ctx.drawImage(that, 0, 0, w, h);

                    var base64 = canvas.toDataURL('image/jpeg', quality);
                    // 回調函數返回base64的值
                    callback(base64);
                }
            },
            dataURLtoFile(dataurl,filename) {
                var arr = dataurl.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],filename,  { type: mime });
            }
        }
    }
</script>

<style>
    
</style>