canvas实现图像截取功能
本文实例为大家分享了canvas图像截取的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>canvas-图像截取</title>
<style>
canvas{
border: 1px dashed red;
float: left;
position: relative;
}
</style>
</head>
<body>
<div id="cantox" style="position: relative">
<canvas id="oldcanvas" width="500px" height="300px">
</canvas>
<div id="cliptox" style="position: absolute;display:none"></div>
</div>
<button id ="btnclip" style="float: left">截取该区域</button>
<canvas id="nowcanvas" width="500px" height="300px" >
</canvas>
<script>
//获取div元素
var cantox = document.getElementById("cantox");
var cliptox = document.getElementById("cliptox");
var btnclip = document.getElementById("btnclip");
//获取到canvas元素
var oldcanvas = document.getElementById("oldcanvas");
var nowcanvas = document.getElementById("nowcanvas");
//获取canvas中的画图环境
var oldcontext = oldcanvas.getContext('2d');
var nowcontext = nowcanvas.getContext('2d');
var img = new Image();
img.src = "./image/liuyifei.jpg";
//加载图像到canvas画布中
window.onload = function (){
oldcontext.drawImage(img,0,0,oldcanvas.width,oldcanvas.height);
}
var startPoint;//截取图像开始坐标
var endPoint;//截图图像的结束坐标
var w; //截取图像的宽度
var h; //截取图像的高度
var flag = false; //用于判断移动事件事物控制
//鼠标按下事件
cantox.onmousedown = function (e){
flag = true;
cliptox.style.display = 'block';
startPoint = windowToCanvas(oldcanvas, e.clientX, e.clientY);
cliptox.style.left = startPoint.x+'px';
cliptox.style.top = startPoint.y+'px';
}
//鼠标移动事件
cantox.onmousemove = function (e){
if(flag){
cliptox.style.background = 'rgba(0,0,0,0.5)';
endPoint = windowToCanvas(oldcanvas, e.clientX, e.clientY);
w = endPoint.x - startPoint.x;
h = endPoint.y - startPoint.y;
cliptox.style.width = w +'px';
cliptox.style.height = h+'px';
}
}
//鼠标释放事件
cantox.onmouseup = function (e){
flag = false;
}
//按钮截取事件
btnclip.onclick = function (){
imgCut(nowcontext,img,oldcanvas.width,oldcanvas.height,startPoint.x,startPoint.y,w,h);
}
/*
* 图像截取函数
* context:绘制环境对象
* image：图像对象
* imgElementW：图像显示的宽度
* imgElementH：图像显示的高度
* sx:截取图像的开始X坐标
* sy:截取图像的开始Y坐标
* w:截取图像的宽度
* h:截取图像的高度
* */
function imgCut(context,image,imgElementW,imgElementH,sx,sy,w,h){
//清理画布，便于重新绘制
context.clearRect(0,0,imgElementW,imgElementH);
//计算 ：比例 = 原图像/显示图像
var ratioW = image.width/imgElementW;
var ratioH = image.height/imgElementH;
//根据截取图像的所占位置及大小计算出在原图所占的位置及大小
//.drawImage(图像对象,原图像截取的起始X坐标,原图像截取的起始Y坐标,原图像截取的宽度,原图像截取的高度，
// 绘制图像的起始X坐标,绘制图像的起始Y坐标,绘制图像所需要的宽度,绘制图像所需要的高度);
context.drawImage(image,ratioW*sx,ratioH*sy,ratioW*w,ratioH*h,0,0,w,h);
}
/*
* 坐标转换：将window中的坐标转换到元素盒子中的坐标，并返回(x,y)坐标
* element：canvas元素对象
* x:鼠标在当前窗口X坐标值
* y:鼠标在当前窗口Y坐标值
* */
function windowToCanvas(element,x,y){
//获取当前鼠标在window中的坐标值
// alert(event.clientX+"-------"+event.clientY);
//获取元素的坐标属性
var box = element.getBoundingClientRect();
var bx = x - box.left;
var by = y - box.top;
return {x:bx,y:by};
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
PHP实现将HTML5中Canvas图像保存到服务器的方法
本文实例讲述了PHP实现将HTML5中Canvas图像保存到服务器的方法.分享给大家供大家参考.具体实现方法如下: 一.问题: 在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名.这需要我们评审软件里提供这样一个功能:打开浏览器,登录,进入评审意见页,页面最下部有个方块区域,用户在这里用触摸笔进行签名,然后这个签名将会保持的服务器上. 这样的一个需求在当时是让我大费周折,但如今想起来,如果用html5的canvas
-
Android开发之图形图像与动画(一)Paint和Canvas类学习
Paint类 *Paint类代表画笔,用来描述图形的颜色和风格,如线宽,颜色,透明度和填充效果等信息. *使用Paint类时,需要先创建该类的对象,可以通过该类的构造函数实现.通常情况的实现代码是: *Paintpaint=newPaint(); *创建完Paint对象后,可以通过该对象提供的方法对画笔的默认设置进行改变 Canvas *Canvas类代表画布,通过该类提供的构造方法,可以绘制各种图形. *通常情况下,要在Android中绘图,需要先创建一个继承自View类的视图,并且在该类中重
-
js canvas实现简单的图像扩散效果
本文实例为大家分享了canvas实现简单图像扩散的代码,供大家参考,具体内容如下 <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="800" height="800" style="border:1px solid #c3c3c3;"> Your browser does not support the canv
-
canvas实现图像放大镜
本文实例为大家分享了canvas实现图像放大镜的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas-放大镜</title> <style> body{ padding: 0px; margin: 0px; } #canvas{ border: 1p
-
canvas实现图像布局填充功能
本文实例为大家分享了canvas图像布局填充的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas-图像布局填充</title> <style> #canvas{ border: 1px solid palevioletred; } </sty
-
使用canvas进行图像编辑的实例
前面的话 本文将分为几个小功能的形式来详细介绍canvas图像编辑 缩放 下面是一张分析图,假设默认情况下,图片和canvas宽高相同.图片的缩放(scale)范围为0.5到3,缩放时改变的是图片的大小和图片的坐标位置 W(宽) = canvas.width * scale H(高) = canvas.height * scale x坐标 = (W - canvas.width)/2; y坐标 = (H - canvas.height)/2; 因此,代码如下 <canvas id="dra
-
canvas实现图像截取功能
本文实例为大家分享了canvas图像截取的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas-图像截取</title> <style> canvas{ border: 1px dashed red; float: left; position: r
-
Android 仿QQ头像自定义截取功能
看了Android版QQ的自定义头像功能,决定自己实现,随便熟悉下android绘制和图片处理这一块的知识. 先看看效果: 思路分析: 这个效果可以用两个View来完成,上层View是一个遮盖物,绘制半透明的颜色,中间挖了一个圆:下层的View用来显示图片,具备移动和缩放的功能,并且能截取某区域内的图片. 涉及到的知识点: 1.Matrix,图片的移动和缩放 2.Paint的setXfermode方法 3.图片放大移动后,截取一部分 编码实现: 自定义三个View: 1.下层View:ClipP
-
selenium+python实现1688网站验证码图片的截取功能
1. 背景 •在1688网站爬取数据时,如果访问过于频繁,无论用户是否已经登录,就会弹出如下所示的验证码登录框. 一般的验证码是类似于如下的元素(通过链接单独加载进页面,而不是嵌入图片元素): <img id="J_CheckCodeImg1" width="100" height="30" onmousedown="return false;" src="//pin.aliyun.com/get_img?id
-
JS+Canvas实现自定义头像功能
目录 写在最前 成果展示 Git地址 功能说明 实现细节 相关依赖 写在最后 写在最前 前两天老大跟我说老虎官网上那个自定义头像的功能是flash实现的,没有安装过的还得手动去“允许”falsh的运行.所以让我用canvas实现一个一样的功能,嘿嘿,刚好最近也在研究canvas,所以欣然答应(其实,你没研究过难道就不答应么,哈哈哈哈哈~) 成果展示 Git地址 https://github.com/ry928330/portraitDIY.git 功能说明 拖拽左侧小方框,或者是鼠标放在小方框右
-
字符串截取功能批处理
复制代码 代码如下: ::code by lxmxn @ cn-dos.net . ::目的:帮助新手们更好的理解变量字符截取功能. ::Date 2006-12-16 . ::说明:有的变量截取之后值为空,这是正常的. :: @echo off&setlocal EnableDelayedexpansion ::设置变量var的值: set var=0123456789ABCDEF call :begin for /l %%a in (1,3,15) do ( for /l %%b in (1
-
Js利用Canvas实现图片压缩功能
最近做的APP项目涉及到手机拍照上传图片,因为手机拍照的图片通常都比较大,所以上传的时候就会很慢.为此,需要对图片进行压缩处理来优化上传功能.以下是具体实现: /* * 图片压缩 * img 原始图片 * width 压缩后的宽度 * height 压缩后的高度 * ratio 压缩比率 */ function compress(img, width, height, ratio) { var canvas, ctx, img64; canvas = document.createElement
-
HTML5+Canvas调用手机拍照功能实现图片上传（下）
上一篇只讲到前台操作,这篇专门涉及到Java后台处理,前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理,通过对图片数据信息进行Base64解码,之后使用流将图片数据信息上传至服务器进行保存,并且将图片的路径地址存进数据库. 大家可以点此链接查看前台本地压缩上传的处理: HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(上) ok,废话不多说了,直接贴代码吧. 1.前台js代码: $.ajax({ async:false,//是
-
Python实现针对含中文字符串的截取功能示例
本文实例讲述了Python实现针对含中文字符串的截取功能.分享给大家供大家参考,具体如下: 对于含多字节的字符串,进行截断的时候,要判断截断处是几字节字符,不能将多字节从中分割,避免截断后乱码 下面给出utf8和gb18030上的实现, 用任何一种都可以,可以先进行转码,用encode, decode; 方法1:对utf8: def subString(string,length): if length >= len(string): return string result = '' i =
-
c#图像截取实例
本文实例讲述了c#图像截取的实现方法.分享给大家供大家参考.具体如下: 图像截取的相关代码如下: 复制代码 代码如下: public Form1() { InitializeComponent(); } private void button1_Click(object sender, EventArgs e) { Image pic = new Bitmap(this.Width, this.Height); Graphics graphic = Graphics