Vueはキャンバスを使用して画像圧縮アップロードを実現します

ctx.drawImage(画像、dx、dy);
ctx.drawImage(画像、dx、dy、dWidth、dHeight);
ctx.drawImage(イメージ、sx、sy、sWidth、sHeight、dx、dy、dWidth、dHeight);

//html
<input id="ファイル" type="ファイル">

// JS
var eleFile = document.querySelector('#file');

// 画像を圧縮するために必要ないくつかの要素とオブジェクト var reader = new FileReader(), img = new Image();

//選択されたファイルオブジェクト var file = null;

//画像に必要なキャンバスの拡大縮小
var キャンバス = document.createElement('キャンバス');
var コンテキスト = canvas.getContext('2d');

// base64アドレスイメージがロードされた後、img.onload = function () {
    //画像の元のサイズ var originWidth = this.width;
    var originHeight = this.height;
    // 最大サイズ制限 var maxWidth = 400, maxHeight = 400;
    // ターゲット サイズ var targetWidth = originWidth, targetHeight = originHeight;
    // 画像サイズが400x400の制限を超えています if (originWidth > maxWidth || originHeight > maxHeight) {
        （原点の幅 / 原点の高さ > 最大幅 / 最大高さ）の場合 {
            // 幅が広くなるため、幅に応じてサイズを制限します。targetWidth = maxWidth;
            ターゲット高さ = Math.round(最大幅 * (原点高さ / 原点幅));
        } それ以外 {
            ターゲット高さ = 最大高さ;
            ターゲット幅 = Math.round(最大高さ * (原点幅 / 原点高さ));
        }
    }
        
    // キャンバスは画像を拡大縮小します。canvas.width = targetWidth;
    キャンバスの高さ = ターゲットの高さ;
    // キャンバスをクリアします context.clearRect(0, 0, targetWidth, targetHeight);
    // 画像圧縮 context.drawImage(img, 0, 0, targetWidth, targetHeight);
    // キャンバスをblobに変換してアップロードします canvas.toBlob(function (blob) {
        // 画像の Ajax アップロード var xhr = new XMLHttpRequest();
        // ファイルのアップロードが成功しました xhr.onreadystatechange = function() {
            (xhr.status == 200)の場合{
                // xhr.responseText は返されるデータです}
        };
        // アップロードを開始します xhr.open("POST", 'upload.php', true);
        xhr.send(blob);    
    }, ファイルタイプ || 'image/png');
};

// ファイルをbase64に変換して画像の元のサイズを取得します。reader.onload = function(e) {
    img.src = e.target.result;
};
eleFile.addEventListener('change', 関数(イベント) {
    ファイル = event.target.files[0];
    // 選択されたファイルは画像です if (file.type.indexOf("image") == 0) {
        reader.readAsDataURL(ファイル);    
    }
});

// デバイスの dpr を取得
getPixelRatio: 関数(コンテキスト) {
    backingStore を context.backingStorePixelRatio とします。
    context.webkitBackingStorePixelRatio ||
    context.mozBackingStorePixelRatio ||
    コンテキスト.msBackingStorePixelRatio ||
    コンテキスト.oBackingStorePixelRatio ||
    context.backingStorePixelRatio || 1;
    (window.devicePixelRatio || 1) / backingStore を返します。
}

// 次のようになります const ctx = this.canvas.getContext("2d");
const dpr = this.getPixelRatio(ctx);
this.$refs.postImg.crossOrigin = "匿名";
var oldWidth = this.canvas.width;
var oldHeight = this.canvas.height;
this.canvas.style.width = oldWidth + 'px'; 
this.canvas.style.height = oldHeight + 'px';
this.canvas.width = oldWidth * dpr;
this.canvas.height = oldHeight * dpr;
ctx.scale(dpr, dpr);

//通常の操作を実行します ctx.drawImage(this.$refs.cropImg, 0, 0, 250, 400);