JavaScript 与 图片
来源:互联网 发布:java equal的用法 编辑:程序博客网 时间:2024/04/29 03:14
在 HTML 文档中 <input type="file"> 标签每出现一次,一个 FileUpload 对象就会被创建。
upfiledom.value 获取路径
var files = upfiledom.files[0];获取文件
files.type 获取文件类型
files.size 文件大小
HTML5读取文件核心代码
var reader = new FileReader();
reader.readAsDataURL(files);
reader.onload = function (){
var image = new Image();
image.onload = function(){ 给image的src赋值加载完成之后自动执行此方法
var newcanvas = document.createElement("canvas");//创建canvas
newcanvas.style.display = "none";
var bodys = document.body;
bodys.appendChild(newcanvas);
var ctx = newcanvas.getContext("2d");//canvas上下文
newcanvas.width = width; //缩放之后的宽和高
newcanvas.height = height;
ctx.fillStyle = "#FFFFFF"; //
ctx.fillRect(0, 0, width, height); //整个canvas填充为白色
ctx.drawImage(image, 0, 0, this.width, this.height, 0, 0, width, height);
//drawImage方法有必要解释一下,前面两个0表示从image的左上点开始截取,截取的宽高就是
this.width,this.height。后面的两个0表示截取之后画在canvas的左上点位置,width和height
表示要画的宽高,如果这个宽高比前面的宽高大,那么相当于放大了,反之就是缩小。说白了这
个方法就是先从image截取一部分或全部,然后画在canvas上,不一定是等比例。
var DATA64 = newcanvas.toDataURL(type, 0.9);//canvas转图片 质量为0.9 类型为type
//这个DATA64和那个reader.result格式是一样的,内容不一样罢了,都可以赋值给image.src
还有,这个结果是base64编码的,后面需要atob解码
split1 = 把DATA64去掉头部信息 逗号及其之前的信息 "^data:.*base64,"
byteString = atob(splits1);//base64解码
var byteStringlength = byteString.length, ia = new Uint8Array(byteStringlength);//无符号8位整型
for (var i = 0; i < byteStringlength; i++) {
ia[i] = byteString.charCodeAt(i);//转成字符的Unicode编码
}
此时ia为不超过255(也就是8位)的数字的数组,长度是byteStringlength
return new Blob([ ia ], {type:this.ImagesType}); //用ia创建Blob对象返回
this_.BOLBID = this_.URL.createObjectURL(this_.FormBlob(DATA64));//创建指向这个Blob的URL
//而且这个URL可以当赋值给image.src
}
image.src = this.result 这就是图片文件读取的结果,然后下面处理
}
ajax注意下 FormData()
upfiledom.value 获取路径
var files = upfiledom.files[0];获取文件
files.type 获取文件类型
files.size 文件大小
HTML5读取文件核心代码
var reader = new FileReader();
reader.readAsDataURL(files);
reader.onload = function (){
var image = new Image();
image.onload = function(){ 给image的src赋值加载完成之后自动执行此方法
var newcanvas = document.createElement("canvas");//创建canvas
newcanvas.style.display = "none";
var bodys = document.body;
bodys.appendChild(newcanvas);
var ctx = newcanvas.getContext("2d");//canvas上下文
newcanvas.width = width; //缩放之后的宽和高
newcanvas.height = height;
ctx.fillStyle = "#FFFFFF"; //
ctx.fillRect(0, 0, width, height); //整个canvas填充为白色
ctx.drawImage(image, 0, 0, this.width, this.height, 0, 0, width, height);
//drawImage方法有必要解释一下,前面两个0表示从image的左上点开始截取,截取的宽高就是
this.width,this.height。后面的两个0表示截取之后画在canvas的左上点位置,width和height
表示要画的宽高,如果这个宽高比前面的宽高大,那么相当于放大了,反之就是缩小。说白了这
个方法就是先从image截取一部分或全部,然后画在canvas上,不一定是等比例。
var DATA64 = newcanvas.toDataURL(type, 0.9);//canvas转图片 质量为0.9 类型为type
//这个DATA64和那个reader.result格式是一样的,内容不一样罢了,都可以赋值给image.src
还有,这个结果是base64编码的,后面需要atob解码
split1 = 把DATA64去掉头部信息 逗号及其之前的信息 "^data:.*base64,"
byteString = atob(splits1);//base64解码
var byteStringlength = byteString.length, ia = new Uint8Array(byteStringlength);//无符号8位整型
for (var i = 0; i < byteStringlength; i++) {
ia[i] = byteString.charCodeAt(i);//转成字符的Unicode编码
}
此时ia为不超过255(也就是8位)的数字的数组,长度是byteStringlength
return new Blob([ ia ], {type:this.ImagesType}); //用ia创建Blob对象返回
this_.BOLBID = this_.URL.createObjectURL(this_.FormBlob(DATA64));//创建指向这个Blob的URL
//而且这个URL可以当赋值给image.src
}
image.src = this.result 这就是图片文件读取的结果,然后下面处理
}
ajax注意下 FormData()
0 0
- JavaScript 与 图片
- 利用JavaScript创建随机数与随机图片
- 利用JavaScript创建随机数与随机图片
- javascript实现图片放大与缩小
- javascript 与图片预加载的遭遇
- javascript 设置图片透明度与图片的水平垂直旋转
- [Javascript][jQuery]图片预加载与可变参数函数
- HTML5 JavaScript实现图片文字识别与提取
- HTML5 JavaScript实现图片文字识别与提取
- javascript实现鼠标移入与移出变换图片
- javascript图片懒加载与预加载的分析
- html5 与javascript 动态编辑百度loage图片
- 【JavaScript】加载失败的红叉图片处理与<img>图片标签的onerror事件
- javascript压缩图片,缩放图片
- javascript插入图片
- 鼠标拖动图片-javascript
- javascript有关图片
- javascript:图片切换特效
- map
- linux初体验
- ActivityGroup+GridView实现Tab分页标签的方法
- for循环
- Dubbo与Zookeeper、SpringMVC整合和使用(负载均衡、容错)
- JavaScript 与 图片
- js让下拉框和文本框联动
- 对缓存的理解,设计,与测试
- 如何配置jdk和使用
- Android ViewPager巧用偷梁换柱实现自动循环滚动
- navigationController 实现自选页面跳转
- 哈理工OJ 1597 序列问题II【dp】【非递增子序列问题】
- 【web性能优化】之一:反爬虫策略
- OpenGL(2)GLSL内置变量和函数