Question

点击它时会出现例外：<?php $sock=socket_create(AF_INET,SOCK_STREAM,SOL_TCP); var_dump($sock,socket_connect($sock,gethostbyname('ipinfo.io'),80),socket_close($sock));

http://jsfiddle.net/mx9pggs7/

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

Answer 1

要使crossOrigin属性起作用，必须在加载图像之前设置它。您无法在已修改的图像上更改它。

可悲的是，从提供的链接看起来没有设置crossOrigin匿名标题。

如您所见，我在代码段中添加了2个图片代码。没有crossOrigin属性的那个正确加载，另一个根本没有加载。

＆＃13;

var canvas = new fabric.Canvas('c');
var url = "https://ae01.alicdn.com/kf/HTB1wM8QLpXXXXcgXVXXq6xXFXXXB/223239535/HTB1wM8QLpXXXXcgXVXXq6xXFXXXB.jpg?size=172993&height=1082&width=790&hash=62c4f508fb7a71cf577223a35c25f896";


fabric.Image.fromURL(url, function(oImg) {
  oImg.set({
    'left': 0
  });
  oImg.set({
    'top': 0
  });
  canvas.add(oImg);
}, { crossOrigin: 'anonymous' });



document.getElementById('save').addEventListener('click', function() {
  document.getElementById('output').innerHTML = '<img crossOrigin="anonymous" src="' + canvas.toDataURL('image/png') + '" />';
});

＆＃13;

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.3/fabric.min.js"></script>
<button id="save">Save</button>
<canvas id="c" width="200" height="200"></canvas>
<div id="output">
Output will be here
</div>
<img
crossOrigin="anonymous"     src="https://ae01.alicdn.com/kf/HTB1wM8QLpXXXXcgXVXXq6xXFXXXB/223239535/HTB1wM8QLpXXXXcgXVXXq6xXFXXXB.jpg?size=172993&height=1082&width=790&hash=62c4f508fb7a71cf577223a35c25f896" />
<img     src="https://ae01.alicdn.com/kf/HTB1wM8QLpXXXXcgXVXXq6xXFXXXB/223239535/HTB1wM8QLpXXXXcgXVXXq6xXFXXXB.jpg?size=172993&height=1082&width=790&hash=62c4f508fb7a71cf577223a35c25f896" />

＆＃13;

即使在crossOrigin =“anonymous”时，也无法在fabricjs中调用toDataURL

1 个答案: