<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片缩放</title>
</head> <body style="background: black;">
<input type="file" id="uploadFile"></input>
<img src="" id='image' style="display: none;">
<canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #aaa;">
你的浏览器不支持canvas。
</canvas>
<input type="range" id="slider" min="0.5" max="3.0" step="0.01" value="1.0" style="display: block;margin: 20px auto;width: 800px;"/>
<button id='submit' value="上传">上传</button>
</body> <script>
var uploadbtn = document.getElementById('uploadFile');
var image = '';
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); var slider = document.getElementById("slider");
var imageObj = new Image(); //定义一个Image对象
canvas.width = 640;
canvas.height = 360; uploadbtn.onchange = function(){
var reader = new FileReader();
reader.onload = function(evt){
document.getElementById('image').src = evt.target.result;
image = evt.target.result; imageObj.src=evt.target.result; //加载图片 //需要等image load完再把它画到canvas中,不然的话可能有不良后果
imageObj.onload = function() {
drawImageByScale(slider.value); slider.onmousemove = function(){
drawImageByScale(slider.value);
};
}; }
reader.readAsDataURL(arguments[0].target.files[0]);
} document.getElementById('submit').onclick = function(){
var dataurl = canvas.toDataURL('image/png');
var blob = dataURLtoBlob(dataurl);
//使用ajax发送
var fd = new FormData();
fd.append("file", blob, "image.png");
var xhr = new XMLHttpRequest();
xhr.open('POST', 'url', true);
xhr.send(fd);
} function drawImageByScale(scale){
var x_ = document.getElementById("image").width;
var y_ = document.getElementById("image").height;
if((x_/y_)>(16/9)){
var imageWidth = 640 * scale;
var imageHeight = 640*y_/x_ * scale;
}else{
var imageHeight = 360 * scale;
var imageWidth = 360*x_/y_ * scale;
} //画布上的起始点:画布的大小一半减去图像大小的一半。可以为负数,表示在左上角的外面。
var dx = canvas.width/2 - imageWidth/2;
var dy = canvas.height/2 - imageHeight/2;
//清空画布
context.clearRect(0, 0, canvas.width, canvas.height); //把image画到canvas中,dx、dy表示起始点坐标
context.drawImage(imageObj, dx, dy, imageWidth, imageHeight);
} function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
} </script>
</html>

HTML5:使用Canvas和Input range控件放大缩小图片,剪裁,并上传图片的更多相关文章

  1. 为什么Jquery对input file控件的onchange事件只生效一次

    今天在做jquery对input file控件的onchange事件进行监听,就一直只生效一次,不知道Jquery为什么对file控件没有做到每次改变触发onchange事件的效果,但是还是有好几种解 ...

  2. 微信小程序基础之input输入框控件

    今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...

  3. input(Text)控件作为填空输入,但运行后,有曾经输入的记录显示,用autocomplete="off"解决

    系统中,有设计填空题,原来程序中,用input(Text)控件,   <input type="text" name="NO<%=rs("id&qu ...

  4. jquery检测input checked 控件是否被选中的方法

    jquery检测input checked 控件是否被选中 js部分 复制代码代码如下: function tongyianniu(){ var gouxuan=$('input[type=check ...

  5. 使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件

    使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件 原来的写法: <input type="file" accept="image/x-png ...

  6. WebView使用input file控件打开相册上传图片

    使用 WebView 直接用 控件选择相册图片 package com.moguzhuan.android.zhuan; import android.annotation.TargetApi; im ...

  7. QlikView TEXT控件固定显示图片

    QlikView 的Text控件不仅可以用来展示文本也可以用来展示图片. 数据表 2个列,一个是 关联字段(Country),另外一个保存图片物理路径. TEXT控件固定显示图片 ,编辑控件表达式 = ...

  8. wpf image控件循环显示图片 以达到动画效果 问题及解决方案

    1>最初方案: 用wpf的image控件循环显示图片,达到动画效果,其实就是在后台代码动态改变Image.Source的值,关键代码: ; i < ; i++)//六百张图片 { Bitm ...

  9. 在RichTextBox控件中插入图片

    . 在RichTextBox控件中插入图片 关键点 . 实现过程 .   public void ShowInsertImageDlg() {     OpenFileDialog OpenFileD ...

随机推荐

  1. 16-3-es5解析顺序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Django问题2

    接触django是从上个月开始,学习python时间也不长,但我经常在社区看看别人发表的文章,早上看到一篇不错的博客,却一直不能访 问,最终从bing的缓存里找到,因为害怕丢失和忘掉,所以顺便翻译过来 ...

  3. python中用json存储列表字典等文件操作

    JSON字符串用json.dumps, json.loads JSON文件名用json.dump, json.load 由于需要在脚本重启后依旧能够记住之前所使用的列表内容, 故采用json存储列表文 ...

  4. fiddler抓包工具遇到的问题-------502报错

    遇到的问题: 打开浏览器,输入本机的虚拟机地址的bugfree,出现无法连接的提示,具体是: [Fiddler] The connection to '192.168.211.128' failed. ...

  5. 拓扑排序+并查集——cf1131D

    以前做过了忘记掉了..拓扑排序如果要处理等于关系,就要用并查集把相等关系进行缩点 /* 1.相等关系用并查集合并 2.不等关系用有向边链接 3.拓扑排序求顺序 */ #include<bits/ ...

  6. 用C++Builder在Windows开始按钮上绘图制作方法

    熟悉Windows操作系统的软件设计人员知道,在Win95/98/NT/2000中有一任务栏(Task Bar)程序,路径为:C:\WINDOWS\SYSTEM\SYSTRAY.EXE(假设你的Win ...

  7. JavaScript中字符串类型

    字符串类型 字符串介绍 这是程序里面使用最为广泛的一-种类型.在JavaScript里面, 可以使用单引号,也可以使用双引号: 字符串这种数据类型非常霸道,它和其他数据类型相加都会被转换后才为字符串类 ...

  8. http response 过长 导致Connection reset

    http response 过长(2W byte) 导致Connection reset

  9. Spring MVC(七)--传递JSON参数

    有时候参数的传递还需要更多的参数,比如一个获取用户信息的请求中既有用户ID等基本参数,还要求对查询结果进行分页,针对这种场景,一般都会将分页参数封装成一个对象,然后将它和基本参数一起传给控制器,为了控 ...

  10. day 39 MySQL之多表查询

    MySQL之多表查询   阅读目录 一 介绍 二 多表连接查询 三 符合条件连接查询 四 子查询 五 综合练习 一 介绍 本节主题 多表连接查询 复合条件连接查询 子查询 首先说一下,我们写项目一般都 ...