当在canvas中绘制一张外链图片时，我们会遇到一个跨域问题。
示例如下：
<!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.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>
当在浏览器中打开这个页面时，你会发现这个问题：
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
这是受限于 CORS 策略，会存在跨域问题，虽然可以使用图像，但是绘制到画布上会污染画布，一旦一个画布被污染,就无法提取画布的数据，比如无法使用使用画布toBlob(),toDataURL(),或getImageData()方法；当使用这些方法的时候 会抛出上面的安全错误
这是一个苦恼的问题，但幸运的是img新增了crossorigin属性，这个属性决定了图片获取过程中是否开启CORS功能：
<!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代码，你会发现多了这一行：
image.setAttribute('crossorigin', 'anonymous');
就是这么简单，完美的解决了!
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
在默认情况之下，如果在Canvas之中将某个物体（源）绘制在另一个物体（目标）之...
简介： 6月4日，以“开启分布式云新时代”为主题2021云边协同大会在北京举行，本...
本文没有咬文嚼字的地方，只是一个配色技巧的分享，十分简单，简单到流泪，但或...
1、纯工具操作步骤，懂代码更容易 划线就是不符合国人的审美观念，看着就别扭，...
前言 Canvas绘制多变形非常简单，只要懂得Canvas路径 + 简单的初中数学知识即可...
作者：Joe Seifi 译者：前端小智 移动： https://mp.weixin.qq.com/s/p5... 有梦...
1.先瞧瞧效果： 2.代码是这样的： img src=images/circle.png alt= id=circle/@m...
折叠式卡片布局在PC版网站中可能不常见，但是在手机版，小屏幕的网页浏览会大发...
一、虽然有的属性是boolean类型，但仍旧建议按照XHTML书写（属性名=属性值）格式...
背景 在公司参与一个原生APP和h5混合开发的项目，本人在项目中负责h5部分，现将...
