Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported

本是古典 何须时尚 2022-05-26 05:35 483阅读 0赞

启用了 CORS 的图片
HTML 规范中图片有一个 crossorigin 属性,结合合适的 CORS 响应头,就可以实现在画布中使用跨域 元素的图像。

什么是“被污染”的 canvas?

尽管不通过 CORS 就可以在画布中使用图片,但是这会污染画布。一旦画布被污染,你就无法读取其数据。例如,你不能再使用画布的 toBlob(), toDataURL() 或 getImageData() 方法,调用它们会抛出安全错误。

html canvas ==> blob

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>canvasToBlob
  6. </title>
  7. </head>
  8. <body>
  9. <h1>qiphon--canvas--to--blob</h1>
  10. <script> var dd = document.getElementsByTagName('h1')[0] dd.onclick = function () { //声明img var img = new Image() img.crossOrigin = "Anonymous";//解决跨域图片问题,就是上面提及的 img.src = 'http://img1.imgtn.bdimg.com/it/u=594559231,2167829292&fm=27&gp=0.jpg' //加载图片成功 img.onload = function () { var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); var width = img.width; var height = img.height; canvas.width = width; canvas.height = height; //绘制到canvas上 ctx.drawImage(img, 0, 0, width, height); document.getElementsByTagName('body')[0].appendChild(canvas); //利用Blob转换,成数据 canvas.toBlob(function (blob) { //创建forme var form = new FormData(); form.append('file', blob); form.append('img', 222); var xmlHttp = new XMLHttpRequest(); xmlHttp.open("POST", '1.php'); //注意跨域问题 xmlHttp.send(form); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {       console.log(xmlHttp.responseText);     } else {       console.log(xmlHttp.statusText);     } }; console.log(blob) }, 'image/png'); } } </script>
  11. </body>
  12. </html>

php接收

  1. <?php var_dump($_FILES); var_dump($_REQUEST); $imgname = $_FILES['file']['name']; $tmp = $_FILES['file']['tmp_name']; $filepath = './'; if(move_uploaded_file($tmp,$filepath.$imgname.".png")){ echo "上传成功"; }else{ echo "上传失败"; } die; ?>

打印出来的数据格式

  1. Blob(278776) {size: 278776, type: "image/png"}
  2. 21.html:49 OK
  3. 1.html:47 array(1) {
  4. ["file"]=>
  5. array(5) {
  6. ["name"]=>
  7. string(4) "blob"
  8. ["type"]=>
  9. string(9) "image/png"
  10. ["tmp_name"]=>
  11. string(24) "E:\xampp\tmp\phpD987.tmp"
  12. ["error"]=>
  13. int(0)
  14. ["size"]=>
  15. int(278776)
  16. }
  17. }
  18. array(1) {
  19. ["img"]=>
  20. string(3) "222"
  21. }
  22. 上传成功

发表评论

表情:
评论列表 (有 0 条评论,483人围观)

还没有评论,来说两句吧...

相关阅读