javascript - canvas画图
问题描述
写了一个函数,第一次调用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='https://www.haobala.com/wenda/...' crossOrigin='Anonymous' />
js方式
var image = new Image();image.src = 'https://www.haobala.com/wenda/...';image.crossOrigin = 'Anonymous';
你可以在线把玩一下我用你的代码修改的可运行的版本:https://jsfiddle.net/5g9n9esk/
相关文章:
1. javascript - js判断一个数组是否重复2. python相关问题求解决,有偿3. python3.x - mongodb 显示不出中文,都是方块,该如何解决?4. javascript - prismplayer播放器全屏问题5. javascript - js 修改表格元素的,可以用DOM操作实现吗?6. javascript - Chrome 扩展,更新别人的扩展 能不能上传到插件商店?7. javascript - 这种上传图片预览怎么做?8. javascript - input输入框触发change事件后,外部元素会被选中9. javascript - 在sublime中如何给.vue文件注释?10. javascript - js如何捕获到Uncaught (in promise) TypeError这样的异步错误?