html 涂改图片功能实现
网页源码直接贴了：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<style type="text/css">
.aaa {
cursor: url("http://192.168.12.144:8080/drawimg/icon/erase111111111111.ico"),auto;
}
</style>
<script src="js/jquery-1.8.3.min.js" ></script>
<script src="js/html2canvas.min.js" ></script>
<script src="js/printScreen.js" ></script> <script text="javascript">
var s;
$(function(){
s = new PrintScreen(document.getElementById('myCanvas'));
}); function imageData(str)
{
var img = new Image();
img.src=str;
$('#ddd').append(img);
}
</script>
</head>
<body>
<div align="center" id="ddd" >
<canvas id="myCanvas" class="aaa" width="1000" height="650" style="border:2px solid #6699cc;background-image: url('http://192.168.12.144:8080/drawimg/movie.png');background-repeat:no-repeat;"></canvas>
<div class="control-ops">
<button type="button" class="btn btn-primary" onclick="javascript:clearArea();return false;">清空画板</button>
<button type="button" class="btn btn-primary" onclick="javascript:s.setEdit();">笔</button>
<button type="button" class="btn btn-primary" onclick="javascript:s.setErase();">橡皮</button>
<button type="button" class="btn btn-primary" onclick="javascript:s.getImage(imageData);">复制</button>
Line width :
<select id="selWidth">
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
<option value="9" selected="selected">9</option>
<option value="11">11</option>
</select>
Color :
<select id="selColor">
<option value="black">black</option>
<option value="blue" selected="selected">blue</option>
<option value="red">red</option>
<option value="green">green</option>
<option value="yellow">yellow</option>
<option value="gray">gray</option>
</select>
</div>
</div>
</body>
</html>
printScreen.js 源码：
function PrintScreen(canvas)
{
this.mousePressed = false;
var lastX, lastY;
var ctx;
var isEdit = false;
var isErase = false; this.InitThis = function(){
ctx = canvas.getContext("2d");
canvas.onmousedown = function (e) {
this.mousePressed = true;
console.log('down>>'+this.mousePressed);
if (isEdit)
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false); if (isErase)
Clear(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top);
} canvas.onmousemove= function (e) {
console.log('over>>'+this.mousePressed+',edit='+isEdit);
if (this.mousePressed) { if (isEdit)
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true); if (isErase)
Clear(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top);
}
} canvas.onmouseup = function (e) {
this.mousePressed = false;
} canvas.onmouseleave = function (e) {
this.mousePressed = false;
}
} function Draw(x, y, isDown) {
if (isDown) {
ctx.beginPath();
ctx.strokeStyle = $('#selColor').val();
ctx.lineWidth = $('#selWidth').val();
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
lastX = x; lastY = y;
} function Clear(x, y)
{
ctx.clearRect(x-8, y-8, 16, 16);
} function clearArea() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
} this.setEdit = function()
{
console.log('edit>>');
isErase=false;isEdit=true;
} this.setErase = function()
{
isEdit = false;
isErase = true;
} // 从 canvas 提取图片 image
function convertCanvasToImage(canv) {
//新Image对象，可以理解为DOM
var image = new Image();
// canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
// 指定格式 PNG
image.src = canv.toDataURL("image/png");
return image;
} this.getImage = function(callBack)
{
html2canvas(canvas, {
onrendered: function(canv) {
callBack(canv.toDataURL("image/png"));
}
});
}
this.InitThis();
}
html2canvas(canvas, {
onrendered: function(canv) {
callBack(canv.toDataURL("image/png"));
}
});
这段代码是 基于 html2canvas 库的截图功能 canv 是截图之后返回的canvas对象，
canv.toDataURL("image/png") 方法返回 涂改过后 图片的base64码
html 涂改图片功能实现的更多相关文章
- FusionChart 导出图片 功能实现（转载）
FusionChart 导出图片 功能实现(转载) http://www.cnblogs.com/jiagoushi/archive/2013/02/05/2893468.html 题目:精美Fusi ...
- java Html2Image 实现html转图片功能
//java Html2Image 实现html转图片功能 // html2image HtmlImageGenerator imageGenerator = new HtmlImageGenera ...
- 百度UEditor编辑器关闭抓取远程图片功能（默认开启）
这个坑娘的功能,开始时居然不知道如何触发,以为有个按钮,点击一下触发,翻阅了文档,没有发现,然后再网络上看到原来是复制粘贴非白名单内的图片到编辑框时触发,坑娘啊............... 问题又来 ...
- kindeditor扩展粘贴图片功能&修改图片上传路径并通过webapi上传图片到图片服务器
前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功 ...
- destoon去除编辑器替换图片删除原图功能，删除信息删除相关图片功能
去除这些功能会造成大量垃圾图片,但是客户存在大量复制内容,其中图片一样,为了防止客户替换其中一个图片或者删除信息 造成其他复制信息图片丢失 去除文章模型级联图片功能. 对应模块class.php se ...
- c#实现ofd文件转图片功能 （附执行程序）
前言 ofd文件的作用就是保证信息能如实的存储.传递.显示.保证ofd文件的真实性靠的是签名:ofd 的显示需要专用软件.ofd标准是新的国家标准,应用范围远不如pdf:现有浏览器不能解析ofd.支持 ...
- Java实现的上传并压缩图片功能【可等比例压缩或原尺寸压缩】
本文实例讲述了Java实现的上传并压缩图片功能.分享给大家供大家参考,具体如下: 先看效果: 原图:1.33M 处理后:27.4kb 关键代码: package codeGenerate.util; ...
- flutter实现可缩放可拖拽双击放大的图片功能
flutter实现可缩放可拖拽双击放大的图片功能 可缩放可拖拽的功能,可实现图片或者其他widget的缩放已经拖拽并支持双击放大的功能 我们知道官方提供了双击缩放,但是不支持拖拽的功能,我们要实现向百 ...
- jquery——左右按钮点击切换一组图片功能
一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...
随机推荐
- Spring MVC常用注解
cp by http://www.cnblogs.com/leskang/p/5445698.html 1.@Controller 在SpringMVC 中,控制器Controller 负责处理由Di ...
- Selenium VS QTP
Selenium系列 QTP 适用结构 B/S结构 C/S.B/S结构 适用人员 有一定代码基础(Java.C#.Python.Ruby) 对编程不是很熟悉的.厌烦了做手工功能测试的.想快速进 ...
- MySql学习(二) —— where / having / group by / order by / limit 简单查询
注:该MySql系列博客仅为个人学习笔记. 这篇博客主要记录sql的五种子句查询语法! 一个重要的概念:将字段当做变量看,无论是条件,还是函数,或者查出来的字段. select五种子句 where 条 ...
- ORACLE 连接SQLSERVER 数据库备忘
最近工作需要,要从SQL SERVER数据库中同步提取数据. 这里采用了 Oracle Gateway 来连接,折腾了半天,终于搞定,记录下已备下次使用. 基本资料网上都可以搜很多,官网配置说明在这 ...
- Java: IO 学习小结
源: 键盘 System.in 硬盘 FileStream 内存 ArrayStream 目的: 控制台 System.out 硬盘 FileStream 内存 ArrayStream 处理大文件或者 ...
- android回收AnimationDrawable动画的每一帧的图片资源，而释放内存
回收每一帧的图片,释放内存资源 private void tryRecycleAnimationDrawable(AnimationDrawable animationDrawables) { if ...
- iOS中文网址路径转换URLEncode
如果返回的URL中有中文可以用此方法转换 今天发现一个蛋疼的问题,服务端返回的urlString里面有时含有中文,使用 [NSURL URLWithString:urlString]生成URL对象时, ...
- config配置文件的一些东西
/* 模板相关配置 */ 'TMPL_PARSE_STRING' => array( '__STATIC__' => __ROOT__ . '/Public/static', '__ADD ...
- php __invoke 和 __autoload
当在对象后面添加()时候调用 __invoke <?php class Person { private $name; private $age; public function __const ...
- VM virtuaBox异常关机启动不了的解决方案
事件回放 我的物理机是win7,上面装了一个VM virtualBox,用来装Centos,有天物理机非正常关闭,导致VM virtuaBox异常关机启动不了,如下: 确实找不到这个vm_liang. ...