国产成人精品亚洲777人妖,欧美日韩精品一区视频,最新亚洲国产,国产乱码精品一区二区亚洲

您的位置:首頁技術文章
文章詳情頁

javascript - canvas畫圖

瀏覽:109日期:2023-03-25 15:14:23

問題描述

寫了一個函數,第一次調用canvas的drawImage將本地的一張圖片的一部分給畫下來(能夠成功),然后將canvas畫好的這張圖調用toDataURL轉化為image對象的src屬性,然后對這張canvas畫的圖調用同樣的方法進行二次繪畫為什么不能成功?

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)//畫好的第一個canvas對象可以正常顯示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作圖加載成一張圖片,是因為不知道canvas可不可以繪制canvas document.body.appendChild(newImg)//這張圖片能正常顯示 document.body.appendChild(canvas2)//canvas元素加上了,但是繪圖不成功} }

問題解答

回答1:

你是不是用的外站圖片? 如果是,需要給圖片加上 crossOrigin='Anonymous' 屬性。

html方式

<img src='http://www.intensediesel.com/wenda/...' crossOrigin='Anonymous' />

js方式

var image = new Image();image.src = 'http://www.intensediesel.com/wenda/...';image.crossOrigin = 'Anonymous';

你可以在線把玩一下我用你的代碼修改的可運行的版本:https://jsfiddle.net/5g9n9esk/

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 汤阴县| 鄂尔多斯市| 阿拉善左旗| 宿州市| 桦南县| 卢湾区| 天门市| 泸西县| 长顺县| 永寿县| 鹤壁市| 藁城市| 蒙山县| 安阳县| 姚安县| 正阳县| 阿荣旗| 广水市| 富源县| 高邮市| 汝南县| 余庆县| 清水县| 阳曲县| 杭州市| 黑河市| 宜良县| 遂溪县| 松原市| 莱西市| 塔河县| 卓资县| 佛坪县| 玉林市| 盐山县| 永德县| 曲阳县| 瑞丽市| 侯马市| 会同县| 和静县|