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

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

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

## 什么是“被污染”的 canvas? ##

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

html canvas ==> blob

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>canvasToBlob
        </title>
    </head>
    
    <body>
        <h1>qiphon--canvas--to--blob</h1>
        <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>
    </body>
    
    </html>

php接收

<?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; ?>

打印出来的数据格式

Blob(278776) {size: 278776, type: "image/png"}
    21.html:49 OK
    1.html:47 array(1) {
      ["file"]=>
      array(5) {
        ["name"]=>
        string(4) "blob"
        ["type"]=>
        string(9) "image/png"
        ["tmp_name"]=>
        string(24) "E:\xampp\tmp\phpD987.tmp"
        ["error"]=>
        int(0)
        ["size"]=>
        int(278776)
      }
    }
    array(1) {
      ["img"]=>
      string(3) "222"
    }
    上传成功