相关疑难解决方法(0)
crossorigin属性的目的......？
在图像和脚本标签中.
我的理解是您可以访问其他域上的脚本和图像.那么什么时候使用这个属性？
当你想限制他人访问你的脚本和图像的能力时,这是吗？
图片
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin
脚本
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
推荐指数
解决办法
查看次数
使用img.crossOrigin ="Anonymous"将图像绘制到画布不起作用
在客户端独立的JS应用程序中,我正在努力实现它,所以我可以在画布上调用toDataURL(),在画布上我绘制了一些由URL指定的图像.即我可以在文本框中输入我要在画布上绘制的任何图像(托管在,例如,imgur)上的URL,单击"绘制"按钮,它将在画布上绘制.最终用户应该能够将他们的最终渲染保存为单个图像,因为我正在使用toDataURL().
无论如何,直到他们真正解决了令人讨厌的"操作不安全"错误(哎呀,你要告诉最终用户他们可以做什么,不能做他们自己的数据？)我按照一个解决方法说要添加图像到DOM并将其crossOrigin属性设置为"Anonmyous",然后将其绘制到画布上.
这是我的代码的完整工作简化版本(但实际上会有更多功能):
<!DOCTYPE html5>
<html>
<head>
<style>
#canvas {border:10px solid green;background-color:black;}
#imgbox {border:2px solid black;}
</style>
</head>
<body>
<canvas id="canvas" width=336 height=336></canvas>
<br><br>
<input size=60 id="imgbox">
<input type="submit" value="Draw" onclick=draw()>
<script>
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img = new Image();
img.src = document.getElementById("imgbox").value;
img.crossOrigin = "Anonymous";
context.drawImage(img, 40, 40);
}
</script>
</body>
</html>
如果没有该img.crossOrigin = "Anonymous";行,我可以输入http://i.imgur.com/c2wRzfD.jpg文本框并单击绘图,它会起作用.然而,只要我添加该行,整个事情就会破碎,甚至根本不会被绘制到画布上.
我需要更改什么来解决这个问题？我真的需要能够为最终用户实现保存最终图像的功能,并且编写html5规范的人故意介绍了这个bug,这非常令人讨厌.
推荐指数
解决办法
查看次数
img标签的HTML crossorigin属性
我试图了解如何使用img标记的crossorigin属性.我找不到一个好的例子(我发现的关于CORS启用的图像用JavaScript代码解释,因此我看不到img标签的crossorigin属性.
我猜错了,如果我理解错了,请纠正我的错误.
首先,可以编写下面的代码片段来绘制图像到画布:
<canvas id="canvas" width=400 height=400></canvas>
<br><br>
<img id="image" src="http://...." alt="" width="400" height="400">
<script>
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img = new Image();
img.crossOrigin = "Anonymous";
img.src = document.getElementById("image").value;
context.drawImage(img, 40, 40);
}
</script>
下面的代码是否等同于上面的代码？它不包含"img.crossOrigin",但在img标记中具有crossorigin属性.
<canvas id="canvas" width=400 height=400></canvas>
<br><br>
<img id="image" crossorigin="anonymous"src="http://...." alt="" width="400" height="400">
<script>
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img = new Image();
img.src = document.getElementById("image").value;
context.drawImage(img, 40, 40);
}
</script>
说实话,我无法进行实验,因为我不知道哪个站点允许将其图像用作CORS. …
推荐指数
解决办法
查看次数
阻止HTTP基本身份验证显示图像提示
如果我在页面上有来自不同域的图像,并且该图像受HTTP基本身份验证保护,则浏览器将向用户显示身份验证对话框,如下所示:
鉴于该网站是一个论坛,因此包含大量用户生成的内容,恶意用户很容易添加这样的图像,然后可能收获一两个人的登录凭据他们的站点凭据进入对话框.
有没有办法防止在没有使用图像主机白名单的情况下显示凭证提示(不理想,因为它对用户非常严格)或确保图像在允许之前可以访问(可以解决)？
推荐指数
解决办法
查看次数