javascript - canvas畫圖
問題描述
寫了一個(gè)函數(shù),第一次調(diào)用canvas的drawImage將本地的一張圖片的一部分給畫下來(能夠成功),然后將canvas畫好的這張圖調(diào)用toDataURL轉(zhuǎn)化為image對(duì)象的src屬性,然后對(duì)這張canvas畫的圖調(diào)用同樣的方法進(jìn)行二次繪畫為什么不能成功?
function paint(img) {var canvas = document.createElement(’canvas’)canvas.width = 400canvas.height = 400var ctx = canvas.getContext(’2d’)ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 400, 400)document.body.appendChild(canvas)//畫好的第一個(gè)canvas對(duì)象可以正常顯示var newImg = new Image()newImg.src = canvas.toDataURL()newImg.onload = function() { var canvas2 = document.createElement(’canvas’) canvas2.width = 200 canvas2.height = 200 var ctx2 = canvas2.getContext(’2d’) ctx2.drawImage(newImg, 0, 0, Math.abs(posX), Math.abs(posY), 0, 0, 200, 200)//這里之所以把第一次的canvas作圖加載成一張圖片,是因?yàn)椴恢纁anvas可不可以繪制canvas document.body.appendChild(newImg)//這張圖片能正常顯示 document.body.appendChild(canvas2)//canvas元素加上了,但是繪圖不成功} }
問題解答
回答1:你是不是用的外站圖片? 如果是,需要給圖片加上 crossOrigin='Anonymous' 屬性。
html方式
<img src='http://www.b3g6.com/wenda/...' crossOrigin='Anonymous' />
js方式
var image = new Image();image.src = 'http://www.b3g6.com/wenda/...';image.crossOrigin = 'Anonymous';
你可以在線把玩一下我用你的代碼修改的可運(yùn)行的版本:https://jsfiddle.net/5g9n9esk/
相關(guān)文章:
1. docker - 各位電腦上有多少個(gè)容器啊?容器一多,自己都搞混了,咋辦呢?2. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””3. mac里的docker如何命令行開啟呢?4. 關(guān)于docker下的nginx壓力測試5. Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問題6. nignx - docker內(nèi)nginx 80端口被占用7. docker容器呢SSH為什么連不通呢?8. 如何解決Centos下Docker服務(wù)啟動(dòng)無響應(yīng),且輸入docker命令無響應(yīng)?9. docker start -a dockername 老是卡住,什么情況?10. dockerfile - 我用docker build的時(shí)候出現(xiàn)下邊問題 麻煩幫我看一下

網(wǎng)公網(wǎng)安備