<!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. day 60 Django基础七之Ajax

      Django基础七之Ajax   本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 六 同源策 ...

  2. Hibernate的多对多映射

    一.创建Java工程,新建Lib文件夹,加入Hibernate和数据库(如MySql.Oracle.SqlServer等)的Jar包,创建 hibernate.cfg.xml 文件,并配置,配置项如下 ...

  3. 手把手教你接口自动化测试 – SoapUI & Groovy【转】

    手把手教你接口自动化测试 – SoapUI & Groovy Posted on 2015-01-21 09:38 WadeXu 阅读(12741) 评论(10) 编辑 收藏 手把手教你接口自 ...

  4. 四. （TDZ）展示性死区

    在ES6中怎么使用 var Let const ? 1.var 声明之前 2. let 声明之前 3. const声明之前

  5. 【JZOJ3238】【BZOJ3482】超空间旅行

    description 在遥远的未来,行星之间的食品运输将依靠单向的贸易路线.每条路径直接连接两个行星,且其运输时间是已知的. 贸易商协会打算利用一项最近发现的新技术--超空间旅行,以增加一些新的航线 ...

  6. SG函数博弈——poj2311

    关于SG函数的博弈 首先定义必败态 x : SG[x]=0 设任意一个状态y,到所有y能到达的状态连一条边,令这些后继为z y : SG[y]=mex(SG[z]) SG[y]==0 : y就是必败态 ...

  7. idea加载完文件报错：java:-source 1.7中不支持lambda表达式 解决方案

    1.file - Project Structure ctrl+alt+shift+s 2.modules 中把7换成8

  8. js 移动端点击复制字符串

    function copyStr(val) { //val 是要复制的字符串 var input = document.createElement("input"); input. ...

  9. Mysql自带查询阻塞语句

    select r.trx_id waiting_trx_id, r.trx_mysql_thread_Id waiting_thread, r.trx_query waiting_query, b.t ...

  10. java当拿到一个项目后该怎么看的一些个人见解(附带快捷键)

    刚出来实习,BOSS让我用maven下载架包后进行修改. 刚开始拿到项目两眼一黑,完全不知道该怎么下手.想找server层,完全不知道在那么多架包那里开始弄. 这个时候首先要明确你要修改的位置,找到这 ...