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()方法 ...