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传输的方式，让服务器收到这整个图片文件的内容，然后写进文件里，就有了我们所谓的‘上传图片’的效果了。

HTML5开发笔记：初窥CANVAS，上传canvas图片到服务器的更多相关文章

解决在Android开发上使用KSOAP2上传大图片到服务器经常报错的问题
原文首发我的主力博客 http://anforen.com/wp/2017/04/android_ksoap2_unexpected_type_position_end_document_null_j ...
.NET HttpPost 上传文件图片到服务器
public class ImageData { public string imageFilePath { get; set; } public string tempFilePath { get; ...
ext js/Ext.Net_演示 htmleditor 上传&插入图片
本文内容解决方案结构 HtmlEditor_Upload.js 脚本 HtmlEditorUploadImg.ashx 上传图片到服务器演示 htmleditor 控件添加插入图片功能解决方 ...
HTML5开发笔记：图片上传预览
我们知道通过<input type="file">可以用来进行一个图片或者文件的上传,然而浏览器自带的一个缩略图预览的功能其实是相当不美观的,很多时候我们希望可以在上传 ...
【软件工程】week5-个人作业-敏捷开发方法初窥
敏捷开发方法初窥引言:本周的软件工程个人博客作业是阅读关于敏捷开发方法的文章(http://martinfowler.com/agile.html),并撰写自己的读后感.文章内容非常丰富,对敏捷开发 ...
HTML5按比例缩略图片并上传的实例
<!DOCTYPE HTML PUBLIC> <html> <head> <meta charset="utf-8"> <sc ...
hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...
[html5+java]文件异步读取及上传核心代码
html5+java 文件异步读取及上传关键代码段功能: 1.多文件文件拖拽上传,file input 多文件选择 2.html5 File Api 异步FormData,blob上传,图片显示 3 ...
iOS开发网络篇—文件的上传
iOS开发网络篇—文件的上传说明:文件上传使用的时POST请求,通常把要上传的数据保存在请求体中.本文介绍如何不借助第三方框架实现iOS开发中得文件上传. 由于过程较为复杂,因此本文只贴出部分关键代 ...
iOS 开发http post 文件的上传
iOS开发网络篇—文件的上传说明:文件上传使用的时POST请求,通常把要上传的数据保存在请求体中.本文介绍如何不借助第三方框架实现iOS开发中得文件上传. 由于过程较为复杂,因此本文只贴出部分关键代 ...

随机推荐

[LeetCode] Min Stack 最小栈
Design a stack that supports push, pop, top, and retrieving the minimum element in constant time. pu ...
moosefs的安装使用及遇到的问题
一.获取源码安装包到官网下载最新版本moosefs: https://moosefs.com/download/sources-archive-3-0.html到官网下载最新版本fuse源码 ht ...
springmvc json字符串转化成json对象
问题出现在 :页面数据列表的展示出现 [object HTMLInputElement] 找到问题的所在原因后又三种解决方案一:格式化json字符串为json对象字符串 success:functi ...
centos 7.0 nginx 1.7.9 安装过程
系统用的是centos 7.0最小化安装我现在安装完了写一下步骤还没完全搞懂首先安装GCC [root@localhost ~]# yum install -y gcc gcc-c++ 已加载 ...
putty连接ubuntu虚拟机缓慢问题的解决
vmware安装系统使用了ubuntu,安装后每次用PUTTY登录发现都到等很久,经过上网搜索,发现是Ubuntu安全机制导致的连接缓慢问题, 解决方法如下; 1. sudo vim /etc ...
android中如何发送及接收数据(两种方法)？
1.如在MainActivity.java中的按钮点击时设置: //发送数据方法1--简单型 i.putExtra("txt", "没错,我就是刚传来的信息!" ...
PCL可视化显示直接加载显示pcb文件
简单可视化类,是指直接在程序中使用,而且不支持多线程. #include<iostream> #include<pcl\point_cloud.h> #include<p ...
MVC中System.InvalidOperationException: 传入字典的模型项的类型为“XXX”，但此字典需要类型“XXA”的模型项
出现此类错误的一个原因是Controller传过去的Model和View中的Model不是同一个Model
QT:QBitArray
QbitArray类提供位操作序列. include<QBitArray> 公有函数: QBitArray () QBitArray ( int size , bool valu ...
分析BGARefreshLayout-master
一.知识点,创建BaseActivity 建立方法的逻辑顺序并将一些常用的方法填充到其中 ①.将initView().setListener().onClick().processLogic()方法 ...