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按钮,中间过程两按钮 ...
随机推荐
- 关于java中创建文件，并且写入内容
以下内容完全为本人原创,如若转载,请注明出自:http://www.cnblogs.com/XiOrang/ 前两天在项目中因为要通过http请求获取一个比较大的json数据(300KB左右)并且保存 ...
- How to Develop blade and soul Skills
How to Develop Skills Each skill can be improved for variation effects. Some will boost more strengt ...
- css3过渡
语法格式: transition:属性名 完成时间 速度曲线 何时开始 transition:width 2s ease-in 3s: width 2s 整个过渡效果持续的时间 ease-in 指定了 ...
- MSP430FR5739串口程序
今天急着用这个片子的串口,匆忙中调试串口也话费了一段时间,在网上下了一个程序,忽然就把所有问题搞清楚了,只是中断就看着头文件中寄存器写的,虽然通讯正常,不过不确定有没有写错.代码如下: #includ ...
- Coding源码学习第四部分(Masonry介绍与使用(二))
接上篇,本篇继续对Masonry 进行学习,接上篇示例: (6)Masonry 布局实现iOS 计算器 - (void)exp4 { WS(weakSelf); // 申明区域,displayView ...
- 面试复习（C++）之基数排序
#include <iostream> using namespace std; int maxbit(int *a,int n) { ;//一位 ;//十进制 ;i<n;i++) ...
- LDAP抛出Error Code 3 - Timelimit Exceeded 异常，导致CAS连接报错
最近公司使用CAS连接LDAP,实现单点登录.遇到了这个问题:登录后,抛出错误: 查看CAS后台,看到这个异常. javax.naming.TimeLimitExceededException: LD ...
- HTML元素隐藏和显示
在web前端开发过程中,经常会用到隐藏和显示元素的方法 总结:1.通过JS或Jquery控制 2.通过CSS样式控制 一.Js或jquery (jquery为例) 1.隐藏元素 使用 ...
- android开发中的问题集锦（慢慢搬运...）
1, android 设置ExpandableListView 系统默认箭头到右边 if(android.os.Build.VERSION.SDK_INT < android.os.Build. ...
- Work around by " Due to heavy load, the latest workflow operation has been queued. " 分类： Sharepoint 2015-07-08 00:19 3人阅读 评论(0) 收藏
I hope most of the users and developers might have come across above note and worried about it. Ther ...