Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported
启用了 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"
}
上传成功
还没有评论,来说两句吧...