详解canvas绘图时遇到的跨域问题
时间：2018/5/9 21:35:54阅读：
当在canvas中绘制一张外链图片时，我们会遇到一个跨域问题。示例如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>crossorigin</title></head><body><canvas width=&q…
当在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>
上一篇：canvas线条的属性详解