場景
由于項目需求，需要將圖片 url 轉(zhuǎn)成文件格式上傳到服務(wù)器
參考博客：圖片url轉(zhuǎn)file文章來源：http://www.zghlxwxcb.cn/news/detail-828167.html
封裝js
transferFile.js文章來源地址http://www.zghlxwxcb.cn/news/detail-828167.html
function setInitImg(url,callback){
let img = url;//這里是淘寶上隨便找的一張圖片
let _ = this
let imgRes
getBase64(img, (dataURL) => {
imgRes = dataURLtoFile(dataURL,img);
console.log(imgRes)
callback(imgRes)
});
}
function getBase64(url, callback) {
//通過構(gòu)造函數(shù)來創(chuàng)建的 img 實例，在賦予 src 值后就會立刻下載圖片，相比 createElement() 創(chuàng)建 <img> 省去了 append()，也就避免了文檔冗余和污染
var Img = new Image(),
dataURL = “”;
Img.src = url + “?v=” + Math.random(); // 處理緩存,fix緩存bug,有緩存，瀏覽器會報錯;
Img.setAttribute(“crossOrigin”, “Anonymous”); // 解決控制臺跨域報錯的問題
Img.onload = function () {
//要先確保圖片完整獲取到，這是個異步事件
var canvas = document.createElement(“canvas”), //創(chuàng)建canvas元素
width = Img.width, //確保canvas的尺寸和圖片一樣
height = Img.height;
canvas.width = width;
canvas.height = height;
canvas.getContext(“2d”).drawImage(Img, 0, 0, width, height); //將圖片繪制到canvas中
dataURL = canvas.toDataURL(“image/jpeg”); //轉(zhuǎn)換圖片為dataURL
callback ? callback(dataURL) : null; //調(diào)用回調(diào)函數(shù)
};
}
function dataURLtoFile(dataurl, filename) {
//將base64轉(zhuǎn)換為文件，dataurl為base64字符串，filename為文件名（必須帶后綴名，如.jpg,.png）
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 });
}
export {
setInitImg
}
調(diào)用方式
import {setInitImg} from './transferFile'
setInitImg('https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',(file)=>{
this.fileList.push(file)
})
看一下轉(zhuǎn)成的文件
場景
由于項目需求，需要將圖片 url 轉(zhuǎn)成文件格式上傳到服務(wù)器
參考博客：圖片url轉(zhuǎn)file
封裝js
transferFile.js
function setInitImg(url,callback){
let img = url;//這里是淘寶上隨便找的一張圖片
let _ = this
let imgRes
getBase64(img, (dataURL) => {
imgRes = dataURLtoFile(dataURL,img);
console.log(imgRes)
callback(imgRes)
});
}
到了這里，關(guān)于js圖片url反轉(zhuǎn)file文件 vue的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
