canvas使用Ajax上传图片PHP,使用ajax上传图片，并且使用canvas实现出上传进度效果...

前端代码：

使用ajax上传图片，并使用canvas实现出上传进度效果

#myImg {

border: 1px solid gray;

border-radius: 8px;

position: absolute;

top: 0px;

left: 0px;

}

#myCanvas {

position: absolute;

top: 0px;

left: 0px

}

您的浏览器不支持 canvas

//图片预览

//function(ev) == (ev)=>

$("#myFile").change((ev) => {

//将图片的转成blob数据类型

var imgUrl = URL.createObjectURL(document.getElementById("myFile").files[0]);

//给img标签的src赋值

document.getElementById("myImg").src = imgUrl;

//当图片加载完成时，回收资源，避免浪费，这是一个回调函数

imgUrl.onload = () => URL.revokeObjectURL(imgUrl);

});

/**

* 压缩图片，然后执行某个任务

* */

function compressImgTaskCallback(blob, taskCallback) {

//创建一个canvas容器

var canvas = document.createElement("canvas");

//设置这个容器的宽、高( 使用img的 宽高的一半 )。

var w = document.getElementById("myImg").naturalWidth / 2,

h = document.getElementById("myImg").naturalHeight / 2;

canvas.width = w;

canvas.height = h;

//获取在canvas容器绘制的对象

var ctx = canvas.getContext("2d");

//将向canvas容器绘制图像

ctx.drawImage(document.getElementById("myImg"), 0, 0, w, h);

//导出在canvas容器绘制的图像，转成blob类型

//jpeg -> 有损压缩

canvas.toBlob(taskCallback, "image/jpeg");

};

/**

* 文件上传进度

* */

function fileProgress(r) {

console.log(r);

//获取canvas容器

var mycanvas = document.getElementById("myCanvas");

//获取在canvas容器绘制的对象

var ctx = mycanvas.getContext("2d");

//保存当前绘制环境状态

ctx.save();

//清空指定矩形内的像素,参数:x(容器左上角的x坐标) y(容器左上角的y坐标) w(宽度)h(高度)

ctx.clearRect(0, 0, 200, 200);

//设置容器的透明度

ctx.globalAlpha = 0.6;

//填充‘被绘制’的矩形

//参数：x(容器左上角的x坐标) y(容器左上角的y坐标) w(宽度)h(高度)

ctx.fillRect(0, (1 - r) * 200, 200, 200);

//设置透明度

ctx.globalAlpha = 1;

//设置填充颜色

ctx.fillStyle = "white";

ctx.font = "20px 微软雅黑";

//绘制被填充的文本

//参数: tetx (绘制的文本) x 绘制文本的 x 坐标位置(相对于画布)y 绘制文本的 y 坐标位置(相对于画布)

//显示百分比

ctx.fillText(parseInt(r * 100) + '%', 100, 100);

//返回之前保存绘制的路径和属性

ctx.restore();

};

/**

* 使用ajax上传blob类型文件

* @param blob

* */

function uploadFile(blob) {

//将blob存储在FormData中

var formData = new FormData();

formData.append("filename", blob);//形成键值对应，伪装成表单的数据

//发起ajax请求

$.ajax({

method: "post",//请求方法

url: "/imgUpload",//服务器地址

data: formData,//向服务器传输的数据

contentType: false,//避免ajax操作请求头部从而丢分界符，造成服务器无法正确识别请求的数据类型

processData: false,//告诉ajax不要把将传输的数据给序列化了。

cache: false,//不从浏览器缓存中加载请求头部信息

xhr: () => {

//拿到jQuery产生的 XMLHttpRequest对象

var xhr = $.ajaxSettings.xhr();

//绑定上用于监听文件上传的进度事件

xhr.upload.onprogress = (ev) => {

//ev.loaded = 当前文件上传的进度

//ev.total = 文件的总进度

fileProgress(ev.loaded/ev.total);

};

return xhr;

},

error: (error) => {

alert("出现错误啦。");

}

});

};

//上传按钮事件

function clickUpload() {

compressImgTaskCallback($("#myFile")[0].files[0], uploadFile);

};

后端接收数据：

运行效果：

这是一瞬间就完成了加载，

直接下来我们限制一下浏览器传输速度。

在浏览器按F12，(我这里使用的是谷歌浏览器)

使用完后记得恢复回去哦。

设置浏览器传输速度后的运行效果：

写得有点乱，^_^，继续加油。

[Swift通天遁地]四、网络和线程-(9)上传图片并实时显示上传进度

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

导出HTML5 Canvas图片并上传服务器功能

这篇文章主要介绍了导出HTML5 Canvas图片并上传服务器功能,文中通过实例代码给大家介绍了HTML5 Canvas转化成图片后上传服务器,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友 ...

AntD框架的upload组件上传图片时使用customRequest方法自定义上传行为

本次做后台管理系统,采用的是 AntD 框架.涉及到图片的上传,用的是AntD的 upload 组件. 我在上一篇文章

【javascript】html5中使用canvas编写头像上传截取功能

[javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

基于jquery ajax的多文件上传进度条

效果图 前端代码,基于jquery

主页 < ...

python django &plus; js 使用ajax进行文件上传并获取上传进度案例

&lbrack;LeetCode&rsqb; Binary Tree Zigzag Level Order Traversal

Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...

(转)【ASP&period;NET Web API】Authentication with OWIN

概述 本文说明了如何使用 OWIN 来实现 ASP.NET Web API 的验证功能,以及在客户端与服务器的交互过程中,避免重复提交用户名和密码的机制. 客户端可以分为两类: JavaScript: ...

DWR在Spring中应用

这里以传递一个对象为例,来说明dwr在Spring中是怎么配置的. JSP页面:

转自 http://www.cnblogs.com/akwwl/p/3232679.html 委托是一个类,它定义了方法的类型,使得可以将方法当作另一个方法的参数来进行传递.事件是一种特殊的委托. 1 ...

JS拖拽原理

实现拖拽效果主要跟鼠标的三个事件有关: onmousedown : 选择要拖拽的元素 onmousemove : 移动元素 onmouseup : 释放元素 三个事件的关系: obj.onmoused ...

C&plus;&plus;11标准后的C&plus;&plus;阅读书目

C++11标准后的C++阅读书目 投递人 itwriter 发布于 2013-09-25 19:44 评论(2) 有285人阅读  原文链接  [收藏]  « » 英文原文:C++ Reading L ...

java学习笔记 --- 继承

继承 (1)定义:把多个类中相同的成员给提取出来定义到一个独立的类中.然后让这多个类和该独立的类产生一个关系,    这多个类就具备了这些内容.这个关系叫继承.  (2)Java中如何表示继承呢?格式 ...