濮阳杆衣贸易有限公司

主頁(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)椤S脩艨赡軙?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)的同類(lèi)信息!
  • 本頁(yè)收集關(guān)于使用canvas壓縮圖片上傳的方法示例的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章
    崇信县| 夏津县| 肃宁县| 奉新县| 丰县| 武乡县| 乡宁县| 贡嘎县| 襄城县| 武强县| 雷山县| 呼伦贝尔市| 合肥市| 八宿县| 焉耆| 临桂县| 巫山县| 佛坪县| 屯留县| 武汉市| 洪湖市| 闽侯县| 石台县| 凭祥市| 凌云县| 普宁市| 宁乡县| 田阳县| 长乐市| 台安县| 海伦市| 察哈| 咸丰县| 新巴尔虎右旗| 平南县| 绥芬河市| 札达县| 馆陶县| 肇州县| 望城县| 商河县|