基於vue上傳base64圖片,通過canvas壓縮base64


其實和vue關系不大,和我們之前做上傳壓縮性質是一樣的 當然下面的代碼是沒有處理ios橫屏拍照的bug的 有興趣的可以多搜一下  網上都有相應的解答 、、
      var that = this
      if (e.target.files[0]) {
        var file = e.target.files[0]
        var reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function() {
          img.src = this.result
        }
        var img = new Image,
          width = 1024, //image resize   壓縮后的寬
          quality = 0.8, //image quality  壓縮質量
          canvas = document.createElement("canvas"),
          drawer = canvas.getContext("2d");
        img.onload = function() {
          canvas.width = width;
          canvas.height = width * (img.height / img.width);
          drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
//上傳到七牛雲
var base64 = canvas.toDataURL("image/jpeg", quality); // 這里就拿到了壓縮后的base64圖片 var pic = base64.split(',')[1]; var url = "http://upload-z2.qiniu.com/putb64/-1"; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { that.imgs.push(JSON.parse(xhr.responseText).data.key); } } xhr.open("POST", url, true); xhr.setRequestHeader("Content-Type", "application/octet-stream"); xhr.setRequestHeader("Authorization", "UpToken " + ‘七牛雲token’); xhr.send(pic); // 清空文件上傳控件的值 不清理會出現選擇同樣的圖片會無法觸發input事件了 e.target.value = null; }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM