圖片裁剪js_如何在圖片上傳前用js(jquery)判斷圖片的尺寸

Ⅰ 如何在圖片上傳前用js(jquery)判斷圖片的尺寸

創建img標簽：
IE瀏覽器直接src=圖片本地路徑，然後可以獲取這個img的尺寸。

其他瀏覽版器使用HTML5的FileReader獲取文件權資源轉化為base64寫入img的src，然後可以獲取這個img尺寸。

Ⅱ HTML5中，如何為圖片製作放大鏡效果

製作圖片的放大效果我考慮到的方法是將原始圖片繪制到canvas上，然後在對canvas進行局部裁剪最後對裁剪的部分進行放大，這樣就可以實現放大鏡的效果。

這里我給出一個實現這個想法的示例。該示例實際上就是運用HTML5canvas中對畫布進行裁剪與保存畫布狀態的相關知識實現的。

上面是給出示例的效果圖。這是不是你想要的放大鏡效果呢？

下面我們來看下示例代碼：在這個示例中當你點擊圖片時圖片就會出現上圖效果，再一次點擊時就變成原始圖片了。

<!DOCTYPE html>

<html>

<head>

<!—HTML代碼設計：一個簡單的canvas元素-->

</head>

<body>

<p>你的瀏覽器不支持canvas元素</p>

</canvas>

</div>

window.onload=function() {

//獲取canvas對象以及圖片對象

var

canvas = document.getElementById('canvas'),

img = new Image(),

context = null,

dataUrl = null,

//設置一個標記，該標記的作用是控制我們點擊canvas時放大鏡效果的消失和出現

isMagnified = false,

//init函數只要是在圖片載入時繪制出圖形

init = function() {

img.onload = function() {

//繪制原始圖片

context.drawImage(img, 0, 0);

//將圖片信息轉化為二進制信息或者URL信息存儲在dataUrl中方便後面調用

dataUrl = canvas.toDataURL();

}

img.src = 'fist-pump-baby.jpg';

//設置標記值

isMagnified = false;

//magnify函數的作用是繪制具有放大鏡效果的圖形

magnify = function() {

//保存當前畫布的繪制狀態即畫布繪制原始圖片的狀態。方便我們在後面恢復到繪制原始圖片的狀態

context.save();

//因為放大鏡的圓圈和把手是通過canvas繪制的這里設置了一些繪制把手和圓圈的樣式屬性。

context.lineWidth = 10;//線條寬度

context.shadowColor = '#000';//陰影的顏色黑色

context.shadowBlur = 15;//模糊級別為15

context.shadowOffsetX = 5;//形狀與陰影的水平距離5

context.shadowOffsetY = 5;//形狀與陰影的垂直距離5

//保存畫布當前狀態即我們設置陰影屬性後的狀態方便後面使用

context.save();

//繪制出放大鏡把手的圖形

context.beginPath();

context.moveTo(230, 230);

context.lineCap = 'round';

context.lineWidth = 30;

context.lineTo(285, 285);

context.stroke();

//對圖片進行裁剪，裁剪出的圖形是一個圓形。

context.beginPath();

context.arc(

150,

115,

Math.PI * 2,

true);

context.clip();

//創建一個新的Image對象，這個Image對象的圖片資源是前面存儲在dataUrl中的圖片資源。所以這個Image對象和之前初始化的Image對象是完全一樣的。

var magnified = new Image();

magnified.src = dataUrl;

//對Image對象進行放大1.5倍，並進行繪制。注意此時的畫布狀態時裁剪為一個圓形的狀態，所以這里繪制的也僅僅是圖片中的一個圓形區域。這里為了繪制出圖片中娃娃的臉設置了繪制的圖片有一定的偏移量。

context.scale(1.5, 1.5);

context.drawImage(img, -40, -40);

//調用restore()函數將畫布狀態恢復到繪制把放大鏡把手時的狀態，即具有陰影屬性

context.restore();

//繪制放大鏡的圓圈，即繪制剛剛我們裁剪出來圖片的邊框。這樣剛剛裁剪出來的圓形圖形就會正好處於放大鏡的圓圈中。

context.arc(

150,

115,

Math.PI * 2,

true);

context.stroke();

//重置畫布，將畫布恢復到繪制元素圖片的狀態，以方便繪制出放大效果後，再次點擊是繪制原始圖片。

context.restore()；

//設置標記值，實現點擊後放大效果消失。

isMagnified = true;

};

//載入初始化代碼，即當運行頁面時會在頁面繪制出一個原始圖像

init();

//監聽畫布的點擊事件，當點擊頁面的圖像時會根據標記的值來進行判斷是否對畫布進行方大處理

$('canvas').click(function() {

if (isMagnified) {

init();//繪制原始圖像

}

else {

magnify();//繪制放大的圖像

}

});

}

</script>

</body>

</html>

對於這些知識在一個叫秒秒學的教程網站上有相關的學習資料，有興趣的可以自己去看看，希望對你有幫助。

導航:首頁 > 編程語言 > 圖片裁剪js

圖片裁剪js

與圖片裁剪js相關的資料

友情鏈接