当前第2页 返回上一页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>crossorigin</title>
</head>
<body>
<canvas width="600" height="300" id="canvas"></canvas>
<img id="image" alt="">
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.setAttribute('crossorigin', 'anonymous');
image.onload = function() {
ctx.drawImage(image, 0, 0);
document.getElementById('image').src = canvas.toDataURL('image/png');
};
image.src = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg';
</script>
</body>
|
对比上面两段JS代码，你会发现多了这一行：
1 | image.setAttribute('crossorigin', 'anonymous');
|
就是这么简单，完美的解决了!
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
关于canvas线条的属性
如何使用canvas实现图片马赛克
以上就是如何解决canvas绘图时遇到的跨域问题的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
canvas文字怎么换行？canvas文字换行的方法介绍
canvas学习和滤镜实现代码
html5 canvas实现文本对齐的代码总结
canvas实现旋转风车的绘制
canvas像素点操作之视频绿幕抠图
如何使用canvas画出平滑的曲线?（代码）
使用canvas实现迷宫游戏
canvas的图片处理
canvas波浪效果的实现代码
canvas与svg的区别有什么？canvas和svg的区别比较
更多相关阅读请进入《canvas》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 如何解决canvas绘图时遇到的跨域问题
