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开发中得文件上传. 由于过程较为复杂,因此本文只贴出部分关键代 ...
随机推荐
- Logistic Regression - Formula Deduction
Sigmoid Function \[ \sigma(z)=\frac{1}{1+e^{(-z)}} \] feature: axial symmetry: \[ \sigma(z)+ \sigma( ...
- usr/include/dispatch - dispatch_source
博文一部分摘自:Parse分析,以下简称博文1(LeanCloud工程师针对Parse使用GCD的分析) 博文一部分摘自:GCD入门,以下简称博文2 建议先了解一下:BSD基础知识 在Dispatch ...
- boost之lexical_cast
第一次翻译,虽然是个很简单的函数介绍... 文件boost/lexical_cast.hpp中定义了此函数: namespace boost { class bad_lexical_cast; tem ...
- 给网页 title添加图片。
在网页的title中添加 <link rel="shortcut icon" href="logo.png" /> 即可. 可以看下百度搜索的代码, ...
- java高级特性
第二章 XML(可扩展标记语言) XML格式能够表达层次结构,并且重复的元素不会被曲解. 与HTML不同,XML是大小写敏感的. 必须有结束符. 属性值必须用引号括起来. 所有属性必须都有属性值. X ...
- MySQL提示:The server quit without updating PID file问题的解决办法(转载)
MySQL提示:The server quit without updating PID file问题的解决办法 今天网站web页面提交内容到数据库,发现出错了,一直提交不了,数找了下原因,发现数据写 ...
- CSS3 时钟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery.roundabout.js图片叠加3D旋转插件多功能图片翻转切换效果
http://www.17sucai.com/pins/4880.html DEMO演示地址:http://www.17sucai.com/pins/demoshow/4880
- .NET读取Excel数据,提示错误:未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序
解决.NET读取Excel数据时,提示错误:未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序的操作: 1. 检查本机是否安装Office Access,如果未安装去去h ...
- springmvc 表单提交
Spring MVC自带的表单标签比较简单,很多时候需要借助EL和JSTL来完成. 下面是一个比较简单的表单提交页面功能: 1.User model package com.my.controller ...