使用svg和canvas实现图片的剪切
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用svg和canvas实现图片的剪切相关的知识，希望对你有一定的参考价值。
参考技术A 最近工作项目上需要实现一个对图片进行多次剪切，并上传服务器的功能。要求可以在图片上增加用户交互，进行一些增删改查的操作一. 图片的渲染，用canvas还是svg
svg的对象级别操作使得在图片中添加dom组件用于用户交互变得方便，但是svg不提供对图片像素级别的处理，无法获取特定位置的图片像素数据，因此图片的剪切后上传的功能需要使用canvas，canvas提供toDataURL的api可以获取指定位置的base64。因此使用svg和结合的方案，svg用于图片显示和剪切的操作，以及用户交互的dom操作，canvas用户获取剪切图片的数据
二. 具体实现
利用canvas图片剪切
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Jscript/jquery-1.11.1.min.js"></script>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
.main {
position: relative;
height: 500px;
width: 500px;
border: 1px solid gray;
overflow: hidden;
}
#btnfile {
}
.image {
position: absolute;
height: 500px;
width: 500px;
z-index: 1;
}
.cut_container {
position: absolute;
border: 1px solid orange;
height: 150px;
width: 150px;
left: 175px;
top: 175px;
z-index: 8888;
}
.btn_container {
position: absolute;
top: 500px;
}
</style>
</head>
<body>
<canvas id="mycan" width="200" height="200" style="display:none"></canvas>
<div class="main" id="img_container">
<div class="cut_container" id="cut_container" draggable="false"></div>
<img id="myImg" class="image" src="images/6.jpg" draggable="false" />
</div>
<div class="btn_container">
<input type="file" id="btnfile" />
<button id="btn_cut" onclick="cut_picture()">确定</button>
</div>
</body>
</html>
<script type="text/javascript">
var img = document.getElementById("myImg");
var width = parseInt(img.width);
var height = parseInt(img.height);
var x = 0; var y = 0;
var cut = $(document.getElementById("cut_container"))
$("#btnfile").change(function () {
var fr = new FileReader();
var file = this.files[0];
fr.readAsDataURL(file);
fr.onload = function () {
console.log(fr.result);
img.src = fr.result;
width = img.width;
height = img.height;
}
})
var x = 0, y = 0;
var canvas = document.getElementById("mycan");
var ctx = canvas.getContext("2d");
img.onload = function () {
ctx.drawImage(img, 0, 0, width, height);
}
document.getElementById("img_container").onmousewheel = function (e) {
e = event || e;
var v = e.wheelDelta;
if (v > 0) {
width += 10;
height += 10;
$(img).css({ height: height, width: width })
}
else {
width -= 10;
height -= 10;
if (width < 150 || height < 150) {
width = 150;
height = 150;
}
$(img).css({ height: height, width: width })
}
}
//定位有点bug
$("#myImg").mousedown(function (e) {
e = event || e;
var W = e.offsetX * 1;
var H = e.offsetY * 1;
$(document).bind("mousemove", function (ex) {
ex = event || ex;
var left = ex.clientX * 1;
var top = ex.clientY * 1;
var l = left - W;
var t = top - H;
$("#myImg").css({ left: l, top: t })
})
})
$("#img_container").mouseup(function () {
$(document).unbind("mousemove")
})
function cut_picture() {
canvas.height = 150;
canvas.width = 150;
x = parseInt(img.style.left) - parseInt(cut.css("left"));
y = parseInt(img.style.top) - parseInt(cut.css("top"));
ctx.drawImage(img, x, y, width, height);
console.log(canvas.toDataURL())
window.open(canvas.toDataURL())
}
</script>
以上是关于使用svg和canvas实现图片的剪切的主要内容，如果未能解决你的问题，请参考以下文章