[英]How to upload image after cropping?
即時通訊使用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>
更容易的是上傳裁剪坐標並在服務器端進行裁剪。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.