通过Canvas及File API缩放并上传图片完整示例

1、通过canvas及file api缩放并上传图片完整示例复制代码代码如下: / 参数，最大高度var max_height = 100;/ 渲染function render(src)/ 创建一个 image 对象var image = new image();/ 绑定 load 大事处理器，加载完成后执行image.onload = function()/ 猎取 canvas dom 对象var canvas = document.getelementbyid("mycanvas");/ 假如高度超标if(image.height > max_hei

2、ght) / 宽度等比例缩放 *=image.width *= max_height / image.height;image.height = max_height;/ 猎取 canvas的 2d 环境对象,/ 可以理解context是管理员，canvas是房子var ctx = canvas.getcontext("2d");/ canvas清屏ctx.clearrect(0, 0, canvas.width, canvas.height);/ 重置canvas宽高canvas.width = image.width;canvas.height = im

3、age.height;/ 将图像绘制到canvas上ctx.drawimage(image, 0, 0, image.width, image.height);/ ! 注重，image 没有加入到 dom之中;/ 设置src属性，扫瞄器会自动加载。/ 记住必需先绑定大事，才干设置src属性，否则会出同步问题。image.src = src; 在上面的例子中，你可以用法canvas 的 todataurl() 办法猎取图像的 base64编码的值(可以类似理解为16进制字符串,或者二进制数据流).注重： canvas 的 todataurl() 猎取的url以字符串开始，有22个无用的数据 &a

4、mp;quot;data:image/png;base64,"，需要在客户端或者服务端举行过滤.原则上只要扫瞄器支持，url地址的长度是没有限制的，而1024的长度限制，是老一代ie所独有的。 请问,如何猎取我们需要的图像呢？好孩子,很兴奋你能这么问。你并不能通过file 输入框来挺直处理，你从这个文件输入框元素所能猎取的仅仅是用户所挑选文件的path路径。根据常规想象，你可以通过这个path路径信息来加载图像，但是，在扫瞄器里面这是不现实的。(译者注:扫瞄器厂商必需保证自己的扫瞄器肯定平安，才干获得市场，起码避开媒体的袭击，假如允许这样做，那恶意网址可以通过拼凑文件路径来尝

5、试猎取某些敏感信息).为了实现这个需求，我们可以用法html5的file api 来读取用户磁盘上的文件，并用这个file来作为图像的源(src,source). file api简介新的file api接口是在不违反任何平安沙盒规章下，读取和列出用户文件名目的一个途径—— 通过沙盒(sandbox)限制，恶意网站并不能将病毒写入用户磁盘，固然更不能执行。我们要用法的文件读取对象叫做 filereader,filereader允许开发者读取文件的内容(详细扫瞄器的实现方式可能大不相同)。 假设我们已经猎取了图像文件的path路径，那么依靠前面的代码，用法

6、filereader来加载和渲染图像就变得很简单了： 复制代码代码如下: / 加载 图像文件(url路径)function loadimage(src)/ 过滤掉 非 image 类型的文件if(!src.type.match(/image.*/)if(window.console)console.log("挑选的文件类型不是: ", src.type); else window.confirm("只能挑选文件");return;/ 创建 filereader 对象 并调用 render 函数来完成渲染.var reade

7、r = new filereader();/ 绑定load大事自动回调函数reader.onload = function(e)/ 调用前面的 render 函数render(e.target.result);/ 读取文件内容reader.readasdataurl(src); 请问，如何猎取文件呢？小白兔，要有耐烦！我们的下一步就是猎取文件，固然有好多办法可以实现啦。例如：你可以用文本框让用户输入文件路径，但很明显大多数用户都不是开发者，对输入什么值根本就不了解.为了用户用法便利，我们采纳 drag and drop api接口。 用法 drag and drop api拖拽接口(drag

8、and drop)十分容易——在大多数的dom元素上，你都可以通过绑定大事处理器来实现. 只要用户从磁盘上拖动一个文件到dom对象上并敞开鼠标，那我们就可以读取这个文件。代码如下： 复制代码代码如下: function init()/ 猎取dom元素对象var target = document.getelementbyid("drop-target");/ 阻挡 dragover(拖到dom元素上方) 大事传递target.addeventlistener("dragover",

9、function(e)e.preventdefault();, true);/ 拖动并敞开鼠标的大事target.addeventlistener("drop", function(e)/ 阻挡默认大事，以及大事传扬e.preventdefault();/ 调用前面的加载图像 函数，参数为datatransfer对象的第一个文件loadimage(e.datatransfer.files0);, true);var setheight = document.getelementbyid("setheight");var m

10、axheight = document.getelementbyid("maxheight");setheight.addeventlistener("click", function(e)/var value = maxheight.value;if(/d+$/.test(value)max_height = parseint(value);e.preventdefault();,true);var btnsend = document.getelementbyid("btnsend"

11、);btnsend.addeventlistener("click", function(e)/sendimage();,true); 我们还可以做一些其他的处理，比如显示预览图。但假如不想压缩的话，那很可能没什么用。我们将采纳ajax通过http 的post方式上传数据。下面的例子是用法dojo框架来完成哀求的，固然你也可以采纳其他的ajax技术来实现.dojo 代码如下: 复制代码代码如下: / 译者并不懂dojo，所以将在后面附上jquery的实现/ remember that dtk 1.7+ is amd!require("doj

12、o/request", function(request)/ 设置哀求url,参数，以及回调。request.post("image-handler.php", data: imagename: "myimage.png",imagedata: encodeuricomponent(document.getelementbyid("canvas").todataurl("image/png").then(function(text)c

13、onsole.log("the server returned: ", text););); jquery 实现如下： 复制代码代码如下: / 上传，jquery版function sendimage()/ 猎取 canvas dom 对象var canvas = document.getelementbyid("mycanvas");/ 猎取base64编码后的图像数据，格式是字符串/ "data:image/png;base64,"开始,需要在客户端或者服务器端将其去掉，后面的部分可

14、以挺直写入文件。var dataurl = canvas.todataurl("image/png");/ 为平安 对uri举行编码/ data%3aimage%2fpng%3bbase64%2c 开始var imagedata = encodeuricomponent(dataurl);/var url = $("form").attr("action");/ 1. 假如form表单不益处理,可以用法某个hidden躲藏域来设置哀求地址/var url = $("in

15、putname=&39;action&39;").val();/ 2. 也可以挺直用某个dom对象的属性来猎取/ var url = $("imageaction").attr("action");/ 由于是string，所以服务器需要对数据举行转码，写文件操作等。/ 个人商定，全部http参数名字所有小写console.log(dataurl);/console.log(imagedata);var data = imagename: "myimage.png&

16、quot;,imagedata: imagedata;jquery.ajax( url : url,data : data,type : "post",/ 期盼的返回值类型datatype: "json",complete : function(xhr,result) /console.log(xhr.responsetext);var $tip2 = $("tip2");if(!xhr)$tip2.text(&39;网络衔接失败!&39;);return false;v

17、ar text = xhr.responsetext;if(!text)$tip2.text(&39;网络错误!&39;);return false;var json = eval("("+text+")");if(!json)$tip2.text(&39;解析错误!&39;);return false; else $tip2.text(json.message);/console.dir(json);/console.log(xhr.responsetext);); ok,搞定！你还需要做

18、的，就是创建一个只管的用户界面，并允许你控制的大小。上传到服务器端的数据，并不需要处理enctype为 multi-part/form-data 的状况，仅仅一个容易的post表单处理程序就可以了.好了，下面附上完整的代码示例： 复制代码代码如下: 通过canvas及file api缩放并上传/ 参数，最大高度var max_height = 100;/ 渲染function render(src)/ 创建一个 image 对象var image = new image();/ 绑定 load 大事处理器，加载完成后执行image.onload = function()/ 猎取 canvas

19、dom 对象var canvas = document.getelementbyid("mycanvas");/ 假如高度超标if(image.height > max_height) / 宽度等比例缩放 *=image.width *= max_height / image.height;image.height = max_height;/ 猎取 canvas的 2d 环境对象,/ 可以理解context是管理员，canvas是房子var ctx = canvas.getcontext("2d");/ canva

20、s清屏ctx.clearrect(0, 0, canvas.width, canvas.height);/ 重置canvas宽高canvas.width = image.width;canvas.height = image.height;/ 将图像绘制到canvas上ctx.drawimage(image, 0, 0, image.width, image.height);/ ! 注重，image 没有加入到 dom之中;/ 设置src属性，扫瞄器会自动加载。/ 记住必需先绑定大事，才干设置src属性，否则会出同步问题。image.src = src;/ 加载 图像文件(url路径)func

21、tion loadimage(src)/ 过滤掉 非 image 类型的文件if(!src.type.match(/image.*/)if(window.console)console.log("挑选的文件类型不是: ", src.type); else window.confirm("只能挑选文件");return;/ 创建 filereader 对象 并调用 render 函数来完成渲染.var reader = new filereader();/ 绑定load大事自动回调函数reader.onload = func

22、tion(e)/ 调用前面的 render 函数render(e.target.result);/ 读取文件内容reader.readasdataurl(src);/ 上传，jquery版function sendimage()/ 猎取 canvas dom 对象var canvas = document.getelementbyid("mycanvas");/ 猎取base64编码后的图像数据，格式是字符串/ "data:image/png;base64,"开始,需要在客户端或者服务器端将其去掉，后面的部分可以挺直写入文

23、件。var dataurl = canvas.todataurl("image/png");/ 为平安 对uri举行编码/ data%3aimage%2fpng%3bbase64%2c 开始var imagedata = encodeuricomponent(dataurl);/var url = $("form").attr("action");/ 1. 假如form表单不益处理,可以用法某个hidden躲藏域来设置哀求地址/var url = $("inputnam

24、e=&39;action&39;").val();/ 2. 也可以挺直用某个dom对象的属性来猎取/ var url = $("imageaction").attr("action");/ 由于是string，所以服务器需要对数据举行转码，写文件操作等。/ 个人商定，全部http参数名字所有小写console.log(dataurl);/console.log(imagedata);var data = imagename: "myimage.png",

25、imagedata: imagedata;jquery.ajax( url : url,data : data,type : "post",/ 期盼的返回值类型datatype: "json",complete : function(xhr,result) /console.log(xhr.responsetext);var $tip2 = $("tip2");if(!xhr)$tip2.text(&39;网络衔接失败!&39;);return false;var tex

26、t = xhr.responsetext;if(!text)$tip2.text(&39;网络错误!&39;);return false;var json = eval("("+text+")");if(!json)$tip2.text(&39;解析错误!&39;);return false; else $tip2.text(json.message);/console.dir(json);/console.log(xhr.responsetext););function init()/ 猎取dom元素对象var target = document.getelementbyid("drop-target");/ 阻挡 dragover(拖到dom元素上方) 大事传递target.addeventlistener("dragover", function(e)e.preventdefault();, true);/ 拖动并敞开鼠标的大事target.addeventlistener("drop&q