vue js中實現圖片壓縮封裝方法
全局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://blog.csdn.net/SmartJunTao/article/details/124841247
到此這篇關於vue js實現圖片壓縮封裝方法的文章就介紹到這瞭,更多相關vuejs圖片壓縮內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Vue使用canvas實現圖片壓縮上傳
- Exif.js圖片旋轉修正的方法
- vue將html頁面生成高清晰pdf文件的方法
- Vue3中進行二維碼的生成與解碼實現詳解
- JavaScript canvas實現九宮格切圖效果