相关疑难解决方法(0)

我正在使用canvas进行一些简单的图像处理功能.用户上传图像,能够旋转并裁剪它,然后单击确定.然后将图像分成两半,每半部分被镜像到两个画布元素,如下所示:

原版的

镜像

这一切都适用于Chrome,Firefox,IE和Android设备.Safari虽然不会很好玩.除分割功能外,所有图像处理都能正常工作.它确实绘制了一个canvas元素,但另一个只是黑色.我试过更改drawImage代码,但我无法让它工作.

这是功能:

function splitImage(canvas, context, image, isLeftSide) {
  canvas.width = img.width;
  canvas.height = img.height;
  context.save();
  if(isLeftSide) {
    context.drawImage(
      image, 
      image.width / 2,
      0, 
      image.width, 
      image.height, 
      canvas.width / 2, 
      0, 
      canvas.width, 
      canvas.height
    );
    context.scale(-1, 1);
    context.drawImage(
      image, 
      image.width / 2, 
      0, 
      image.width, 
      image.height, 
      -canvas.width / 2, 
      0, 
      canvas.width, 
      canvas.height
    );
  } else {
    context.drawImage(
      image, 
      0, 
      0, 
      image.width / 2, 
      image.height, 
      0, 
      0, 
      canvas.width / 2, 
      canvas.height
    );
    context.scale(-1, 1);
    context.drawImage(
      image, 
      0, 
      0, 
      image.width / 2, 
      image.height, …

我想在我得到它之前在画布上绘制一个图像dataURL(),但返回的数据就像是空的.

当我在控制台中检查它时,我看到A字符串中有很多:( "data:image/png;base64,iVBO..some random chars... bQhfoAAAAAAAAAA... a lot of A ...AAAASUVORK5CYII=")

当我尝试将画布附加到文档时,也没有绘制任何内容,并且我没有在控制台中抛出任何错误.

这里有什么问题 ？

这是我的代码:

var img = new Image();
img.src = "http://somerandomWebsite/picture.png";
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext('2d');
context.drawImage(img, 0,0); // this doesn't seem to work
var dataURL = canvas.toDataURL(); // this will give me a lot of "A"    
doSomething(dataURL);

此外,在快速刷新时,图像被正确地绘制到画布上,但我在控制台中有一条错误消息并且dataURL是空的.

Firefox中的消息是:"SecurityError:操作不安全." ,
在Chrome中,它是"未捕获的安全错误:无法在'HTMLCanvasElement'上执行'toDataURL':可能无法导出受污染的画布." ,
在IE上,我只得到"SecurityError".

这是什么意思 ？