網(wǎng)站首頁(yè) Vue 正文
圖片轉(zhuǎn)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)訪問必須加否則會(huì)報(bào)錯(cuò) 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 進(jìn)行監(jiān)聽端口進(jìn)行轉(zhuǎn)發(fā)
resPre:'http://localhost:8083/fileApi'
server{ ?? ??? ?listen ? ? ? 8083; ? ? ? ? server_name ?localhost 192.168.0.13; ?? ??? ?root ? "路徑"; ?? ??? ?# 該字段是必須的。它的值要么是請(qǐng)求時(shí)Origin字段的值,要么是一個(gè)*,表示接受任意域名的請(qǐng)求。 ?? ??? ?add_header 'Access-Control-Allow-Origin' '*'; ?? ??? ?# 該字段可選。它的值是一個(gè)布爾值,表示是否允許發(fā)送Cookie。 ?? ??? ?# ?默認(rèn)情況下,Cookie不包括在CORS請(qǐng)求之中。設(shè)為true,即表示服務(wù)器明確許可, ?? ??? ?# ?Cookie可以包含在請(qǐng)求中,一起發(fā)給服務(wù)器。這個(gè)值也只能設(shè)為true, ?? ??? ?# ?如果服務(wù)器不要瀏覽器發(fā)送Cookie,刪除該字段即可 ?? ??? ?add_header 'Access-Control-Allow-Credentials' 'true'; ?? ??? ?# 該字段是必須的,用來列出瀏覽器的CORS請(qǐng)求會(huì)用到哪些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、把圖片放在項(xiàng)目目錄下面,也就是同一個(gè)地址下面。?
圖片轉(zhuǎn)成base64跨域等安全限制及解決
把其他域的圖片在canvas中轉(zhuǎn)換為base64時(shí),會(huì)遇到跨域安全限制。
目前,唯一可行的方案是,把圖片文件以arraybuffer的形式ajax下載下來,然后直接轉(zhuǎn)base4。
但是,這樣有個(gè)毛病,就是可能會(huì)浪費(fèi)帶寬,多下載一次。
/* 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); //默認(rèn)圖片文件的原始size 縮小base串需加第4、5個(gè)參數(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(); }
原文鏈接:https://blog.csdn.net/xljx_1/article/details/106162919
相關(guān)推薦
- 2022-08-04 深入理解pytorch庫(kù)的dockerfile_python
- 2022-05-25 ASP.NET?Core中使用Redis實(shí)現(xiàn)緩存_實(shí)用技巧
- 2022-09-14 jQuery實(shí)現(xiàn)簡(jiǎn)單計(jì)算器_jquery
- 2022-11-24 Ajax?請(qǐng)求隊(duì)列解決方案并結(jié)合elementUi做全局加載狀態(tài)_AJAX相關(guān)
- 2022-06-25 JQuery獲取對(duì)象的方式介紹_jquery
- 2022-08-28 IntelliJ IDEA 下debugger熱加載(Hot Swap)有時(shí)候失效解決
- 2022-09-16 C語(yǔ)言庫(kù)函數(shù)getchar()新見解_C 語(yǔ)言
- 2023-03-01 Shell?$[]對(duì)整數(shù)進(jìn)行數(shù)學(xué)運(yùn)算實(shí)現(xiàn)_linux shell
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運(yùn)行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲(chǔ)小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯(cuò)誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡(jiǎn)單動(dòng)態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對(duì)象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支