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按钮,中间过程两按钮 ...
随机推荐
- DotnetBar在VS2010工具箱中不显示问题
请参考:http://blog.csdn.net/yanbo710148546/article/details/7862819
- ecshop后台新功能及权限的添加
1.在后台"推荐管理"里添加"推荐人分成"."会员分成"两个操作功能以及权限 index.php?act=menu incluedes/in ...
- Android Monkey 压力测试 介绍
Monkey 是Android SDK提供的一个命令行工具, 可以简单,方便地运行在任何版本的Android模拟器和实体设备上. Monkey会发送伪随机的用户事件流,适合对app做压力测试 阅读目录 ...
- 微博开放平台开发（一）获取access_token
因为工作需要,接触到微博开放平台开发.特做此记录方便查用. 一.准备. 1.微博账号.注册很容易. 2.微博账号成为开发者. 登录微博开放平台 登录你注册的账号,然后进入管理中心完善开发者基本信息和 ...
- js正则表达式大全(1)
正则表达式中的特殊字符 \ 做为转意,即通常在"\"后面的字符不按原来意义解释,如/b/匹配字符"b",当b前面加了反斜杆后/\b/,转意为匹配一个单词的边界. ...
- 【PCB】【AD使用】Altium Designer 的entry sheet ，offsheet和port作用
Altium Designer之多图纸设计 1.图纸结构 图纸包括两种结构关系: 一种是层次式图纸,该连接关系是纵向的,也就是某一层次的图纸只能和相邻的上级或下级有关系: 另一种是扁平式图纸,该连接关 ...
- php foreach 语法的遍历来源数组如果不是一个有效数组php会出现错误警告 Invalid argument supplied for foreach()
在php中,foreach语法的遍历来源数组如果不是一个有效数组,php会出现错误警告 Invalid argument supplied for foreach() ,但是很多时候这个数组是取自某些 ...
- SharePoint 2010 + 左侧导航（Left Nav Bar）二级菜单的修改
SharePoint 2010 + 修改左侧导航类似顶部导航菜单的样式 查找aspmenu的控件,ID为“V4QuickLaunchMenu”,修改分别将属性“StaticDisplayLevels” ...
- mac idea快捷键
新买的mac,如果默认使用idea快捷键,因为用eclipse,完全转不过来,所以荡下别人整理好的资源放在目录下,以备查看 原文:https://my.oschina.net/sunzy/blog/3 ...
- Android开源框架：Universal-Image-Loader解析（四）TaskProcess
Universal-Image-Loader中,对Task的处理有两种方法:FIFO,LIFO 在core/assist下的deque包中,其主要是定义了LIFOLinkedBlockingDeque ...