如何解决本地html的canvas跨域问题

Cat7373 发布于 2017/05/29 12:04
阅读 1K+
收藏 0

MySQL连接为什么挂死了?别踩坑!>>>

我现在在做一个html网页,这个网页用到了一个功能:

1. 将本地的图片用下面的代码加载

let img = new Image();
img.onload = function() {
    callback(img);
};
img.src = path;

2. 将图片画到 canvas 中

3. 将 canvas 中的图片转为 dataUrl

 

然而在调用 toDataUrl 的时候给我抛了个错:

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

我查过是 canvas 禁止跨域的问题,找了半天没找到解决方案,只好来这求助。

 

这儿有个问题的示例代码(打开 index.html 看源码):

https://pan.baidu.com/s/1mhNItCG

 

** 如果你的答案是这样的那还是不要回答了吧:

1. img.crossOrigin = "Anonymous";
   这是一个 html 文件,我希望它打开就能用,没有服务器,所以这个无效
2. 浏览器启动参数加 --allow-file-access-from-files
   我希望普通的浏览器不需要任何特殊设置就能用

 

===================

或者我说简单点,我想要一个html文件,双击它用浏览器打开后可以自动加载跟html在同一目录下的一张图片,比如<img src="img.jpg">,然后能把它转成dataUrl即可。

加载中
0
MinghanSui
MinghanSui

我用火狐跑着没问题啊

返回顶部
顶部