首页 课程中心 问答&分享 读书 公众号框架 HUI H.JS 开放源 登录 & 注册
 canvas 图片上传到服务器 php版
[ 喃喃 ] 发布于 : 2016-12-22  浏览 :  次

页面结构

<canvas width="300" height="300" id="canvas"></canvas>


使用js完成图片绘制后,读取canvas数据并上传

var canvas = document.getElementById('canvas');
var data = canvas.toDataURL();
$.post(
    '服务器地址',
    {postdata:data },
    function(msg){
        alert(msg);
    }
);


php 端代码

<?php if(!empty($_POST)){
    if(isset($_POST['postdata'])){
        $_POST['postdata'] = str_replace('data:image/png;base64,', '', $_POST['postdata']);
        $img = uniqid().'.png';
        file_put_contents($img, base64_decode($_POST['postdata']));witExit($img);
    }
}


使用canvas的好处
1、图片上传时先进行本地压缩减小网络开销
2、配合js可以实现图片剪裁

教程更新
More...