返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

深入研究HTML5实现图片压缩上传功能

2019-01-28 22:20:12于丽

dHeight在目标canvas上绘制图像的高度。 允许对绘制的图像进行缩放。 如果不说明， 在绘制时图片高度不会缩放。

sx需要绘制到目标上下文中的，源图像的矩形选择框的左上角 X 坐标。

sy需要绘制到目标上下文中的，源图像的矩形选择框的左上角 Y 坐标。

sWidth需要绘制到目标上下文中的，源图像的矩形选择框的宽度。如果不说明，整个矩形从坐标的sx和sy开始，到图像的右下角结束。

sHeight需要绘制到目标上下文中的，源图像的矩形选择框的高度。

为了上传完整的图片，这里dx,dy必须设置为0，dWidth和dHeight必须设置为原始图片的宽度和高度。这就是为什么我们需要等image对象下载完毕后获取其原始尺寸，这很关键！

3、图片上传

XML/HTML Code复制内容到剪贴板
  1. function fileUpload() {         var data = canvas.toDataURL("image/jpeg", quality);   
  2.      //dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了        datadata = data.split(',')[1];   
  3.     data = window.atob(data);        var ia = new Uint8Array(data.length);   
  4.     for (var i = 0; i < data.length; i++) {              ia[i] = data.charCodeAt(i);   
  5.     };         //canvas.toDataURL 返回的默认格式就是 image/png   
  6.     var blob = new Blob([ia], {         type: "image/jpeg"   
  7.     });        var fd = new FormData();   
  8.         fd.append('myFile', blob);        var xhr = new XMLHttpRequest();   
  9.     xhr.addEventListener("load", opts.success, false);        xhr.addEventListener("error", opts.error, false);   
  10.     xhr.open("POST", opts.url);        xhr.send(fd);   
相关文章 大家在看