PS:在IE中图片的height和width值正确,但是不能正常显示,相关问题待续。
详细功能参见
http://blog.csdn.net/Vanessa219/archive/2009/04/27/4130250.aspx
image.js
loadimg.onload = function(image){
return function() {
// copy relevant parameters to the Raphael element
image.attr( {
src: this.src,
width: this.width,
height: this.height
} );
}
}(image);
loadimg.src = source;
$('#selectArea').jqDrag().jqResize('.jqResize');
$("#selectArea").css({
background:"#888888",
width:canvans_width,
height:canvans_height
});
$("#ok").click(function(){
paper.setSize($("#selectArea").width(), $("#selectArea").height());
pic_select = $("#picSelect").val();
degree = $("#degree").val();
if(pic_select=="customize"){
loadimg.onload = function(image){
image.attr( {
src: source,
width:$("#selectArea").width(),
height:$("#selectArea").height()
} );
}(image);
}
if(pic_select=="actual size"){
loadimg.onload = function(image){
image.attr( {
src: source,
width:$("#rImg").width(),
height:$("#rImg").height()
} );
}(image);
}
if(pic_select=="fit image"){
var ration = $("#selectArea").width()/$("#selectArea").height();
if(ration_r > ration){
loadimg.onload = function(image){
image.attr( {
src: source,
width:$("#selectArea").width(),
height:$("#selectArea").width()/ration_r
}
);
}(image);
}
else{
loadimg.onload = function(image){
image.attr( {
src: source,
width:$("#selectArea").height()*ration_r,
height:$("#selectArea").height()
} );
}(image);
}
}
if(pic_select=="fit width"){
ration_r = $("#rImg").width()/$("#rImg").height();
loadimg.onload = function(image){
image.attr( {
src: source,
width:$("#selectArea").width(),
height:$("#selectArea").width()/ration_r
});
}(image);
}
if(pic_select=="fit height"){
ration_r = $("#rImg").width()/$("#rImg").height();
loadimg.onload = function(image){
image.attr( {
src: source,
width:$("#selectArea").height()*ration_r,
height:$("#selectArea").height()
} );
}(image);
}
image.rotate(degree);
});
});
index.html 其中raphael.js版本为0.7.4
<mce:style type="text/css"><!--
.jqHandle {
background: red;
height:15px;
}
.jqDrag {
width: 100%;
cursor: move;
}
.jqResize {
width: 15px;
position: absolute;
bottom: 0;
right: 0;
cursor: se-resize;
}
.jqDnR {
z-index: 3;
position: relative;
width: 180px;
font-size: 0.77em;
color: #618d5e;
background-color: #EEE;
}
--></mce:style><style type="text/css" mce_bogus="1"> .jqHandle {
background: red;
height:15px;
}
.jqDrag {
width: 100%;
cursor: move;
}
.jqResize {
width: 15px;
position: absolute;
bottom: 0;
right: 0;
cursor: se-resize;
}
.jqDnR {
z-index: 3;
position: relative;
width: 180px;
font-size: 0.77em;
color: #618d5e;
background-color: #EEE;
}
</style>
</head>
<body>
<img id="rImg" src="./image/gile.gif" mce_src="image/gile.gif"/>
旋转角度:
<input id="degree" type="text" value="0"/>
<select name="picSelect" id="picSelect">
<option value="customize">customize</option>
<option value="actual size">actual size</option>
<option value="fit width">fit width</option>
<option value="fit height">fit height</option>
<option value="fit image">fit image</option>
</select>
<input id="ok" type="button" value="OK">
<div style="position: relative;height:430px; width:900px; background-color:#111111">
<div id="selectArea" class="jqDnR">
<div class="jqHandle jqResize"></div>
</div>
</div>
</body>
</html>