js利用canvas.toDataURL("image/png")將canvas元素轉(zhuǎn)化為base64的圖片編碼。
python獲取base64編碼并解碼并且保存為圖片儲存。再利用opencv打開圖片時(shí)失敗。
<canvas id="myCanvas" width="240" height="240" style="border: 1px solid black;" onmousedown="down = 1;" onmouseup="down = 0;" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></canvas>
<form method="post" style="display: none">
{% csrf_token %}
<input type="text" name="img" id="photo">
<button type="submit" id="submit">submit</button>
</form>
<div >
<button type="button" onclick="upload()">上傳</button>
</div>
down = 0;//記錄鼠標(biāo)按下狀態(tài)
function upload(){
var canvas = document.getElementById("myCanvas");
url = canvas.toDataURL("image/png");//將canvas轉(zhuǎn)化為png的base64編碼
document.getElementById('photo').value = url;
document.getElementById('submit').click();//觸發(fā)from的submit
}
//當(dāng)鼠標(biāo)按下并滑動時(shí),繪制黑色圓點(diǎn)
function cnvs_getCoordinates(e){
if(down) {
var canvas = document.getElementById("myCanvas");
bbox = canvas.getBoundingClientRect();
x = Math.round((e.clientX - bbox.left) * (canvas.width / bbox.width));
y = Math.round((e.clientY - bbox.top) * (canvas.height / bbox.height));
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.arc(x,y,15,0,360,false);
ctx.fill();
ctx.closePath();
}
}
strs = request.POST.get('img').split(',')[1]#獲取base64編碼
imgdata = base64.b64decode(strs)#解碼
file = open('0.png', 'wb')#保存為0.png的圖片
file.write(imgdata)
file.close()
pimg = Image.open('0.png')#獲取圖片
cv2.namedWindow("Image")#創(chuàng)建窗口
cv2.imshow("Image",pimg)#顯示圖片
cv2.waitKey(0)
cv2.destroyAllWindows()
頁面截圖
opencv imshow截圖
保存的圖片
該圖片由js生成的base64為
data:image/png;base64,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
參考過的網(wǎng)址
stackoverflow
北大青鳥APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景,秉承“教育改變生活”的發(fā)展理念,致力于培養(yǎng)中國IT技能型緊缺人才,是大數(shù)據(jù)專業(yè)的國家
北大青鳥中博軟件學(xué)院創(chuàng)立于2003年,作為華東區(qū)著名互聯(lián)網(wǎng)學(xué)院和江蘇省首批服務(wù)外包人才培訓(xùn)基地,中博成功培育了近30000名軟件工程師走向高薪崗位,合作企業(yè)超4
中公教育集團(tuán)創(chuàng)建于1999年,經(jīng)過二十年潛心發(fā)展,已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術(shù)與教育服務(wù)機(jī)構(gòu),發(fā)展為教育服務(wù)業(yè)的綜合性企業(yè)集團(tuán),成為集合面授教學(xué)培訓(xùn)、網(wǎng)
達(dá)內(nèi)教育集團(tuán)成立于2002年,是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機(jī)構(gòu),是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市,融資1
曾工作于聯(lián)想擔(dān)任系統(tǒng)開發(fā)工程師,曾在博彥科技股份有限公司擔(dān)任項(xiàng)目經(jīng)理從事移動互聯(lián)網(wǎng)管理及研發(fā)工作,曾創(chuàng)辦藍(lán)懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負(fù)責(zé)iOS教學(xué)及管理工作。
浪潮集團(tuán)項(xiàng)目經(jīng)理。精通Java與.NET 技術(shù), 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗(yàn),技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點(diǎn)難點(diǎn)突出、引人入勝。
精通HTML5和CSS3;Javascript及主流js庫,具有快速界面開發(fā)的能力,對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗(yàn)。曾經(jīng)歷任德國Software AG 技術(shù)顧問,美國Dachieve 系統(tǒng)架構(gòu)師,美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。