作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用java脚本裁剪全尺寸图像并制作缩略图。一切都很好,但我想知道如何在编辑后上传裁剪后的缩略图?有办法上传吗?
我的代码 -当点击“编辑缩略图”时,我们可以裁剪全尺寸图像,当裁剪其在 预览图像 区域中可见时 - 裁剪全尺寸图像后,我们可以单击“应用更改” - 当单击该按钮时 Java 脚本功能激活 -单击时
var lassoEnd = function() {
$('thumbnail-controller').innerHTML = "<div><img class='loading_icon' src='public/loading.gif'/>Loading...</div>";
lassoCrop.destroy();
I WANT TO UPLOAD MY CROPPED AND CREATED THUMBNAIL IMAGE HERE !
}
在该功能中,我想上传我创建的缩略图..请帮助我!
<div id="preview-thumbnail" class="preview-thumbnail">
<img src="<?php echo $thumb ?>" alt="" id="previewimage" class="thumb_icon item_photo_user thumb_icon" /> </div>
<div id="thumbnail-controller" class="thumbnail-controller">
<a href="javascript:void(0);" onclick="lassoStart();">Edit Thumbnail</a> </div>
<script type="text/javascript">
var orginalThumbSrc;
var originalSize;
var loader = new Element('img',{ src:'public/loading.gif'});
var lassoCrop;
var lassoSetCoords = function(coords)
{
var delta = (coords.w - 48) / coords.w;
$('coordinates').value =
coords.x + ':' + coords.y + ':' + coords.w + ':' + coords.h;
$('previewimage').setStyles({
top : -( coords.y - (coords.y * delta) ),
left : -( coords.x - (coords.x * delta) ),
height : ( originalSize.y - (originalSize.y * delta) ),
width : ( originalSize.x - (originalSize.x * delta) )
});
}
var lassoStart = function()
{
if( !orginalThumbSrc ) orginalThumbSrc = $('previewimage').src;
originalSize = $("lassoImg").getSize();
lassoCrop = new Lasso.Crop('lassoImg', {
ratio : [1, 1],
preset : [10,10,58,58],
min : [48,48],
handleSize : 8,
opacity : .6,
color : '#7389AE',
border : '/public/photo/crop.gif',
onResize : lassoSetCoords,
bgimage : ''
});
$('previewimage').src = $('lassoImg').src;
//$('preview-thumbnail').innerHTML = '<img id="previewimage" src="'+sourceImg+'"/>';
$('thumbnail-controller').innerHTML = '<a hef="javascript:void(0);" onclick="lassoEnd();">Apply Changes</a> or <a href="javascript:void(0);" onclick="lassoCancel();">cancel</a>';
$('coordinates').value = 10 + ':' + 10 + ':' + 58+ ':' + 58;
}
var lassoEnd = function() {
$('thumbnail-controller').innerHTML = "<div><img class='loading_icon' src='public/loading.gif'/>Loading...</div>";
lassoCrop.destroy();
I WANT TO UPLOAD MY CROPPED AND CREATED THUMBNAIL IMAGE HERE !
}
</script>
最佳答案
更简单的方法是上传裁剪坐标并在服务器端进行裁剪。
关于php - 裁剪后的图片如何上传?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7944989/
我是一名优秀的程序员,十分优秀!