相关疑难解决方法(0)

受污染的画布可能无法出口

我想将我的画布保存为img.我有这个功能:

function save() {
    document.getElementById("canvasimg").style.border = "2px solid";
    var dataURL = canvas.toDataURL();
    document.getElementById("canvasimg").src = dataURL;
    document.getElementById("canvasimg").style.display = "inline";
}

Run Code Online (Sandbox Code Playgroud)

它给了我错误:

Uncaught SecurityError:无法在'HTMLCanvasElement'上执行'toDataURL':可能无法导出受污染的画布.

我该怎么办？

javascript html5-canvas

use*_*096

2017 04-10

158
推荐指数

10
解决办法

19万
查看次数

canvas.toDataURL()和drawImage()的安全性错误

<!doctype html>
<canvas id="canvas" height="200" width="200"></canvas>
<div id="new"></div>
<script>
var div = document.getElementById("new");
var canvas = document.getElementById("canvas");  
var ctx = canvas.getContext("2d");  
var img = new Image();

img.src = 'http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png';
//img.src = 'local.png';

img.onload = function(){
    //draws the image on the canvas (works)
    ctx.drawImage(img,0,0,200,200);

    //creates an image from the canvas (works only for local.png)
    var sourceStr = canvas.toDataURL();

    //creates the img-tag and adds it to the div-container
    var newImage = document.createElement("img");
    newImage.src = sourceStr;
    div.appendChild(newImage);
}
</script>

Run Code Online (Sandbox Code Playgroud)

此脚本使用html5徽标创建画布.从这个画布我想使用"toDataURL()" - 方法创建一个图像.在这里我收到一个安全错误.

Firefox说 …

javascript firefox google-chrome html5-canvas

mar*_*tin

2012 02-19

5
推荐指数

2
解决办法

2万
查看次数

在Tomcat中添加响应头

我有一个 GeoServer 应用程序，运行在 Tomcat 之上。我想要的是设置一个额外的响应标头 - Access-Control-Allow-Origin: *。我需要这个，因为现在我无法在地图应用程序中实现功能，因为在浏览器中我得到

操作不安全

信息

根据此线程，我需要设置此标头："Access-Control-Allow-Origin: *"根据Tomcat 中的此线程，我可以通过 CATALINA_HOME/conf/web.xml 设置它：

<filter>
   <filter-name>CorsFilter</filter-name>
   <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
 </filter>
 <filter-mapping>
   <filter-name>CorsFilter</filter-name>
   <url-pattern>/*</url-pattern>
 </filter-mapping>

Run Code Online (Sandbox Code Playgroud)

我确实这样做了，重新启动了 Tomcat，但我仍然没有看到该标头响应。服务器响应客户端的内容如下：

那么，我该如何修复它呢？如何强制我的 GeoServer 应用程序（第三方应用程序）响应"Access-Control-Allow-Origin: *"？

编辑

我应该补充一点，我正在使用 Tomcat 8。此外，我的过滤器现在看起来像：

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
  <param-name>cors.allowed.origins</param-name>
  <param-value>*</param-value>
  </init-param>
  <init-param>
  <param-name>cors.allowed.methods</param-name>
  <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
</filter>
<filter-mapping>
 <filter-name>CorsFilter</filter-name>
 <url-pattern>/*</url-pattern>
</filter-mapping>

Run Code Online (Sandbox Code Playgroud)

我将此过滤器添加到主 web.xml 和应用程序的 web.xml 中，但无济于事。因此，之前解决这个问题的所有解决方案似乎都已经过时了。

tomcat

Jac*_*ian

2017 05-23

5
推荐指数

1
解决办法

2万
查看次数

SecurityError:操作不安全.使用Htmlcanvas

试图将drag我的画布元素转换为PNG或Jpeg照片(像polyvore一样的情绪板概念),这样我就可以在一张PNG或Jpeg照片中一次性查看我在画布上放置的图像.所以我可以保存它或对照片做任何事情.

但我遇到了一个SecurityError:操作不安全.当我按下保存并尝试转换数据以使用.alert()方法实际显示保存的图像给自己.我有什么想法可以通过这个错误来实现目标？谢谢!

这是我的项目链接到现场查看:http://amechi101.github.io/moodboard/

HTML:

 <div id="container" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
 <div class="buttonMoodBoard">
    <button class="btn btn-primary btn-lg" id="save">Save Moodboard</button> 
 </div>

Run Code Online (Sandbox Code Playgroud)

使用Javascript:

var stage = new Kinetic.Stage({
                container: 'container',
                width: 500,
                height:500
            });

            var layer = new Kinetic.Layer();

uni_width = 120;

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    data = ev.dataTransfer.getData("Text");
    img_received = document.getElementById(data);
    ratio = img_received.height / img_received.width;

    var c=document.getElementById("container");
    drop_x=ev.pageX-c.offsetLeft;
    drop_y=ev.pageY-c.offsetTop;

    var imageObj = new Image();
    imageObj.src = img_received.src; …

Run Code Online (Sandbox Code Playgroud)

javascript html5 canvas

Ame*_*chi

lucky-day

3
推荐指数

1
解决办法

6674
查看次数

SecurityError:canvas.toDataURL中的操作不安全

我试图解决下一个错误,但没有成功.

我有以下jQuery和HTML5代码:

<script language="javascript" type="text/javascript">

  function doExportMap() {

      map.once('postcompose', function(event) {

        var canvas = event.context.canvas;

        var exportBMPElement = document.createElement('a');
        exportBMPElement.download = 'Mapa.bmp';
        exportBMPElement.href = canvas.toDataURL('image/bmp');
        document.body.appendChild(exportBMPElement);
        exportBMPElement.click();
        document.body.removeChild(exportBMPElement);
      });

      map.renderSync();
  }

Run Code Online (Sandbox Code Playgroud)

它工作得很好,但现在,我收到以下错误:

SecurityError: The operation is insecure.
exportBMPElement.href = canvas.toDataURL('image/bmp');

Run Code Online (Sandbox Code Playgroud)

怎么了？有任何想法吗？

有趣的是,我没有从外部源加载图像.该图像来自localhost

javascript jquery html5 openlayers openlayers-3

Jav*_*ñoz

2015 10-31

2
推荐指数

1
解决办法

1万
查看次数

画布图像跨平台不安全错误

我有这个代码用于从不同的服务器URL创建画布图像

function getBase64Image(imageUri) { 
    var canvas = document.createElement("canvas");
    ctx = canvas.getContext("2d"); 
    var img = new Image();
    img.src = imageUri;
    img.crossOrigin = "Anonymous";
    img.onload = function() {
       canvas.width = this.width;
       canvas.height = this.height;
       ctx.drawImage(img, 0, 0, this.width, this.height);
       var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
       var dataURL = canvas.toDataURL("image/png");
       document.getElementById("dummyhiddenField").value = dataURL;
   };
}

Run Code Online (Sandbox Code Playgroud)

我试图从服务器获取图像并将其画布网址设置为隐藏字段,但仅适用于本地图像

根据stackoverflow的其他答案我设置crossOrigin = "Anonymous"哪些不起作用也无法从服务器设置访问源,必须管理localscript的所有内容

谢谢

javascript canvas

Kir*_*fda

lucky-day

2
推荐指数

1
解决办法

4596
查看次数