zoukankan      html  css  js  c++  java
  • HTML5开发笔记:初窥CANVAS,上传canvas图片到服务器

    项目做到一个裁切图片的功能,就是让用户上传头像的时候可以裁切一下图片,选择一个合适大小位置来作为头像。之中用到了crop.js这个插件,用canvas直接绘制了用户裁切缩放后的图片。裁切的过程这边就不详细展开了,想要了解详情的朋友可以深入了解一下crop.js插件,这边分享一下在生成canvas图片后,通过ajax来上传到服务器的一个过程。就以PHP为例:

    <script>
    var canvas = document.getElementById("canvas_img");
    var img = canvas.toDataURL();
    var ajax = null;
     
    if (window.XMLHttpRequest) {
        ajax = new XMLHttpRequest();
    } else {
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    ajax.onreadystatechange = function() {
        if (ajax.readyState == 4 && ajax.status == 200) {
        alert(ajax.responseText);
        }
    }
    ajax.open("POST", "save.php", true);
    ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    ajax.send("img=" + img);
    </script>
    <?php
        define('UPLOAD_DIR', dirname(__FILE__).'/');       //图片保存路径 
        $img = $_POST['img'];
        $img = str_replace('data:image/png;base64,', '', $img);
        $img = str_replace(' ', '+', $img);
        $data = base64_decode($img);
        $day = date("Ymd",time());
        $file_name = mt_rand(1000000000000000,9999999999999999);
        if(!is_dir(UPLOAD_DIR . $day)){
            mkdir(UPLOAD_DIR . $day);
        }
        $file = UPLOAD_DIR . $day."/".$file_name. '.png';
        $success = file_put_contents($file, $data);
        return $success;
    ?>

    通过ajax传输的方式,让服务器收到这整个图片文件的内容,然后写进文件里,就有了我们所谓的‘上传图片’的效果了。

  • 相关阅读:
    BZOJ3124 直径
    BZOJ1491 洛谷2047 NOI2007 社交网络
    TYVJ1423 GF和猫咪的玩具
    poj 3463 Sightseeing
    TYVJ2032 升降梯上
    NOIP2009 codevs1173 洛谷P1073 最优贸易
    [BZOJ1066] [SCOI2007] 蜥蜴 (网络流)
    [BZOJ3293] [Cqoi2011] 分金币 (贪心)
    [BZOJ1045] [HAOI2008] 糖果传递 (贪心)
    [BZOJ1005] [HNOI2008] 明明的烦恼 (prufer编码)
  • 原文地址:https://www.cnblogs.com/starkiller/p/5718296.html
Copyright © 2011-2022 走看看