<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>

<style type="text/css">
* {
padding: 0px;
margin: 0px;
}

.main {
position: relative;
height: 500px;
width: 500px;
border: 1px solid gray;
overflow: hidden;
}

#btnfile {
}

.image {
position: absolute;
height: 500px;
width: 500px;
z-index: 1;
}

.cut_container {
position: absolute;
border: 1px solid orange;
height: 150px;
width: 150px;
left: 175px;
top: 175px;
z-index: 8888;
}

.btn_container {
position: absolute;
top: 500px;
}
</style>
</head>
<body>
<canvas id="mycan" width="200" height="200" style="display:none"></canvas>
<div class="main" id="img_container">
<div class="cut_container" id="cut_container" draggable="false"></div>

<img id="myImg" class="image" src="data:images/6.jpg" draggable="false" />

</div>
<div class="btn_container">
<input type="file" id="btnfile" />
<button id="btn_cut" onclick="cut_picture()">确定</button>
</div>

</body>
</html>
<script type="text/javascript">
var img = document.getElementById("myImg");
var width = parseInt(img.width);
var height = parseInt(img.height);
var x = 0; var y = 0;
var cut = $(document.getElementById("cut_container"))
$("#btnfile").change(function () {
var fr = new FileReader();
var file = this.files[0];
fr.readAsDataURL(file);
fr.onload = function () {
console.log(fr.result);
img.src = fr.result;
width = img.width;
height = img.height;
}

})
var x = 0, y = 0;
var canvas = document.getElementById("mycan");
var ctx = canvas.getContext("2d");
img.onload = function () {
ctx.drawImage(img, 0, 0, width, height);
}

document.getElementById("img_container").onmousewheel = function (e) {
e = event || e;
var v = e.wheelDelta;
if (v > 0) {
width += 10;
height += 10;
$(img).css({ height: height, width: width })
}
else {
width -= 10;
height -= 10;
if (width < 150 || height < 150) {
width = 150;
height = 150;
}
$(img).css({ height: height, width: width })

}
}

$("#myImg").mousedown(function (e) {
e = event || e;
var W = e.offsetX * 1;
var H = e.offsetY * 1;

$("#img_container").bind("mousemove", function (ex) {
ex = event || ex;
var left = ex.clientX * 1;
var top = ex.clientY * 1;
var l = left - W;
var t = top - H +$(document).scrollTop()*1;

$("#myImg").css({ left: l, top: t })
})
})
$("#img_container").mouseup(function () {
$("#img_container").unbind("mousemove")
})
function cut_picture() {
canvas.height = 150;
canvas.width = 150;
x = parseInt(img.style.left) - parseInt(cut.css("left"));
y = parseInt(img.style.top) - parseInt(cut.css("top"));
ctx.drawImage(img, x, y, width, height);
console.log(canvas.toDataURL())
window.open(canvas.toDataURL())
}

</script>

利用canvas图片剪切的更多相关文章

  1. Canvas 实现图片剪切

    用户上传头像然后截图的需求很常见,很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延.最近正好学习了HTML5里的canvas,发现它的图片处理功能比较强大,就打算用can ...

  2. 利用canvas压缩图片

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

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

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

  4. canvas 图片拖拽旋转之二——canvas状态保存(save和restore)

    引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...

  5. 图片上传，图片剪切jquery.imgareaselect

    ---恢复内容开始--- <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  6. 用JavaScript实现图片剪切效果

    学会如何获取鼠标的坐标位置以及监听鼠标的按下.拖动.松开等动作事件,从而实现拖动鼠标来改变图片大小. 还可以学习css中的clip属性. 一.CSS实现图片不透明及裁剪效果. 图片剪切三层结构 1.第 ...

  7. HTML5利用canvas，把多张图合并成一张图片

    需求分析,根据当前网页中的几张图片,在手机上长按,保存图片到相册或者发送给好友. drawCanvas(){ var self = this; var imgsrcArray = [ require( ...

  8. canvas图片合成中的坑

    需求 要用代码来实现多张外部图片和文字的合并而且要上传到七牛云,再将图片链接通过客户端分享出去.图片背景需要支持用户自定义更换. 实现方案 在一个canvas上多次调用drawImage函数,分别绘制 ...

  9. 利用canvas将网页元素生成图片并保存在本地

    利用canvas将网页元素生成图片并保存在本地 首先引入三个文件: 1.<script type="text/javascript" src="js/html2ca ...

随机推荐

  1. Awesome

    DotNet 资源大全中文版(Awesome最新版) http://www.cnblogs.com/best/p/5876596.html Java资源大全中文版(Awesome最新版) http:/ ...

  2. 3.1 AngularJS必备知识

    AngularJS是一个WEB应用框架. 本节我们会学习控制器(控制数据),会学习作用域(连接控制器和用户界面),用户界面又叫做视图,通过模板和作用域来创建交互视觉效果.另外,我们还会学习其他的特性比 ...

  3. BI项目记笔记索引

    这个笔记系列主要记录了在BI项目中,如何搭建环境进行源代码管理以及文档管理. 用到的产品包括: TFS Express Sharepoint Visual Studio SQL Server   配置 ...

  4. SQL Server架构 -- 数据库文件和文件组

    在SQL SERVER中,数据库在硬盘上的存储方式和普通文件在Windows中的存储方式没有什么不同,也是在特定文件夹下创建不同的文件,然后经过文件存储系统去抓取数据信息.理解文件和文件组的概念可以帮 ...

  5. 为你的Android App实现自签名的 SSL 证书（转）

    介绍 网络安全已成为大家最关心的问题. 如果你利用服务器存储客户资料, 那你应该考虑使用 SSL 加密客户跟服务器之间的通讯. 随着这几年手机应用迅速崛起. 黑客也开始向手机应用转移, 原因有下列3点 ...

  6. C# 图片无损压缩

    /// <summary> /// 图像缩略图处理 /// </summary> /// <param name="bytes">图像源数据&l ...

  7. 前端js调用七牛制作评价页面案例

    一.需求 公司所有的上传页面都用七牛,前端不免要直接调用七牛的代码进行上传,以下是一个实现七牛上传的案例,制作一个常见的商品评价页面,页面需求很常见当上传到第五章图片的时候,上传按钮消失,上传需要显示 ...

  8. Ubuntu菜鸟入门（四）—— 搜狗输入法

    一 搜狗输入法安装 1  下载安装包:   http://pinyin.sogou.com/linux/ 2  安装安装包 (1)"GDebi",这是一个用于安装你自己手动下载包的 ...

  9. jQuery九类选择器详解

    (1)基本选择器 <body> <div id="div1ID">div1</div> <div id="div2ID" ...

  10. 【Centos】修改网卡名字&随之出现的问题

    自从学了工具tcpdump之后,里面会需要涉及到针对某个网卡抓包,因而会输入网卡名字,可是centOS7蛋疼的网卡默认命名实在是让人心碎,所以就想到了要修改网卡名字,步骤如下:(以下步骤涉及到我的错误 ...