vue.js實現圖片壓縮封裝方法

2022-05-21 13:01:29

全域性main.js引入：

// 引入imgUpload方法
import * as imgUpload from "./utils/imgUpload"
//外部使用
Vue.prototype.$imgUpload = imgUpload

新建imgUpload.js：

 const dataURLtoFile = (dataurl, filename) => { // 將base64轉換為file檔案
    let arr = dataurl.split(',')
    let mime = arr[0].match(/:(.*?);/)[1]
    let bstr = atob(arr[1])
    let n = bstr.length
    let u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], filename, { type: mime })
};
const imgZip = (file) => {
    var _this = this;
    let imgZipStatus = new Promise((resolve, reject) => {
        let canvas = document.createElement("canvas"); // 建立Canvas物件(畫布)
        let context = canvas.getContext("2d");
        let img = new Image();
        img.src = file.content; // 指定圖片的DataURL(圖片的base64編碼資料)
        var Orientation = '';
        img.onload = () => {
            //根據情況定義
           // canvas.width = 400;
           // canvas.height = 300;
           canvas.width = img.width;
           canvas.height = img.height;
           context.drawImage(img, 0, 0, canvas.width, canvas.height);
 
           file.content = canvas.toDataURL(file.file.type, 0.5); // 0.92為預設壓縮質量
            
           let files = dataURLtoFile(file.content, file.file.name);
           resolve(files)
        }
    })
    return imgZipStatus;
};
export {
    imgZip,
}

頁面中使用：

//上傳方法
afterCard(file) {
      this.$imgUpload.imgZip(file).then(resData => {
        const formData = new FormData();
        formData.append("file", resData);
 
        // 請求介面上傳圖片到伺服器
        uploadImg(formData).then(res => {
 
        })
      })
}

備註：

HTMLCanvasElement.getContext()方法返回canvas的上下文，如果上下文沒有定義則返回null.

在同一個canvas上以相同的contextType多次呼叫此方法只會返回同一個上下文。

var ctx = canvas.getContext(contextType);var ctx = canvas.getContext(contextType, contextAttributes);

上下文型別（contextType）

是一個指示使用何種上下文，可能的值是:

"2d"
"webgl"
"webgl2"
"bitmaprenderer"

上下文屬性(contextAttributes)

你可以在建立渲染上下文的時候設定多個屬性，例如:

canvas.getContext("webgl",
                 { antialias: false,
                   depth: false });

Canvas 2D API 中的CanvasRenderingContext2D.drawImage()方法提供了多種方式在Canvas上繪製影象。

ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

引數：

image

繪製到上下文的元素。允許任何的 canvas 影象源

sx可選

需要繪製到目標上下文中的，image的矩形（裁剪）選擇框的左上角 X 軸座標。

sy可選

需要繪製到目標上下文中的，image的矩形（裁剪）選擇框的左上角 Y 軸座標。

sWidth可選

需要繪製到目標上下文中的，image的矩形（裁剪）選擇框的寬度。如果不說明，整個矩形（裁剪）從座標的sx和sy開始，到image的右下角結束。

sHeight可選

需要繪製到目標上下文中的，image的矩形（裁剪）選擇框的高度。

dx

image的左上角在目標canvas上X 軸座標。

dy

image的左上角在目標canvas上Y 軸座標。

dWidth可選

image在目標canvas上繪製的寬度。允許對繪製的image進行縮放。如果不說明，在繪製時image寬度不會縮放。

dHeight可選

image在目標canvas上繪製的高度。允許對繪製的image進行縮放。如果不說明，在繪製時image高度不會縮放。

範例：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = document.getElementById('source');
ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);

Vue vant-ui使用van-uploader實現頭像圖片上傳

https://www.jb51.net/article/248830.htm

到此這篇關於vue js實現圖片壓縮封裝方法的文章就介紹到這了,更多相關vuejs圖片壓縮內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

vue.js實現圖片壓縮封裝方法

全域性main.js引入：

新建imgUpload.js：

上下文型別（contextType）

上下文屬性(contextAttributes)

熱門文章