【已解決】Canvas引入跨域的圖片,導致toDataURL()報錯的問題。
【場景】
使用者開啟網頁,則請求騰訊COS(圖片伺服器)上的圖片。使用canvas繪圖。
然後,使用者可以重新選擇圖片、裁剪、上傳。
【問題】
圖片首次載入,選擇新圖片後裁剪、繪製都沒有問題。但上傳失敗,報錯如下:
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
經過了解,需要在圖片首次引用時,設定crossOrigin欄位:
var c=document.getElementById("cover_show"); var img=new Image(); img.src="http://vsqx-cover-xxxxxx.coscd.myqcloud.com/"+this.vsqx_uid+".jpg"; //增加這一行: img.setAttribute("crossOrigin",'anonymous'); img.onload = function(){ var cxt=c.getContext("2d"); cxt.drawImage(img,0,0,300,150,0,0,200,126); }
然後再次執行。發現圖片首次載入時,不顯示了。。。
控制檯報錯如下:
【最終解決方法】
登入騰訊雲COS,找到這個儲存桶,設定“跨域訪問CORS”。(其他PHP/JAVA伺服器同理)
再次測試:圖片顯示成功,圖片上傳成功。
相關推薦
【已解決】Canvas引入跨域的圖片,導致toDataURL()報錯的問題。
【場景】 使用者開啟網頁,則請求騰訊COS(圖片伺服器)上的圖片。使用canvas繪圖。 然後,使用者可以重新選擇圖片、裁剪、上傳。 【問題】 圖片首次載入,選擇新圖片後裁剪、繪製都沒有問題。但上傳失敗,報錯如下: Failed to execute 'toDa
【已解決】上傳專案到binary 上面的時候報錯:FAILURE: Build failed with an exception.
zhangyinshandeMacBook-Pro:BaseLibs zhangyinshan$ ./gradlew install FAILURE: Build failed with an exception. * Where: Build file '/Users/zhangyinsh
【已解決】使用Navicat連接MySQL數據庫時報錯Client does not support authentication protocol requested by server; consider upgrading MySQL client
ransient nbsp .com res ctr lis org get nfa 報錯緣由: 起初在驗證一個mybatis的demo時提示“Error querying database”(見下方完整代碼),找了很多方法沒有解決,最後在貼吧找到答案。錯誤原因是安裝m
【已解決】Windows無法啟動MongoDB服務,錯誤1053(適用win10)
1. 發現問題 cmd無法啟動mongo服務 net start mongodb無效 轉到我的電腦-服務,手動啟動服務,無效,報錯如下: 2. 解決問題 刪除服務 sc delete MongoDB 重新載入配置檔案mongod
【已解決】在 本地計算機 無法啟動 DCOM 伺服器程序啟動器 服務。
計算機有個問題,就是啟動DCOM伺服器程序啟動器這個服務的時候提示:在 本地計算機 無法啟動 DCOM 伺服器程序啟動器 服務。錯誤 1058: 無法啟動服務,原因可能是已被禁用或與其相關聯的裝置沒有啟動。解決方法是:找到DCOM服務並開啟屬性,選擇登入選項卡,選擇硬體設定檔
【已解決】如何判斷處理器是大端,或小端?
去年11月份的面試題,今天有空整理出來了,算是總結。 ************************************************************ 大端、小端指對運算元的存放,大端從高到低放,小端從低到高放。X86的intel平臺為小端,微控制器
lnmp 搭建後,nginx下php文件404但是html文件正常訪問【已解決】
() stack 找到 span nec mis group php 方法 今天遇到 了如題的問題。 上網查了很多資料 最終是在這個鏈接 裏 找到了能解決我的問題的方法 https://stackoverflow.com/questions/23443398/nginx-e
【已解決】Https請求——基礎連接已經關閉 發送時發生錯誤
自己 服務器 poi make 手動 default 比較 man 消息 本人在做商用項目的推送消息功能時,借助第三方推送服務。這裏避免有打廣告的嫌疑,就不報名字了。由於是通過調用API接口,所以Post方法是自己寫的,但是在開發環境是可以正常推送的,但是一上線就出各種問題
cmd 【已解決】windows連接手機,運行adb devices提示“unauthorized”
window 連接 eight div inf http ima 開發者 img 報錯截圖如下: 問題原因:電腦連接手機。手機未授權 解決方式: 設置----開發者選項-----打開USB調試,出現如下彈框,點擊“確定”即可解決問題。 cmd 【已解決】win
Python + Appium 【已解決】driver(session)在多個class之間復用,執行完一個類的用例,再次執行下個類的用例時不需要初始化
nic bject config com appium client lee session ted py文件的名稱為:appium_config.py 中的寫法如下 # coding=UTF-8 ‘‘‘ Created on 2017.1.13 @author: Lu
【已解決】在 Visual Studio 中設置 JavaScript/TypeScript 的斷點 腳本出現自動中斷錯誤
chrome alt 啟動應用 出現 ont ash 解決方法 腳本調試 設置 運行ASP.NET Core 程序出現錯誤如下: 已啟用 Visual Studio 中的 Chrome 腳本調試 在 Visual Studio 中設置 JavaScript/Type
【已解決】【Mac】 運行adb提示command not found,需要配置adb環境
user spa bsp pre macosx adb 終端 命令 convert 問題:運行adb提示command not found 解決措施: 1、下載安裝:android-sdk-macosx 下載路徑:http://down.tech.sina.co
【已解決】IIS搭建 asp.net core 項目後 其他電腦訪問不到資源文件
app 技術 項目 wro oot AS tar .net 訪問 IIS搭建asp.net core 項目後,訪問不到裏面的資源文件(圖片等),解決方法如下: 1.檢查asp.net core發布文件中的資源文件是不是都放到了wwwroot名稱的目錄中。 2.檢查asp.
【已解決】mac上appium報錯:“Could not find aapt Please set the ANDROID_HOME environment variable with the Android SDK root directory path”
resource sset root could not fun ror 環境 apt direct 按照網上教程配置完appium環境後,真機跑自動化過程,遇到如下報錯: appium報錯如下: [ADB] Checking whether aapt is present
py+selenium 直接給日期賦值,控制臺調試報錯【已解決】
pyc .exe 可能 調試 原來 日期控件 pychar info tel 目標:給帶日期控件的輸入框賦值。 百度去搜索讓你各種去只讀readonly屬性,再send_keys 方法: 其實既然可以去除readonly屬性,那就可以直接給屬性賦值,
為什麽用屏幕錄像專家錄制的視頻上傳到優酷後很不清晰?【已解決】
入口 解決 屏幕錄像 電腦 tro str 視頻 全屏 什麽 為什麽用屏幕錄像專家錄制的視頻上傳到優酷後很不清晰?用屏幕錄像專家錄好的視頻傳到優酷上怎麽保證它的清晰度為什麽我用屏幕錄像專家錄下的視頻在自己的電腦上看是高清的可是傳到優酷上我在打開自己的視頻就變的模糊我用屏幕錄
打印機無法打印是怎麽回事打印機故障維修技巧【已解決】
strong 幫助 出現 .com 教程 無法 打印 等等 攻略 打印機無法正常打印文檔怎麽辦呢?做為常用的設備,其打印機出現故障後,我們需要有針對性的根據現象進行排除故障日常打印機故障攻略,大家知道在打印過程中,我們常常會遇到這樣或那樣的故障,如卡紙、打印模糊、進紙不順、
屏幕錄像專家V7.5怎麽錄的不清楚,怎樣才能錄制清晰呢【已解決】
jpg mage ima cto 技術 屏幕錄像專家 course tex html 屏幕錄像專家V7.5怎麽錄的不清楚,怎樣才能錄制清晰呢【已解決】可以參考 屏幕錄制超清視頻教程屏幕錄像清晰教程51CTO學習入口屏幕錄像專家V7.5怎麽錄的不清楚,怎樣才能錄制清晰呢【已解
一點編程基礎都沒有先學什麽語言好大概多久能學會編程【已解決】
英文 系統 開始學習 簡單的 一點 中文編程 痛苦 oss 視頻 學習編程是一門苦差事,尤其是剛入門的時候,對著哪些它認識你,你不認識它的代碼別提是多麽痛苦的一件事情了,很多朋友可能受不了這種痛苦從而放棄了學習,因為很多人沒有那個耐心和毅力。當然學習編程除了耐心和毅力之外還
屏幕錄像專家怎麽使錄制出來的視頻比較清晰【已解決】
錄制 圖片 解決 watermark 怎麽 html htm ces com 《屏幕錄像專家》是一款專業的屏幕錄像制作工具,這款軟件界面是中文版本,裏面的內容並不怎麽復雜,錄制視頻和簡單按設置的快捷鍵、點擊錄制鍵、或者點擊三角按鈕,就可以錄制了。但是在使用過程中,可能會遇到