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按钮,中间过程两按钮 ...
随机推荐
- 关于如何在cenos7.0上实现mysql数据库远程连接
设置mysql允许别的客户机控制的权限 mysql -uroot -p #此处为本地linux帐号密码 select user,host from mysql.user; #查看mysql表对应use ...
- 新手使用django-pagination分页
首先使用pip instal pagination 即可完成安装. (pycharm里就是安装个django-pagination外包) 完成后配置如下: 1. 将安装文件中的 pagination ...
- MySql学习(五) —— 数据库优化理论篇(一)
一.数据库管理系统 数据库管理系统(Database Management System, DBMS) 衡量是否是数据库的标准: ACID:是指在数据库管理系统(DBMS)中事务所具有的四个特性: 1 ...
- innoDB 存储引擎
innodb 是在mysql 5.5.8 及之后的版本中成为mysql的默认存储引擎.之前都使用myisam. innodb 是事务型的存储引擎 支持ACID事务,适用于小事务. 1.表空间类 ...
- MySQL 5.6查询优化器新特性的“BUG” eq_range_index_dive_limit
本文转自 http://www.imysql.cn 最近碰到一个慢SQL问题,解决过程有点小曲折,和大家分享下. SQL本身不复杂,表结构.索引也比较简单,不过个别字段存在于多个索引中. CREATE ...
- CentOS 7 Mysql yum源
CentOS 7 安装Mysqlrpm -ivh http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpmyum install m ...
- Python从零开始(1)新手常问
如何清除屏幕 如果是在Windows命令行中,输入 import os os.system('cls') 在IDEL中没有找到完美的清除屏幕的方法 网上提到用新建窗口的方法 如何退出Python提示符 ...
- CentOS6下基于Nginx搭建mp4/flv流媒体服务器(可随意拖动)并支持RTMP/HLS协议(含转码工具)
1.先添加几个RPM下载源 1.1)安装RPMforge的CentOS6源 [root@AY130611215205Z ~]# wget -c http://pkgs.repoforge.or ...
- Intel Code Challenge Final Round (Div. 1 + Div. 2, Combined) E. Goods transportation (非官方贪心解法)
题目链接:http://codeforces.com/contest/724/problem/E 题目大意: 有n个城市,每个城市有pi件商品,最多能出售si件商品,对于任意一队城市i,j,其中i&l ...
- js动画之平抛运动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...