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按钮,中间过程两按钮 ...
随机推荐
- JavaScript 面向对象(一) —— 基础篇
学好JS的面向对象,能很大程度上提高代码的重用率,像jQuery,easyui等,这篇博客主要从细节上一步步讲JS中如何有效地创建对象,也可以看到常见的创建对象的方式,最后也会附上一些JS面向对象的案 ...
- web前端面试题
HTML+CSS 1.对WEB标准以及W3C的理解与认识 标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用户 ...
- Go语言开发环境配置
一.我为什么要学习go语言 当今已经是移动和云计算时代,Go出现在了工业向云计算转型的时刻,简单.高效.内 置并发原语和现代的标准库让Go语言尤其适合云端软件开发(毕竟它就是为此而设计的).到2014 ...
- 利用yii2 gridview实现批量删除案例[转]
今天仍然继续探讨GridView的问题,昨天有个小伙伴留言说你用gridview给我去掉表头的链接?我想啊想,这用gridview确实不容易实现,至少我没想出来,会的下方可留言.但是呢,这根gridv ...
- iOS开发_MVC设计模式
MVC,是一种主流的设计模式,本博文总结一下自己对MVC的看法和理解,浅知拙见,难登大雅之堂,如有欠缺遗漏,还望各位指正. MVC是Model-View-Controller 的缩写,Model 是指 ...
- Python array,list,dataframe索引切片操作 2016年07月19日——智浪文档
array,list,dataframe索引切片操作 2016年07月19日——智浪文档 list,一维,二维array,datafrme,loc.iloc.ix的简单探讨 Numpy数组的索引和切片 ...
- Switch图形练习
//package IfAndSwitchs;import java.util.Scanner; public class Mianji { public static void main(Strin ...
- google closure--继承模块一：goog.inherits()
最近在项目是使用了google closure框架,深入研究了一下源码,先从最简单的继承系统吧. 废话不多说,closure继承模块主要有2个API: goog.inherits(childCtor, ...
- 012 VS2013常用快捷键
2016-01-28 1.回到上一个光标位置/前进到下一个光标位置 1)回到上一个光标位置:使用组合键“Ctrl + -”: 2)前进到下一个光标位置:“Ctrl + Shift + - ”. 2. ...
- MySQL Workbench的使用教程 （初级入门版）
MySQL Workbench 是 MySQL AB 最近释放的可视数据库设计工具.这个工具是设计 MySQL 数据库的专用工具. MySQL Workbench 拥有很多的功能和特性:这篇由Djon ...