博客

IE11下使用canvas.toDataURL报SecurityError错误的解决方法

  • Post category:http

在IE11浏览器下使用canvas.toDataURL方法时，有时会遇到SecurityError错误的问题。以下是解决这个问题的完整攻略：

解决方案

1. 使用本地图片

在IE11浏览器下，使用.toDataURL方法时，需要使用本地图片。如果使用跨域图片，会导致SecurityError错误。

以下是使用本地图片的示例：

var img = new Image();
img.onload = function() {
  var canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL();
};
img.src = 'local_image.png';

2. 设置图片CORS属性

如果必须使用跨域图片，可以设置图片的CORS属性。在服务器端，需要设置Access-Control-Allow-Origin头，允许跨域访问。

以下是设置图片的CORS属性的示例：

var img = new();
img.crossOrigin = 'anonymous';
img.onload = function() {
  var canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL();
};
img.src = 'cross_origin_image.png';

示例1：使用本地图片

以下是使用本地图片的示例：

var img = new Image();
img.onload = function() {
  var canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL();
};
img.src = 'local_image.png';

示例2：设置图片的CORS属性

以下是设置图片的CORS属性的示例：

var img = new Image();
img.crossOrigin = 'anonymous';
img.onload = function() {
  var canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL();
};
img.src = 'cross_origin_image.png';

总结

在IE11浏览器下使用canvas.toDataURL方法时，有时会遇到SecurityError错误的问题。本文提供了解决这个问题的完整攻略，包括使用本地图片和设置图片的CORS属性。同时，文还提供了两个例，分别介绍了如何使用本地图片和如何设置图片的CORS属性。

Tags: