HTML5开发笔记：初窥CANVAS，上传canvas图片到服务器

本文向您展示怎样转换Image为canvas，以及canvas如何提取出一个Image。

转换 Image为 Canvas
要把图片转换为Canvas(画板，画布),可以使用canvas元素 context 的drawImage方法：

复制代码

代码如下:

// 把image 转换为 canvas对象
function convertImageToCanvas(image) {
// 创建canvas DOM元素，并设置其宽高和图片一样
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
// 坐标(0,0) 表示从此处开始绘制，相当于偏移。
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}

转换 Canvas 为 Image
假设图像已经在canvas上处理好，那么可以使用以下方法，把canvas转变为图片Image对象。

复制代码

代码如下:

// 从 canvas 提取图片 image
function convertCanvasToImage(canvas) {
//新Image对象，可以理解为DOM
var image = new Image();
// canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
// 指定格式 PNG
image.src = canvas.toDataURL("image/png");
return image;
}

额!图像image和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>

<?phpdefine('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;
?>

HTML5开发笔记：初窥CANVAS，上传canvas图片到服务器相关推荐

微信公众号开发《四》调用微信JS-SDK实现上传手机图片到服务器
在这粘贴上三篇博文链接,方便大家查阅互相学习: 微信公众号开发<一>OAuth2.0网页授权认证获取用户的详细信息,实现自动登陆微信公众号开发<二>发送模板消息实现消息业务实 ...
JAVA上传文件图片到服务器保存
这里我记录一个比较简单方便操作的JAVA上传文件图片到服务器并且保存! 首先是页面 html的我这是提交一个文件和类型 <div style="border: 1px solid ...
java上传文件图片到服务器保存,Java上传文件图片到服务器的方法
这里我记录一个比较简单方便操作的java上传文件图片到服务器并且保存,具体内容如下首先是页面html的我这是提交一个文件和类型我是添加一张临时图片得到微信的media_id保存数据库! en ...
java使用sftp上传(文件)图片到服务器中
最近租了一个服务器,想着上线个小项目,结果图片上传卡壳了,自从11号看了一篇文章就入了ftp的坑.研究了十多个小时的ftp文件传输,无果.睡前看到了一篇关于sftp上传文件的文章,抱着试一试的心态,结 ...
php 上传本地图片到服务器上,PHP如何将图片文件上传到另外一台服务器上
说,我有一个需求,就是一个临时功能.由于工作开发问题,我们有一个B项目,需要有一个商品添加的功能,涉及到添加商品内容,比如商品名字,商品描述,商品库存,商品图片等.后台商品添加的接口已经写完了,但是问 ...
android上传本地图片到服务器上,Android使用post方式上传图片到服务器的方法
本文实例讲述了Android使用post方式上传图片到服务器的方法.分享给大家供大家参考,具体如下: /** * 上传文件到服务器类 * * @author tom */ public class U ...
手把手教你上传女神照片到服务器
C语言自学完备手册(33篇) Android多分辨率适配框架 JavaWeb核心技术系列教程 HTML5前端开发实战系列教程 MySQL数据库实操教程(35篇图文版) 推翻自己和过往--自定义View ...
java 上传文件并读取_Java实现图片上传到服务器并把上传的图片读取出来
在很多的网站都可以实现上传头像,可以选择自己喜欢的图片做头像,从本地上传,下次登录时可以直接显示出已经上传的头像,那么这个是如何实现的呢? 下面说一下我的实现过程(只是个人实现思路,实际网站怎么实现的 ...
Servlet笔记十（文件上传和下载）
本栏博客目录 Serlvet笔记一(Servlet基础) Servlet笔记二(请求和响应) Servlet笔记三(会话及其会话技术) Servlet笔记四(JSP技术) Servlet笔记五(EL表 ...
商城项目笔记一：搭建Maven工程，利用Dubbo实现SOA面向服务框架，部署zookeeper注册中心，FastDFS框架实现图片上传，部署nginx服务器。
文章目录 1. 商城项目总结笔记: 1.1. 第一天工作记录:搭建Maven工程 1.2. 第二天工作记录:创建SOA面向服务架构,通过工具类实现分页技术 1.3. 第三天工作记录:部署nginx服务 ...

HTML5开发笔记：初窥CANVAS，上传canvas图片到服务器

HTML5开发笔记：初窥CANVAS，上传canvas图片到服务器相关推荐

最新文章

热门文章