網(wǎng)絡(luò)地址圖片轉(zhuǎn)變?yōu)閎ase64,再轉(zhuǎn)換為文件流蛹尝。js處理

<button @click="toImg"></button>
data(){
  return{
     img:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=508387608,2848974022&fm=26&gp=0.jpg",
     base64: ""
  }
}
getBase64Image(img) {
            var canvas = document.createElement("canvas")
            canvas.width = img.width
            canvas.height = img.height
            var ctx = canvas.getContext("2d")
            ctx.drawImage(img, 0, 0, img.width, img.height)
            var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase()
            var dataURL = canvas.toDataURL("image/" + ext)

            return dataURL
        },
toImg() {
            var _this = this
            var image = new Image()
            image.src = _this.img
            image.setAttribute("crossOrigin", "Anonymous")
            // image.setAttribute("crossorigin", " *")
            image.onload = function() {
                var base64 = _this.getBase64Image(image)
                _this.base64 = base64
                // document.getElementById("img").src = base64
                var formData = new FormData()

                //轉(zhuǎn)換base64到file
                var file = _this.btof(base64, "test")
                formData.append("imageName", file)
            }
        },
btof(data, fileName) {
            const dataArr = data.split(",")
            const byteString = atob(dataArr[1])

            const options = {
                type: "image/jpeg",
                endings: "native"
            }
            const u8Arr = new Uint8Array(byteString.length)
            for (let i = 0; i < byteString.length; i++) {
                u8Arr[i] = byteString.charCodeAt(i)
            }
            return new File([u8Arr], fileName + ".jpg", options)
        },
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末后豫,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子突那,更是在濱河造成了極大的恐慌挫酿,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件愕难,死亡現(xiàn)場離奇詭異早龟,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)猫缭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進(jìn)店門葱弟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人猜丹,你說我怎么就攤上這事芝加。” “怎么了居触?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵妖混,是天一觀的道長老赤。 經(jīng)常有香客問我轮洋,道長,這世上最難降的妖魔是什么抬旺? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任弊予,我火速辦了婚禮,結(jié)果婚禮上开财,老公的妹妹穿的比我還像新娘汉柒。我一直安慰自己,他們只是感情好责鳍,可當(dāng)我...
    茶點故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布碾褂。 她就那樣靜靜地躺著,像睡著了一般历葛。 火紅的嫁衣襯著肌膚如雪正塌。 梳的紋絲不亂的頭發(fā)上嘀略,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天,我揣著相機(jī)與錄音乓诽,去河邊找鬼帜羊。 笑死,一個胖子當(dāng)著我的面吹牛鸠天,可吹牛的內(nèi)容都是我干的讼育。 我是一名探鬼主播,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼稠集,長吁一口氣:“原來是場噩夢啊……” “哼奶段!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起剥纷,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤忧饭,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后筷畦,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體词裤,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年鳖宾,在試婚紗的時候發(fā)現(xiàn)自己被綠了吼砂。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,654評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡鼎文,死狀恐怖渔肩,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情拇惋,我是刑警寧澤周偎,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站撑帖,受9級特大地震影響蓉坎,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜胡嘿,卻給世界環(huán)境...
    茶點故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一蛉艾、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧衷敌,春花似錦勿侯、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至面氓,卻和暖如春兵钮,著一層夾襖步出監(jiān)牢的瞬間沟堡,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工矢空, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留航罗,地道東北人。 一個月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓屁药,卻偏偏與公主長得像粥血,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子酿箭,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,543評論 2 349