base64 轉(zhuǎn)譯為 文件流
base64toFile(dataurl, filename = "file") { // dataurl 為 base64字符串鸥印。 filename 為文件名
let arr = dataurl.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let suffix = mime.split("/")[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}.${suffix}`, {
type: mime
});
},
文件流轉(zhuǎn)赎败。base64 （以下方法 自己搭建的ftp流媒體服務(wù)器 會有跨域操作 一般情況下 前端解決不了卓箫。需要后端進行轉(zhuǎn)譯（添加轉(zhuǎn)譯接口））
function convertImgToBase64(url, callback) {
let canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image();
img.crossOrigin = 'anonymous';//解決Canvas.toDataURL 圖片跨域問題
img.onload = () => {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
let ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); // 獲取到圖片的格式
let dataURL = canvas.toDataURL("image/" + ext); // 得到base64 編碼的 dataURL
callback && callback(dataURL);
canvas = null;
};
img.src = url;
}
var baseUrl = ''
convertImgToBase64(this.options.logo, (baseUrl) => {
baseUrl = baseUrl
})
手動上傳方式
頁面引用
import axios from "axios";
// 以下為方法調(diào)用
uploadImg: function(files) {
var formdata = new FormData();
formdata.append("file", files);
axios({
method: "POST",
url: url, // 上傳地址
headers: { Authorization: "Bearer " + getToken() }, // 請求頭配置
data: formdata // 攜帶參數(shù)
})
.then(response => {
if (response.data.code == "200") {
// 成功處理
} else {
// 失敗處理
}
})
.catch(res => {
// 接口異常處理
});
}
壓縮圖片方法
// 安裝壓縮軟件 lrz
npm i lrz -save
// 頁面引用
import lrz from "lrz";
// 使用
// 選中文件
changeImgFile: function(file, fileList) {
let _this = this;
const isJPG =
file.raw.type === "image/jpg" ||
file.raw.type === "image/jpeg" ||
file.raw.type === "image/gif" ||
file.raw.type === "image/png" ||
file.raw.type === "image/bmp";
if (!isJPG) {
this.$message.error("上傳圖片必須是JPG/JPEG/GIF/PNG/BMP 格式!");
return;
}
console.log("壓縮前大行褐琛：" + file.raw.size / 1024 / 1024);
lrz(file.raw)
.then(function(rst) {
console.log("壓縮后大形Х省：" + rst.file.size / 1024 / 1024);
})
.catch(function(err) {
this.$message.error("圖片壓縮失敗!");
// 處理失敗會執(zhí)行
})
.always(function() {
// 不管是成功失敗罩扇，都會執(zhí)行
});
},
實現(xiàn)圖片可編輯
// 安裝插件
npm i tui-image-editor
// 頁面引用
import "tui-image-editor/dist/tui-image-editor.css";
import "tui-color-picker/dist/tui-color-picker.css";
import ImageEditor from "tui-image-editor";
//頁面使用
// html
<div id="tui-image-editor"></div>
// js 使用時若有圖片跨域問題婆芦。可轉(zhuǎn)為base 64 使用喂饥。
data() {
return {
instance: null,
locale_zh: {
ZoomIn: "放大",
ZoomOut: "縮小",
Hand: "手掌",
History: "歷史",
Resize: "調(diào)整寬高",
Crop: "裁剪",
DeleteAll: "全部刪除",
Delete: "刪除",
Undo: "撤銷",
Redo: "反撤銷",
Reset: "重置",
Flip: "鏡像",
Rotate: "旋轉(zhuǎn)",
Draw: "畫",
Shape: "形狀標注",
Icon: "圖標標注",
Text: "文字標注",
Mask: "遮罩",
Filter: "濾鏡",
Bold: "加粗",
Italic: "斜體",
Underline: "下劃線",
Left: "左對齊",
Center: "居中",
Right: "右對齊",
Color: "顏色",
"Text size": "字體大小",
Custom: "自定義",
Square: "正方形",
Apply: "應(yīng)用",
Cancel: "取消",
"Flip X": "X 軸",
"Flip Y": "Y 軸",
Range: "區(qū)間",
Stroke: "描邊",
Fill: "填充",
Circle: "圓",
Triangle: "三角",
Rectangle: "矩形",
Free: "曲線",
Straight: "直線",
Arrow: "箭頭",
"Arrow-2": "箭頭2",
"Arrow-3": "箭頭3",
"Star-1": "星星1",
"Star-2": "星星2",
Polygon: "多邊形",
Location: "定位",
Heart: "心形",
Bubble: "氣泡",
"Custom icon": "自定義圖標",
"Load Mask Image": "加載蒙層圖片",
Grayscale: "灰度",
Blur: "模糊",
Sharpen: "銳化",
Emboss: "浮雕",
"Remove White": "除去白色",
Distance: "距離",
Brightness: "亮度",
Noise: "噪音",
"Color Filter": "彩色濾鏡",
Sepia: "棕色",
Sepia2: "棕色2",
Invert: "負片",
Pixelate: "像素化",
Threshold: "閾值",
Tint: "色調(diào)",
Multiply: "正片疊底",
Blend: "混合色",
Width: "寬度",
Height: "高度",
"Lock Aspect Ratio": "鎖定寬高比例"
},
customTheme: {
"common.bi.image": "", // 左上角logo圖片
"common.bisize.width": "0px",
"common.bisize.height": "0px",
"common.backgroundImage": "none",
"common.backgroundColor": "#f3f4f6",
"common.border": "1px solid #333",
// header
"header.backgroundImage": "none",
"header.backgroundColor": "#f3f4f6",
"header.border": "0px",
// load button
"loadButton.backgroundColor": "#fff",
"loadButton.border": "1px solid #ddd",
"loadButton.color": "#222",
"loadButton.fontFamily": "NotoSans, sans-serif",
"loadButton.fontSize": "12px",
"loadButton.display": "none", // 隱藏
// download button
"downloadButton.backgroundColor": "#fdba3b",
"downloadButton.border": "1px solid #fdba3b",
"downloadButton.color": "#fff",
"downloadButton.fontFamily": "NotoSans, sans-serif",
"downloadButton.fontSize": "12px",
"downloadButton.display": "none", // 隱藏
// icons default
"menu.normalIcon.color": "#8a8a8a",
"menu.activeIcon.color": "#555555",
"menu.disabledIcon.color": "#ccc",
"menu.hoverIcon.color": "#e9e9e9",
"submenu.normalIcon.color": "#8a8a8a",
"submenu.activeIcon.color": "#e9e9e9",
"menu.iconSize.width": "24px",
"menu.iconSize.height": "24px",
"submenu.iconSize.width": "32px",
"submenu.iconSize.height": "32px",
// submenu primary color
"submenu.backgroundColor": "#1e1e1e",
"submenu.partition.color": "#858585",
// submenu labels
"submenu.normalLabel.color": "#858585",
"submenu.normalLabel.fontWeight": "lighter",
"submenu.activeLabel.color": "#fff",
"submenu.activeLabel.fontWeight": "lighter",
// checkbox style
"checkbox.border": "1px solid #ccc",
"checkbox.backgroundColor": "#fff",
// rango style
"range.pointer.color": "#fff",
"range.bar.color": "#666",
"range.subbar.color": "#d1d1d1",
"range.disabledPointer.color": "#414141",
"range.disabledBar.color": "#282828",
"range.disabledSubbar.color": "#414141",
"range.value.color": "#fff",
"range.value.fontWeight": "lighter",
"range.value.fontSize": "11px",
"range.value.border": "1px solid #353535",
"range.value.backgroundColor": "#151515",
"range.title.color": "#fff",
"range.title.fontWeight": "lighter",
// colorpicker style
"colorpicker.button.border": "1px solid #1e1e1e",
"colorpicker.title.color": "#fff"
}
};
},
methods: {
init(imgUrl) { // imgUrl 圖片路徑消约。 http地址類≡卑铮或者荆陆。base64
this.instance = new ImageEditor(
document.querySelector("#tui-image-editor"),
{
includeUI: {
loadImage: {
path: imgUrl,
name: "image"
},
initMenu: "draw", // 默認打開的菜單項
menuBarPosition: "bottom", // 菜單所在的位置
locale: this.locale_zh,
theme: this.customTheme
},
cssMaxWidth: 1000, // canvas 最大寬度
cssMaxHeight: 600 // canvas 最大高度
}
);
document.getElementsByClassName("tui-image-editor-main")[0].style.top =
"45px"; // 圖片距頂部工具欄的距離
document.getElementsByClassName(
"tie-btn-reset tui-image-editor-item help"
)[0].style.display = "none"; // 隱藏頂部重置按鈕
// canvas區(qū)域不遮擋圖片 只顯示編輯區(qū)
document.getElementsByClassName(
"tui-image-editor-main"
)[0].style.top = 50;
// canvas區(qū)域底部如果不加上這個，點擊底部的功能按鍵集侯，會遮擋圖片被啼，造成看不全，加上之后就可以了
document.getElementsByClassName("lower-canvas")[0].style.paddingBottom =
"120px";
// 防止 涂鴉后偏移問題
document.getElementsByClassName("upper-canvas ")[0].style.paddingBottom =
"120px";
// 隱藏刪除按鈕 留下全部刪除就夠了
document.getElementsByClassName(
"tie-btn-delete tui-image-editor-item help"
)[0].style.display = "none";
},
handleCanvas2Img() { // 自己自定義按鈕位置
// 調(diào)用組件官方方法棠枉，獲取整個編輯后圖片的base64數(shù)據(jù)
const base64String = this.instance.toDataURL();
},
},
