我有裁剪图像的坐标位置(x1,y1,x2,y2,宽度和高度) 我将这些值传递给表单的模态元素。 我想以150x150尺寸显示裁剪后的图像。
我尝试了以下代码,
var rx = xsize / (x2-x1);
var ry = ysize / (y2-y1);
document.getElementById('logo').style.width=Math.round(rx * boundx) + 'px';//No I18N
document.getElementById('logo').style.height=Math.round(ry * boundy) + 'px';//No I18N
document.getElementById('logo').style.marginLeft= '-' + Math.round(rx * x1) + 'px';//No I18N
document.getElementById('logo').style.marginTop= '-' + Math.round(ry * y1)+ 'px';//No I18N
logo是我的图片代码的ID。
使用此代码裁剪的图片不正确。
任何人都可以帮助我吗?
答案 0 :(得分:1)
在HTML5中使用此技术进行图像裁剪
对于玩图像尝试使用画布,在画布上操作非常容易。
转到 - > http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/
你会得到很多技巧。
答案 1 :(得分:0)
你可以达到同样的效果。
HTML:
<div class="crop">
<img class="photo" src="http://placekitten.com/400/200" />
</div>
CSS:
.crop {
overflow: hidden;
width: 150px; /* crop width */
height: 150px; /* crop height */
}
.photo {
margin-top: -20px; /* start x */
margin-left: -50px; /* start y */
}