项目做到一个裁切图片的功能,就是让用户上传头像的时候可以裁切一下图片,选择一个合适大小位置来作为头像。之中用到了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图片到服务器的更多相关文章

  1. 解决 在Android开发上使用KSOAP2上传大图片到服务器经常报错的问题

    原文首发我的主力博客 http://anforen.com/wp/2017/04/android_ksoap2_unexpected_type_position_end_document_null_j ...

  2. .NET HttpPost 上传文件图片到服务器

    public class ImageData { public string imageFilePath { get; set; } public string tempFilePath { get; ...

  3. ext js/Ext.Net_演示 htmleditor 上传&amp;插入图片

    本文内容 解决方案结构 HtmlEditor_Upload.js 脚本 HtmlEditorUploadImg.ashx 上传图片到服务器 演示 htmleditor 控件添加插入图片功能   解决方 ...

  4. HTML5开发笔记:图片上传预览

    我们知道通过<input type="file">可以用来进行一个图片或者文件的上传,然而浏览器自带的一个缩略图预览的功能其实是相当不美观的,很多时候我们希望可以在上传 ...

  5. 【软件工程】week5-个人作业-敏捷开发方法初窥

    敏捷开发方法初窥 引言:本周的软件工程个人博客作业是阅读关于敏捷开发方法的文章(http://martinfowler.com/agile.html),并撰写自己的读后感.文章内容非常丰富,对敏捷开发 ...

  6. HTML5按比例缩略图片并上传的实例

    <!DOCTYPE HTML PUBLIC> <html> <head> <meta charset="utf-8"> <sc ...

  7. hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  8. [html5+java]文件异步读取及上传核心代码

    html5+java 文件异步读取及上传关键代码段 功能: 1.多文件文件拖拽上传,file input 多文件选择 2.html5 File Api 异步FormData,blob上传,图片显示 3 ...

  9. iOS开发网络篇—文件的上传

    iOS开发网络篇—文件的上传 说明:文件上传使用的时POST请求,通常把要上传的数据保存在请求体中.本文介绍如何不借助第三方框架实现iOS开发中得文件上传. 由于过程较为复杂,因此本文只贴出部分关键代 ...

  10. iOS 开发http post 文件的上传

    iOS开发网络篇—文件的上传 说明:文件上传使用的时POST请求,通常把要上传的数据保存在请求体中.本文介绍如何不借助第三方框架实现iOS开发中得文件上传. 由于过程较为复杂,因此本文只贴出部分关键代 ...

随机推荐

  1. [LeetCode] Min Stack 最小栈

    Design a stack that supports push, pop, top, and retrieving the minimum element in constant time. pu ...

  2. moosefs的安装使用及遇到的问题

     一.获取源码安装包 到官网下载最新版本moosefs: https://moosefs.com/download/sources-archive-3-0.html到官网下载最新版本fuse源码 ht ...

  3. springmvc json字符串转化成json对象

    问题出现在 :页面数据列表的展示出现 [object HTMLInputElement] 找到问题的所在原因后又三种解决方案 一:格式化json字符串为json对象字符串 success:functi ...

  4. centos 7.0 nginx 1.7.9 安装过程

    系统用的是centos 7.0最小化安装 我现在安装完了 写一下步骤 还没完全搞懂 首先安装GCC [root@localhost ~]# yum install -y gcc gcc-c++ 已加载 ...

  5. putty连接ubuntu虚拟机缓慢问题的解决

    vmware安装系统使用了ubuntu,安装后每次用PUTTY登录发现都到等很久,经过上网搜索,发现是Ubuntu安全机制导致的连接缓慢问题,   解决方法如下;   1. sudo vim /etc ...

  6. android中如何发送及接收数据(两种方法)?

    1.如在MainActivity.java中的按钮点击时设置: //发送数据方法1--简单型 i.putExtra("txt", "没错,我就是刚传来的信息!" ...

  7. PCL可视化显示 直接加载显示pcb文件

    简单可视化类,是指直接在程序中使用,而且不支持多线程. #include<iostream> #include<pcl\point_cloud.h> #include<p ...

  8. MVC中System.InvalidOperationException: 传入字典的模型项的类型为“XXX”,但此字典需要类型“XXA”的模型项

    出现此类错误的一个原因是Controller传过去的Model和View中的Model不是同一个Model

  9. QT:QBitArray

    QbitArray类提供位操作序列. include<QBitArray> 公有函数: QBitArray ()   QBitArray  ( int  size , bool  valu ...

  10. 分析BGARefreshLayout-master

    一.知识点,创建BaseActivity 建立方法的逻辑顺序 并将一些常用的方法填充到其中 ①.将initView().setListener().onClick().processLogic()方法 ...