html如何选择本地图片,Html5本地图片读取及裁剪

需要使用到Html5的FileReader，其中image-file是一个input type=file的文件浏览框。如果需要限制读取图片或者照相机：

当用户选择了图片之后，给input file绑定change事件，自动读取本地文件。

var image_file = document.getElementById("image-file");

if(typeof FileReader==='undefined'){

image.innerHTML = "抱歉，你的浏览器不支持 FileReader";

image_file.setAttribute('disabled','disabled');

}else{

image_file.addEventListener('change',readFile,false);

}

image就是一个id为image的img标签。readFile函数将图片读入，并自动居中裁剪为宽度自适应屏幕，高度固定为180px的图片。裁剪的过程中需要使用Canvas。

function readFile(){

var file = this.files[0];

if(!/image\/\w+/.test(file.type)){

alert("文件必须为图片！");

return false;

}

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function(e){

var image = document.getElementById("image");

var image=new Image();

image.src = this.result;

var x = 0, y = 0, width = image.width, height = image.height;

if (image.width / $(window).width() > image.height / 180) {

width = $(window).width() * image.height / 180;

x = (image.width - width) / 2;

}

else {

height = 180 * image.width / $(window).width();

y = (image.height - height) / 2;

}

var canvas=$('')[0],

ctx=canvas.getContext('2d');

ctx.drawImage(image,x,y,width,height,0,0,width,height);

var data=canvas.toDataURL();

image.innerHTML = ''

}

html如何选择本地图片,Html5本地图片读取及裁剪相关推荐

html5图片本地缓存,HTML5: 本地缓存
HTML5 提供了两种在client存储数据的新对象: localStorage:没有时间限制的数据存储,在同一个浏览器中,仅仅要没被手动清理,第二天.第二周或下一年之后,数据依旧可用. sessio ...
php 图片 3d旋转图片,html5实现图片的3D旋转效果
我们先来看一下实现效果: (学习视频分享:html视频教程) H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CS ...
html缓存在本地缓存,HTML5 本地缓存 window.localStorage
Conway's Game of Life: An Exercise in WPF, MVVM and C# This blog post was written for the Lo ...
html5 查看图片,html5实现图片预览和查看原图
一.页面元素只有三个简单元素: 拖拽区域二.添加简单的样式: .dragarea{ width:300px; height:100px; background:#ddd; text-align:ce ...
LocalResizeIMG前端HTML5本地压缩图片上传，兼容移动设备IOS,android
LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresiz ...
html5 canvas手写画板下载图片至本地
html5 canvas手写画板下载图片至本地 <!DOCTYPE html> <html><head><meta charset="utf-8& ...
Android 图片选择对话框，通过本地相册或照相机获得图片，可单选或多选，单选可设置是否裁剪
AndroidPickPhotoDialog 项目地址: wanliyang1990/AndroidPickPhotoDialog 简介:Android 图片选择对话框,通过本地相册或照相机获得图片, ...
c语言将url图片存到本地_python爬虫：爬取男生喜欢的图片
任务目标: 1.抓取不同类型的图片 2.编写一个GUI界面爬虫程序,打包成exe重新文件 3.遇到的难点 1.分析如何抓取不同类型的图片首先打开网站,可以看到有如下6个类型的菜单在这里插入图片描述 ...
Html读取本地文件夹下图片并显示的示例代码
一目的在Html上选择本地文件夹,自动读取文件夹及子文件夹下的所有图片并显示在页面. 技术分析: 存在问题 Html中file标签获取到的路径时相对的. Html中Img指定源时需要的是绝对路径. ...

html如何选择本地图片,Html5本地图片读取及裁剪

html如何选择本地图片,Html5本地图片读取及裁剪相关推荐

最新文章

热门文章