使用 img.crossOrigin = "Anonymous" 将图像绘制到画布上不起作用 [英] Drawing images to canvas with img.crossOrigin = "Anonymous" doesn't work

查看:41
本文介绍了使用 img.crossOrigin = "Anonymous" 将图像绘制到画布上不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在客户端独立 JS 应用程序中,我正在尝试使其能够在画布上调用 toDataURL(),在画布上我绘制了一些由 URL 指定的图像.即我可以在文本框中输入我想在画布上绘制的任何图像(托管在 imgur 上)的 url,单击绘制"按钮,它将在画布上绘制.最终用户应该能够将他们的最终渲染保存为单个图像,为此我使用的是 toDataURL().

In a client-side standalone JS application, I'm trying to make it so I can call toDataURL() on a canvas on which I've drawn some images specified by a URL. Ie I can input into a textbox the url to any image (hosted on, say, imgur) that I want to draw on the canvas, click a "draw" button and it will draw on the canvas. The end user should be able to save their final render as a single image, for this I'm using toDataURL().

无论如何,直到他们真正解决那个烦人的操作不安全"错误(哎呀,你要告诉最终用户他们可以用自己的数据做什么和不能做什么?)我遵循了一个解决方法,说将图像添加到 DOM 并将其 crossOrigin 属性设置为Anonmyous",然后将其绘制到画布上.

Anyway, until they actually fix that annoying "operation is insecure" error (gee, you're going to tell the end user what they can and can't do with their own data?) I followed a workaround that said to add the image to the DOM and set its crossOrigin property to "Anonmyous" and then draw it to the canvas.

这是我的代码的完整工作简化版本(但实际上会有更多功能):

Here's a full working simplified version of my code (but in reality there will be many more features):

<!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 并单击画,它会工作.然而,一旦我添加了那条线,整个东西就坏了,它甚至不会被画到画布上.

Without the img.crossOrigin = "Anonymous"; line, I could input http://i.imgur.com/c2wRzfD.jpg into the textbox and click draw and it would work. However as soon as I added that line, the whole thing broke and it won't even be drawn to the canvas at all.

我需要改变什么来解决这个问题?我真的需要能够为最终用户实现保存他们最终图像的功能,编写 html5 规范的人故意引入这个错误非常烦人.

What do I need to change to fix this? I really need to be able to implement the functionality for the end user to save their final image and it's extremely annoying that the people who wrote the html5 spec purposely introduced this bug.

推荐答案

您必须在 src 之前设置 CORS 请求 - 只需将行交换为:

You must set the CORS request before the src - just swap the lines into:

img.crossOrigin = "Anonymous";
img.src = document.getElementById("imgbox").value;

您还需要向图像添加一个 onload 处理程序,因为加载是异步的:

You will also need to add an onload handler to the image as loading is asynchronous:

img.onload = function() {
    context.drawImage(this, 40, 40);
    // call next step in your code here, f.ex: nextStep();
};
img.crossOrigin = "Anonymous";
img.src = document.getElementById("imgbox").value;

这篇关于使用 img.crossOrigin = "Anonymous" 将图像绘制到画布上不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆