极客观点
项目管理
HarmonyOS
我把图片保存到canvas里了，然后用jscrop插件切图，
在onSelect里获取了他的坐标和大小，现在我想把他保存到另一个canvas里
但是drawImage里的第一个参数是保存的是images对象，我写成canvas对象报错，
要怎么改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{margin: 0;padding: 0;}
.box{width:100%;overflow:hidden;margin: 0 auto;}
.piclistbox{width: 50%;float: left;overflow: hidden;border: 1px solid red;box-sizing: border-box;height:600px;}
.canvasbox{width: 50%;float:right;overflow: hidden;border: 1px solid red;box-sizing: border-box;height:600px;}
</style>
<script type="text/javascript" src="jquery-1.11.1.js" ></script>
<script type="text/javascript" src="jquery.Jcrop.min.js" ></script>
</head>
<body>
<div class="box">
<div class="piclistbox"></div>
<div class="canvasbox"></div>
</div>
<input type="button" value="裁切" class="btnpoptailor"></input>
</body>
<script type="text/javascript">
var ADDPOST = (function(root, window) {
root.picture = {
createcanvas:function(picUrl){//创建一个canvas
var _this = this;
var getSingle = function(fn){
var result;
return function(){
return result || (result=fn.apply(this,arguments));
}
}
var createcanvasLayer = function(){
var canvas = $("<canvas id='pic_canvas' style='display:none'></canvas>");
$(".piclistbox").html(canvas);
return canvas;
}
var canvas_pic = getSingle(createcanvasLayer);
$('.btnpoptailor').on('click',function(){
var canvasLayer = canvas_pic();
$(canvasLayer).show();
_this.simditorimg();
})
},
simditorimg:function(){//把图片放到canvas里
var canvas = document.getElementById('pic_canvas');
var img = new Image();
var _this = this;
img.src = "http://img1.3lian.com/img013/v1/83/d/1.jpg";
img.onload = function(){
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0,canvas.width,canvas.height);
alert(img.width + ":" + img.height);
if(img.height > 400){
img.width *= 400 / img.height;
img.height = 400;
}
if(img.width > 400){
img.height *= 400 / img.width;
img.width = 400;
}
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
_this.jscrop();
}
},
jscrop:function(){//裁切
$('.piclistbox').Jcrop({
aspectRatio : 1/1,
bgColor: 'rgba(0,0,0,0.5)',
onChange: updatePreview,
onSelect: updatePreview
});
function updatePreview(c){//这里把裁切的保存到另一个canvas里，大神就是这里报错，等待处理？？？
var canvas = document.createElement('canvas');
var ss = document.getElementById('pic_canvas');
canvas.width = 640;
canvas.height = 640;
$(".canvasbox").append(canvas);
var ctx = canvas.getContext('2d');
ctx.drawImage(ss, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
}
}
}
return root;
}(ADDPOST || {}, typeof window !== 'undefined' ? window : this));
$(function() {
ADDPOST.picture.createcanvas();
})
</script>
</html>
刚好用canvas和jcrop写过东西。
canvas到canvas应该使用getImageData()和putImageData()接口，参数查阅一下文档。
你得到相关坐标后，用getImageData得到imageData对象，然后putImageData到另一个canvas上，最后转成DataURL或者ObjectUrl就行了。