在項目中經(jīng)常會用到j(luò)s上傳圖片本地預(yù)覽的效果，同時需要在預(yù)覽圖上直接預(yù)覽截圖的范圍。

下面是我寫的簡單的demo，是用js結(jié)合cropper.js模擬實現(xiàn)此項前端的功能，后臺則不考慮。

準備：引入文件：

插件地址：

https://fengyuanchen.github.io/cropperjs/

效果如下：

一、實現(xiàn)js上傳圖片本地預(yù)覽的功能。html:

?

javascript:

/*?從?file?域獲取?本地圖片?url?*/

function?getFileUrl(sourceId)?{

var?url;

if?(navigator.userAgent.indexOf("MSIE")>=1)?{?//?IE

url?=?document.getElementById(sourceId).value;

}?else?if(navigator.userAgent.indexOf("Firefox")>0)?{?//?Firefox

url?=?window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));

}?else?if(navigator.userAgent.indexOf("Chrome")>0)?{?//?Chrome

url?=?window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));

}

return?url;

}

/*?將本地圖片?顯示到瀏覽器上?*/

function?preImg(sourceId,?targetId)?{

var?url?=?getFileUrl(sourceId);

var?imgPre?=?document.getElementById(targetId);

imgPre.src?=?url;

}

上面的方法，可以實現(xiàn)上傳圖片本地預(yù)覽的功能。下面我們再來看如何結(jié)合cropper.js實現(xiàn)預(yù)覽截圖的功能。

二、結(jié)合cropper.js實現(xiàn)預(yù)覽截圖的功能。html:

?

開始裁剪

裁剪

????

javascript:

/*?從?file?域獲取?本地圖片?url?*/

function?getFileUrl(sourceId)?{

var?url;

if?(navigator.userAgent.indexOf("MSIE")>=1)?{?//?IE

url?=?document.getElementById(sourceId).value;

}?else?if(navigator.userAgent.indexOf("Firefox")>0)?{?//?Firefox

url?=?window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));

}?else?if(navigator.userAgent.indexOf("Chrome")>0)?{?//?Chrome

url?=?window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));

}

return?url;

}

/*?將本地圖片?顯示到瀏覽器上?*/

function?preImg(sourceId,?targetId)?{

var?url?=?getFileUrl(sourceId);

var?imgPre?=?document.getElementById(targetId);

imgPre.src?=?url;

var?imgCrop?=?document.getElementById('cropTestImg');

imgCrop.src=?url;

}

/*?點擊裁剪圖片?*/

$("#cropBeginBtn").on('click',?function(event)?{

var?$image?=?$('#cropTestImg');

$image.cropper({

movable:?false,

zoomable:?false,

rotatable:?false,

scalable:?false,

autoCropArea:0.5,

minCropBoxWidth:100,

minCropBoxHeight:100

});

/*?點擊獲取圖片的裁剪大小?*/

$('#cropEndBtn').on('click',function(){

var?filenames?=?document.getElementById('cropTestImg').src;

var?imageData?=?$image.cropper('getData');

console.log(imageData);

alert(imageData.x+imageData.y+imageData.width+imageData.height);

return?false;

});

});

上面的方法，可以很好的解決js上傳圖片本地預(yù)覽同時支持預(yù)覽截圖的功能的方法。

總結(jié)

以上是生活随笔為你收集整理的本地如何预览php文件上传,如何实现js上传图片本地预览同时支持预览截图的功能...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。