濮阳杆衣贸易有限公司

主頁(yè) > 知識(shí)庫(kù) > 使用canvas壓縮圖片上傳的方法示例

使用canvas壓縮圖片上傳的方法示例

熱門(mén)標(biāo)簽:惡搞電話機(jī)器人 智能電銷(xiāo)機(jī)器人被禁用了么 電話機(jī)器人技術(shù) 欣鼎電銷(xiāo)機(jī)器人 效果 如何查看地圖標(biāo)注 地圖標(biāo)注軟件打印出來(lái) ok電銷(xiāo)機(jī)器人 高德地圖標(biāo)注商戶怎么標(biāo) 黃石ai電銷(xiāo)機(jī)器人呼叫中心

因?yàn)樵蛨D跟插件ui有出入,所以自己寫(xiě)了一個(gè)方法。。

首先得有一個(gè)上傳按鈕。

<input type="file" id="fileys" class="fileys" @change="uploadFile($event)" accept="image/*"/>
<!--uploadFile用change是因?yàn)?。用戶可能?huì)重復(fù)選其他圖片-->

入正題:

uploadFile:function(event){
let file = event.target.files[0]; //獲取input的圖片file值
let param = new FormData(); // 創(chuàng)建form對(duì)象
if(param.getAll('file')[0] == "undefined"){
        return false        //判斷是不是空
      }
      
 let reader = new FileReader() 
  reader.readAsDataURL(file) //讀取文件并將文件以URL的形式保存在resulr屬性中 base64格式 ,,,網(wǎng)上文檔好像規(guī)定了格式。。我就選了一個(gè)base64
  
  
  reader.onload = function(e) { // 文件讀取完成時(shí)觸發(fā)  
      let result = e.target.result // base64格式圖片地址  
      var image = new Image()
      image.src = result // 設(shè)置image的地址為base64的地址  
      image.onload = function(){  
        var canvas = document.getElementById("canvas");  
        var context = canvas.getContext("2d");  
        canvas.width = image.width; // 設(shè)置canvas的畫(huà)布寬度為圖片寬度  
        canvas.height = image.height; 
        context.drawImage(image, 0, 0, image.width, image.height) // 在canvas上繪制圖片  
        let dataUrl = canvas.toDataURL('image/jpeg', 0.001) //設(shè)置壓縮比,可根據(jù)需要設(shè)置,設(shè)置過(guò)小會(huì)影響圖片質(zhì)量,dataUrl 為壓縮后的圖片資源,可將其上傳到服務(wù)器  
  let tupian =  _this.dataURLtoFile(dataUrl, file.name)
        param.append('file', tupian);//對(duì)應(yīng)后臺(tái)接收?qǐng)D片名 

        //然后這里就可以寫(xiě)axios方法。去將這個(gè)param上傳到后臺(tái)

           } 
       } 
  
}

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

標(biāo)簽:阿壩 綏化 赤峰 盤(pán)錦 萍鄉(xiāng) 中山 聊城 金昌

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《使用canvas壓縮圖片上傳的方法示例》,本文關(guān)鍵詞  使用,canvas,壓縮,圖片,上傳,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《使用canvas壓縮圖片上傳的方法示例》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于使用canvas壓縮圖片上傳的方法示例的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章
    仁化县| 武山县| 芒康县| 定西市| 虎林市| 扬州市| 新沂市| 南投市| 永州市| 炉霍县| 南京市| 泽普县| 岳阳市| 灌云县| 拉孜县| 辽阳市| 平南县| 桐乡市| 双流县| 通海县| 邛崃市| 岳池县| 息烽县| 江达县| 南召县| 会昌县| 惠东县| 永城市| 青冈县| 镇宁| 蒲江县| 乳山市| 平顺县| 都江堰市| 永嘉县| 修文县| 双城市| 德钦县| 韩城市| 木兰县| 武宁县|