使用HTML5中的 Canvas截图？

qq_21743725 2015-04-29 07:21:06

想了好久不知道怎么做~做一个 类似 PS的 截图的小工具~
使用 JS file 获取本地图片 与 Canvas 进行 截取~
但是 貌似 卡住了~ 代码~ 有兴趣的小伙伴 一起交流 跪舔 大神 QQ 1006775252~~~~
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
.wire{
background: red;
width: 500px;
height:10px;
background:red;margin-bottom:50px;cursor:pointer;position:absolute;top:0px;left:0px;
}
</style>

</head>
<body >
<div style="position:relative;height:50px;" id="body">
<div class="wire" style="width:500px;height:10px;background:red;margin-bottom:50px;cursor:pointer;position:absolute;top:0px;left:0px;">
</div>
</div>

<div style="margin-bottom:80px;margin-top:50px;">
<label>请选择文件</label>
<input type="file" id="file">
<input type="button" value="读取图像" onclick="clic()">
</div>

<canvas id="can" style="width:400px;height:400px"></canvas>
<canvas id="a" style="width:400px;height:400px;display:none";> </canvas>
<button onclick="copy()">复制</button>
<script src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
if(typeof FileReader == 'undefined'){alert("您的浏览器不支持FileReader")}
var canvas = document.getElementById("can");
var can = document.getElementById("a");
var con = can.getContext("2d");
var context = canvas.getContext("2d");
function clic(){

var file = document.getElementById("file").files[0];
var reader = new FileReader();
if(!/image\/\w+/.test(file.type)){
alert("请选择图像");
}
reader.readAsDataURL(file);
function drew(){
var grd=context.createLinearGradient(0,0,170,0);
context.fillStyle=grd;
context.fillRect(0,0,400,300);
imaged = new Image();
reader.onload = function(){

imaged.src = this.result;
drawImg(context,imaged);
}
}
function drawImg(context,image){
// createClip(context);
context.drawImage(imaged,0,0);
}
drew()
}
function copy(){
$("#a").show();
var imgData = context.getImageData(0,0,100,30);
con.putImageData(imgData,0,0);

}
var i=1;
function drag(e,oWir,h){
e = e || window.event();
var clientX = e.clientX;
var clientY = e.clientY;
var DisY = clientY - oWir.offset().top;
$(document).on("mousemove",function(e){
oWir.css({
top: e.clientY - DisY +"px",
})
})
$(document).on("mouseup",function(e){
$(this).off("mousemove");
$(this).off("mouseup");
var objNewDiv = $('<div>',{'class':'wire'+h,});
$("#body").append(objNewDiv);
objNewDiv.css({
'background': 'red',
'width': '500px',
'height':'10px',
'cursor':'pointer',
'position':'absolute',
'top':'0px',
'left':'0px',
'MarginBottom':'50px'
})
})
}
$(".wire").on("mousedown",function(e){
drag(e,$(".wire"),1)
})
$("body").on("mousedown",".wire1",function(e){
drag(e,$(".wire1"),2)
})
$("body").on("mousedown",".wire2",function(e){
drag(e,$(".wire2"),3)
})
</script>
</body>
</html>
...全文
298 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
qq_21743725 2015-04-30
  • 打赏
  • 举报
 回复
这----- 实现的 时候 是 拖拽的时候 可以截取 响应 拖拽高度的 图片~ 单击复制时候~宽度截取 100% 高度截取 线的高度 function clic(){ var file = document.getElementById("file").files[0]; var reader = new FileReader(); if(!/image\/\w+/.test(file.type)){ alert("请选择图像"); } reader.readAsDataURL(file); function drew(){ var grd=context.createLinearGradient(0,0,170,0); context.fillStyle=grd; context.fillRect(0,0,400,300); imaged = new Image(); reader.onload = function(){ imaged.src = this.result; drawImg(context,imaged); } } function drawImg(context,image){ // createClip(context); context.drawImage(imaged,0,0); } drew() } 这段代码 是 把本地图片 显示出来~并且画在canvas 上 var i=1; function drag(e,oWir,h){ e = e || window.event(); var clientX = e.clientX; var clientY = e.clientY; var DisY = clientY - oWir.offset().top; $(document).on("mousemove",function(e){ oWir.css({ top: e.clientY - DisY +"px", }) }) $(document).on("mouseup",function(e){ $(this).off("mousemove"); $(this).off("mouseup"); var objNewDiv = $('<div>',{'class':'wire'+h,}); $("#body").append(objNewDiv); objNewDiv.css({ 'background': 'red', 'width': '500px', 'height':'10px', 'cursor':'pointer', 'position':'absolute', 'top':'0px', 'left':'0px', 'MarginBottom':'50px' }) }) } $(".wire").on("mousedown",function(e){ drag(e,$(".wire"),1) }) $("body").on("mousedown",".wire1",function(e){ drag(e,$(".wire1"),2) }) $("body").on("mousedown",".wire2",function(e){ drag(e,$(".wire2"),3) }) 这段代码是 实现 拖拽 function copy(){ $("#a").show(); var imgData = context.getImageData(0,0,100,30); con.putImageData(imgData,0,0); } 这段代码是来裁剪
五只鸭子 2015-04-30
  • 打赏
  • 举报
 回复
fancybox 已经实现了这个功能，如果能做出来网页上点击一个按钮就能截屏的功能就更好了
x556549 2015-04-30
  • 打赏
  • 举报
 回复
你是在哪卡住了？我看了一下你的，问题有点多！
业余草 2015-04-30
  • 打赏
  • 举报
 回复
http://www.html5tricks.com/demo/html5-screenshot/index.html 这是例子
业余草 2015-04-30
  • 打赏
  • 举报
 回复
推荐例子下载地址：http://www.html5tricks.com/download/html5-screenshot.rar
业余草 2015-04-30
  • 打赏
  • 举报
 回复 
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
.wire{
background: red;
width: 500px;
height:10px;
background:red;margin-bottom:50px;cursor:pointer;position:absolute;top:0px;left:0px;
}
</style>
     
</head>
<body >
<div style="position:relative;height:50px;" id="body">
         <div class="wire" style="width:500px;height:10px;background:red;margin-bottom:50px;cursor:pointer;position:absolute;top:0px;left:0px;">
        </div>
    	</div>

<div style="margin-bottom:80px;margin-top:50px;">
<label>请选择文件</label>
<input type="file" id="file">
<input type="button" value="读取图像" onclick="clic()">
</div> 
 
<canvas id="can" style="width:400px;height:400px"></canvas> 
<canvas id="a" style="width:400px;height:400px;display:none";> </canvas>
<button onclick="copy()">复制</button>
<script src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
if(typeof FileReader == 'undefined'){alert("您的浏览器不支持FileReader")}
var canvas = document.getElementById("can");
var can = document.getElementById("a");
var con = can.getContext("2d");
var context = canvas.getContext("2d");
function clic(){

var file = document.getElementById("file").files[0];
var reader = new FileReader();
if(!/image\/\w+/.test(file.type)){
alert("请选择图像");
}
reader.readAsDataURL(file);
function drew(){
var grd=context.createLinearGradient(0,0,170,0);
context.fillStyle=grd;
context.fillRect(0,0,400,300);	
imaged = new Image();
reader.onload = function(){

imaged.src = this.result;
drawImg(context,imaged);
}	
}
function drawImg(context,image){
// createClip(context);
context.drawImage(imaged,0,0);
}
drew()	
}	
function copy(){
$("#a").show();
var imgData = context.getImageData(0,0,100,30);
con.putImageData(imgData,0,0);

}	
  	  	var i=1; 
  	function drag(e,oWir,h){
  	e = e || window.event();
var clientX = e.clientX;
            var clientY = e.clientY;
            var DisY = clientY - oWir.offset().top;
$(document).on("mousemove",function(e){
oWir.css({
top: e.clientY - DisY +"px",
})
})
$(document).on("mouseup",function(e){
$(this).off("mousemove");
$(this).off("mouseup");
var objNewDiv = $('<div>',{'class':'wire'+h,});	
$("#body").append(objNewDiv);
objNewDiv.css({
'background': 'red',
'width': '500px',
'height':'10px',
'cursor':'pointer',
'position':'absolute',
'top':'0px',
'left':'0px',
'MarginBottom':'50px'
})
})
  	}
        $(".wire").on("mousedown",function(e){
drag(e,$(".wire"),1)
})
        $("body").on("mousedown",".wire1",function(e){
            drag(e,$(".wire1"),2)
        })
         $("body").on("mousedown",".wire2",function(e){
            drag(e,$(".wire2"),3)
        })
</script>
</body>
</html>
更多 0
天际的海浪 2015-04-29
  • 打赏
  • 举报
 回复
代码太乱了,改还一如重写,都要实现什么功能?
jason09527 2015-04-29
  • 打赏
  • 举报
 回复
这代码也太难看懂了。建议可以编辑i一下。 之前做过类似的功能，使用的jquery的两个插件，名字忘记了。用于产生要截取的区域的位置和大小，然后上床到服务器php脚本，用php的图形库函数生存的截图。 仅供参考。
qq_21743725 2015-04-29
  • 打赏
  • 举报
 回复
求解答 在线等~
使用HTML5 canvas 标签进行图片裁剪、旋转、缩放示例代码
使用HTML5 canvas 标签进行图片裁剪、旋转、缩放示例代码
html2canvas.js 下载
html2canvas.js 和html2canvas.min.js 以及应用示例
HTML5 Canvas拼图游戏开发
本课程基于HTML5的Canvas编程技术、JavaScript和CSS等前端技术，实现了拼图游戏的开发过程，可以借此课程初步掌握网页游戏的开发过程和思路，并加强对H5等前端技术的熟练掌握。
html5 canvas核心技术图形、动画与游戏开发完整源码
html5 canvas核心技术图形、动画与游戏开发完整源码
HTML5 Canvas 实现雨滴下落在玻璃表面的动画效果
Rainyday.js 是一个轻量的 JavaScript 库，利用 HTML5 Canvas 实现雨滴下落在玻璃表面的动画效果。Rainyday.js 尽可能的模拟现实的雨滴效果，几乎可以以假乱真了。
HTML5

39,084

社区成员

5,548

社区内容

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章