<!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 50 MySQL数据备份与还原(mysqldump)

      MySQL数据备份与还原(mysqldump)   一 mysqldump指令实现数据备份.mysql指令实现数据还原 经常有朋友问我,DBA到底是做什么的,百科上说:数据库管理员(Databas ...

  2. QT之QByteArray

    1.拷贝内容到QByteArray 1.使用append函数 //结合结构体的(char*)强制转化使用,command.append((char*)&e2_System_Para_t, si ...

  3. 2019 Multi-University Training Contest 6 Snowy Smile （最大字段和变形）

    题意: 求一个子矩阵要求其矩阵内的合最大. 题解: 正常的求最大子矩阵的复杂度是O(n^3) 对于这一题说复杂度过不去,注意到这个题总共只有2000个点关键点在与这里优化 最大子矩阵可以压缩矩阵变成最 ...

  4. SQL Serve 临时表

    SQL Server 支持临时表.临时表就是那些名称以井号 (#) 开头的表.如果当用户断开连接时没有除去临时表,SQL Server 将自动除去临时表.临时表不存储在当前数据库内,而是存储在系统数据 ...

  5. SpringMVC的Hello World

    本次使用Maven和Spring IO platform创建SpringMVC的Hello World. 一.Maven的Pom文件内容如下: <project xmlns="http ...

  6. eval()方法与str()方法

    eval()方法与str()方法 #_author:Administrator#date:2019/10/31 a={ 'q':{'xxx':3456}}#将一个字典转换成一个字符串a=str(a)p ...

  7. 「题解」：[组合数学]：Perm 排列计数

    题干: Description称一个1,2,…,N的排列P1,P2…,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,…N的排列中有多少是Magic的,答 ...

  8. 在自己的工程中使用开源界面库Duilib

    配置duilib库 一个简单的使用Duilib程序一般要在stdafx.h中进行配置(链接duilib的文件,包括头文件).通常的配置代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 ...

  9. angular组件之间的通信

    一.组件创建 直接使用 ng g component 的命令创建组件,会自动生成组件所需的文件,方便快捷. // 父组件 ng g component parent // 子组件 ng g compo ...

  10. LUOGU P2764 最小路径覆盖问题 （最小路径点覆盖）

    解题思路 有向图最小路径点覆盖问题,有这样的结论就是有向图最小路径点覆盖等于n-拆点二分图中最大匹配.具体怎么证明不太知道..输出方案时找到所有左部未匹配的点一直走$match​$就行了. #incl ...