画布和图片互相转换，使用画布canvas通过ajax、表单等方式将图片上传到服务器，拿来就用，拿来测试

本文链接：https://blog.csdn.net/mengzhanfei1/article/details/122298962

<?
//session_start();
header("Content-type: text/html; charset=utf-8");
header('Access-Control-Allow-Origin:*');//
header('Access-Control-Allow-Methods:*'); //
if($_SERVER['REQUEST_METHOD']=='POST') {
    $file='../tt/'.rand().'.jpg';
    print_r(file_put_contents($file,file_get_contents('php://input')));die;
    print_r(move_uploaded_file(current($_FILES)['tmp_name'],$file));die;
}
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试</title>
</head>
<body>


<img src="" alt="" id="image">
<!--<img src="Upload/test/1.jpg" alt="" id="image">-->
<canvas id="canvas" style="background: #eee;"></canvas>
<iframe src="" frameborder="0" id="iframe" width="500" height="500"></iframe>
<script>
    //图片转为canvas
    function convertImageToCanvas(image) {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        canvas.getContext("2d").drawImage(image, 0, 0);
        return canvas;
    }

    //Canvas转为图片
    function convertCanvasToImage(canvas) {
        var image = new Image();
        image.src = canvas.toDataURL("image/png");
        return image;
    }

    //画布写入图片
    canvas.width=500;
    canvas.height=200;

    // image.crossOrigin="anonymous";
    // image.src='https://www.baidu.com/img/flexible/logo/pc/result.png';//图片跨域不行

    //确保图片加载完成后才可以操作
    image.onload= function () {
        canvas.getContext("2d").drawImage(image, 0, 0);
    }
    document.onclick= function () {
        canvas.toBlob(function (blob) {
            // console.log(blob);
            // return;

            //php://input接收
            var uri = '00.php';//自己处理
            var xhr = new XMLHttpRequest();
            xhr.open("POST", uri, true);
            xhr.onload = function() {
                console.log(xhr.responseText);
            };
            xhr.send(blob);

            return;

            //使用文件上传 $_FILES 接收
            var uri = '00.php';//自己处理
            var xhr = new XMLHttpRequest();
            var fd = new FormData();

            xhr.open("POST", uri, true);
            xhr.onload = function() {
                console.log(xhr.responseText);
            };
            fd.append(0 ,blob);
            xhr.send(fd);

            return;

            var url = URL.createObjectURL(blob);
            iframe.src=url;
            console.log(url);
            console.log(arguments);

        },'image/jpeg',0.5);

    }


</script>


</body>
</html>