vue 圖片轉base64本地路徑跨域方式

更新時間：2022年02月09日 11:10:20 作者：絮落錦鄉(xiāng)

這篇文章主要介紹了vue 圖片轉base64本地路徑跨域方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

圖片轉base64本地路徑跨域

問題描述

代碼

getUrlBase64(url, ext, callback) {
                    var canvas = document.createElement("canvas");   //創(chuàng)建canvas DOM元素
                var ctx = canvas.getContext("2d");
                var img = new Image;
                img.crossOrigin = 'Anonymous';//外網(wǎng)訪問必須加否則會報錯
                img.src = url;
                img.onload = function () {
                    canvas.height = 140; //指定畫板的高度,自定義
                    canvas.width = 120; //指定畫板的寬度，自定義
                    ctx.drawImage(img, 0, 0, 140, 120); //參數(shù)可自定義 高度，寬度
                    var dataURL = canvas.toDataURL("image/" + ext);
                    callback.call(this, dataURL); //回掉函數(shù)獲取Base64編碼
                    canvas = null;
                }; 
            },

解決方案

1、采用nginx 進行監(jiān)聽端口進行轉發(fā)

resPre:'http://localhost:8083/fileApi'

server{
?? ??? ?listen ? ? ? 8083;
? ? ? ? server_name ?localhost 192.168.0.13;
?? ??? ?root ? "路徑";
?? ??? ?# 該字段是必須的。它的值要么是請求時Origin字段的值，要么是一個*，表示接受任意域名的請求。
?? ??? ?add_header 'Access-Control-Allow-Origin' '*';
?? ??? ?# 該字段可選。它的值是一個布爾值，表示是否允許發(fā)送Cookie。
?? ??? ?# ?默認情況下，Cookie不包括在CORS請求之中。設為true，即表示服務器明確許可，
?? ??? ?# ?Cookie可以包含在請求中，一起發(fā)給服務器。這個值也只能設為true，
?? ??? ?# ?如果服務器不要瀏覽器發(fā)送Cookie，刪除該字段即可
?? ??? ?add_header 'Access-Control-Allow-Credentials' 'true';
?? ??? ?# 該字段是必須的，用來列出瀏覽器的CORS請求會用到哪些HTTP方法，上例是PUT。
?? ??? ?add_header 'Access-Control-Allow-Methods' '*';
?
?? ??? ?#end 允許指定域名跨域訪問，根據(jù)自己情況修改
?? ??? ?#ssl配置省略
? ? ? ? ?location / {
? ? ? ? ? ? rewrite ?^.+fileApi/?(.*)$ /$1 break;//fileApi 前綴
? ? ? ? ? ? proxy_pass ?http://localhost:8085; ? ?#node api server 即需要代理的IP地址
? ? ? ? ? ? proxy_redirect off;
? ? ? ? ? ? proxy_set_header Host $host;
? ? ? ? ? ? proxy_set_header X-Real-IP $remote_addr;
? ? ? ? ? ? proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
? ? ? ? ?}?? ??? ?
?? ?}

2、把圖片放在項目目錄下面，也就是同一個地址下面。

圖片轉成base64跨域等安全限制及解決

把其他域的圖片在canvas中轉換為base64時，會遇到跨域安全限制。

目前，唯一可行的方案是，把圖片文件以arraybuffer的形式ajax下載下來，然后直接轉base4。

但是，這樣有個毛病，就是可能會浪費帶寬，多下載一次。

/*    var getBase64ByUrl = function(src, callback, outputFormat) {
        var canvas = document.createElement('canvas'),
            ctx = canvas.getContext('2d'),
            img = new Image;
        img.crossOrigin = 'Anonymous';
        img.onload = function() {
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img, 0, 0); //默認圖片文件的原始size 縮小base串需加第4、5個參數(shù)
            alert(5)
            try{
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
            } catch(e) { alert(e.name + ": " + e.message);
                alert(JSON.stringify(e));
            }
            dataURL =dataURL.replace("data:image/png;base64,", "");
            //dataURL =encodeURIComponent(dataURL);
            alert(dataURL);
            callback(dataURL);
            canvas = null;
        };
        img.src = src;alert(6.5)
    }*/
var getBase64ByUrl = function(src, callback, outputFormat) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', src, true);
      xhr.responseType = 'arraybuffer';
      xhr.onload = function(e) {
        if (xhr.status == 200) {
          var uInt8Array = new Uint8Array(xhr.response);
          var i = uInt8Array.length;
          var binaryString = new Array(i);
          while (i--) {
            binaryString[i] = String.fromCharCode(uInt8Array[i]);
          }
          var data = binaryString.join('');
          var base64 = window.btoa(data);
          var dataUrl = "data:" + (outputFormat || "image/png") + ";base64," + base64;
          alert(dataUrl)
          callback.call(this, dataUrl);
        }
      };
      xhr.send();
    }

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: