<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.9.1.min.js"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <style>
        #container {
            display: inline-block;
            position: relative;
        }

        .mask {
            background: black;
            opacity: 0.3;
            border: 1px solid green;
            width: 150px;
            height: 150px;
            left: 0;
            top: 0;
            z-index: 22;
            position: absolute;
        }
    </style>

</head>
<body>

<input type="file" id="imgInp">
<br>
<span id="container">
    <div class="mask"></div>
    <img id="tulip">
</span>
<br>
<canvas id="myCanvas" width="150px" height="150px"></canvas>
<br>
<button id="caijian" onclick="cai()">裁剪</button>
<script src="vconsole.min.js"></script>
<script>
    var con=new VConsole();
    var c = ""
    var ctx =""
    window.iiix = 0;
    window.iiiy = 0;
    function cai() {

        caijian(window.iiix, window.iiiy)
        //console.log(c.toDataURL("image/png"))
    }

    function ImgZoom(Id)
    {
        var w = Id.width;
        var m = 350;
        if(w < m)
        {
            return;
        }
        else
        {
            var h = Id.height;
            Id.height = parseInt(h*m/w);
            Id.width = m;
        }
    }

    function caijian(sx, sy) {
        c = document.getElementById("myCanvas");
         ctx = c.getContext("2d");
        var img = document.getElementById("tulip");
        ctx.drawImage(img, sx, sy, 150, 150, 0, 0,150,150);
    }
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#tulip').attr('src', e.target.result);
                var img=new Image()
                img.src=e.target.result

                console.log(img.naturalWidth)
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#imgInp").change(function () {
        readURL(this);
    });
  /*  $(".mask").mousedown(function () {
        onMouseU55p()
        onMouseDow555n()
    });*/
    var mask=document.getElementsByClassName("mask")[0];
    function onMouseDow555n() {
        mask.addEventListener("touchmove",onMouseMove,false);
        onMouseU55p();
    }
    function onMouseU55p() {
        mask.addEventListener("touchend",function(){
            mask.removeEventListener("touchmove",onMouseMove);
        },false);
    }

    mask.addEventListener("touchstart",function(e){
        onMouseDow555n()
    },false);

 /*   $(".mask").mousedown(function () {
        onMouseUp()
        onMouseDown()
    });
    function onMouseDown() {
        $(".mask").bind("mousemove", onMouseMove)
    }
    function onMouseUp() {
        $(".mask").bind("mouseup", function () {
            $(".mask").unbind("mousemove", onMouseMove)
        })
    }*/

    function onMouseMove(event) {
        var top = $(this).position().top
        var left = $(this).position().left
        //console.log(top,left);
        //边界
        //left
        var leftlimit = $(this).parent().width() - $(this).width();
        var toplimit = $(this).parent().height() - $(this).height();
        //console.log(leftlimit,toplimit);
//这里可以得到鼠标Y坐标
       /* var pointX = e.pageX;screenX
        var pointY = e.pageY;*/

         var pointX =  event.targetTouches[0].pageX;
         var pointY =  event.targetTouches[0].pageY;
        console.log(pointX, pointY);

        //父元素的坐标
        var parentX = $(this).parent().offset().left;
        var parentY = $(this).parent().offset().top;

        console.log("父", parentX, parentY);
        var realX = pointX - parentX;
        var realY = pointY - parentY;
        window.iiix = realX - $(this).width() / 2
        window.iiiy = realY - $(this).height() / 2
        console.log("实", window.iiix, window.iiiy);
        var itemX = realX - $(this).width() / 2
        var itemY = realY - $(this).height() / 2
        if (realX >= leftlimit + $(this).width() / 2) {
            itemX = leftlimit
        }
        if (realY >= toplimit + $(this).height() / 2) {
            itemY = toplimit
        }
        if (realX <= $(this).width() / 2) {
            itemX = 0
        }
        if (realY <= $(this).height() / 2) {
            itemY = 0
        }

        $(this).css("top", itemY)
        $(this).css("left", itemX)

        //鼠标的位置

    }

</script>
</body>
</html>

利用canvas裁剪想要的图片的更多相关文章

  1. 小程序canvas生成二维码图片踩的坑

    1:生成临时图片,保证画布被加载以及渲染(即本身不可以 hidden 或是 上级元素不可以 hidden 或是 wx:if 隐藏等) == > 建议:因为 canvas 的组件层级(z-inde ...

  2. 利用canvas制作图片（可缩放和平移）+相框+文字

    前言: 公司一个售前问我能不能用H5做一个手机拍照,给相片添加相框和添加文字上传到服务器的功能,我当时一琢磨觉得可行,就利用空余时间做了一个demo,去掉了拍照和上传,如果以后有机会,会给补上,当然对 ...

  3. 利用canvas压缩图片

    现在手机拍的照片动不动就是几M,当用户上传手机里的照片时一个消耗流量大,一个上传时间长,为了解决这个问题,就需要压缩图片: 想法:利用canvas重绘图片,保持宽高比不变,具体宽高根本具体情况而定. ...

  4. 如何从一张图片中裁剪一部分距形图片另存为文件（使用Canvas.CopyRect）

    如何从一张图片中裁剪一部分距形图片另存为文件? Delphi / Windows SDK/APIhttp://www.delphi2007.net/DelphiMultimedia/html/delp ...

  5. iOS 利用Context裁剪图片

    下面的代码可以裁剪出圆形的图片, 1,先把不规则图片转成正方形图片 UIGraphicsBeginImageContext(newSize); [image drawInRect:CGRectMake ...

  6. 利用canvas 导出图片

    1.使用canvas绘制图片,并将图片导出. 在本地直接访问静态网页时,无法使用toDataURL(),需要将网页发布后,canvas才能使用toDataURL获取画布上的内容.因为canvas不允许 ...

  7. 小程序利用canvas 绘制图案 （生成海报， 生成有特色的头像）

    小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...

  8. 10分钟，利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  9. 前端JS利用canvas的drawImage()对图片进行压缩

    对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 1.由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致 ...

随机推荐

  1. thinkphp 3.2.3 - Dispatcher.class.php 解析（转发器）

    class Dispatcher { public static function dispatch() { $varPath = C('VAR_PATHINFO'); // 's' $varAddo ...

  2. 必须使用member initialization list来初始化的情况

    // member initialization #include <iostream> using namespace std; class Circle { double radius ...

  3. mac terminal基本命令

    文件目录 首先要清楚几个文件目录: " / "  :根目录 " ~ " :用户主目录的缩写.例如当前用户为esther,那么" ~ "展开来 ...

  4. Linux下Oracle JDK替换Open JDK

    Oracle的产品需要Oracle JDK,但是Linux发行版附带的都是开源的Open JDK,这里给出的方法是在不删除原有Open JDK的情况下,安装Oracle JDK 环境 系统:CentO ...

  5. 4 Template层-验证码

    1.验证码 在用户注册.登录页面,为了防止暴力请求,可以加入验证码功能,如果验证码错误,则不需要继续处理,可以减轻一些服务器的压力 使用验证码也是一种有效的防止crsf的方法 验证码效果如下图: 官网 ...

  6. 面试常问 Java基础 冒泡排序

    冒泡排序就是对一个数组进行排序. 用双层for循环就可以解决. 第一层,决定排序的次数. n个数,进行n-1次排序就行了. 第二层,把相邻的两个数比较,谁小,放到后面和下一个数字比较,谁小谁放到后面, ...

  7. java的类加载器体系结构和双亲委派机制

    类加载器将字节码文件加载到内存中,同时在方法区中生成对应的java.land.class对象  作为外部访问方法区的入口. 类加载器的层次结构: 引导类加载器<-------------扩展类加 ...

  8. Algorithms(fourth edition)——无向图

    1.设计图基本操作API 2.用什么数据结构来表示图并实现API 要求:(1)要预留足够空间 (2)实例方法实现要快 三个选择: 邻接矩阵:布尔矩阵,不满足条件一,而且无法表示平行边 边的数组:不满足 ...

  9. 欧拉路&&欧拉回路 概念及其练习

    欧拉路: 如果给定无孤立结点图G,若存在一条路,经过图中每边一次且仅一次,这条路称为欧拉路: 如果给定无孤立结点图G,若存在一条回路,经过图中每边一次且仅一次,那么该回路称为欧拉回路. 存在欧拉回路的 ...

  10. linux开机关机自启动或自关闭服务的方式

    背景 由于迁移部门jira和confluence到linux,需要设置这两个服务在开机或关机时能够自动启动或关闭.这里我就拿配置confluence过程来记录. 方式1:chkconfig 特点:ch ...