HTML5中圖片如何設(shè)置成灰度圖-創(chuàng)新互聯(lián)

HTML5中圖片如何設(shè)置成灰度圖，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比金口河網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式金口河網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋金口河地區(qū)。費(fèi)用合理售后完善，十年實(shí)體公司更值得信賴。

以前，在web上要顯示灰度圖片的話，只有手工使用圖片軟件轉(zhuǎn)換。但是現(xiàn)在借助于html5的canvas可以實(shí)現(xiàn)這個(gè)過(guò)程，而不需要再借助圖片編輯軟件了。我用html5和jquery做了一個(gè)demo，來(lái)展示如何實(shí)現(xiàn)這個(gè)功能。

目的
這個(gè)demo將會(huì)向你展示用html5和jquery，如何實(shí)現(xiàn)鼠標(biāo)在圖片上移動(dòng)移出時(shí)，灰度圖像和原圖之間的切換。在html5出現(xiàn)之前，要實(shí)現(xiàn)這個(gè)功能就需要準(zhǔn)備兩個(gè)圖片，一個(gè)灰度圖片，一個(gè)原圖。但是現(xiàn)在借助于html5可以實(shí)現(xiàn)的更快更容易，因?yàn)榛叶葓D片是直接在原圖上生成的。我希望這段js代碼對(duì)你在創(chuàng)建文件或者圖片陳列功能的時(shí)候有幫助作用。

效果圖
HTML5中圖片如何設(shè)置成灰度圖 
jquery 代碼
下面的jquery代碼將會(huì)尋找目標(biāo)圖片，并生成一個(gè)灰度的版本。當(dāng)你鼠標(biāo)移動(dòng)到圖片上時(shí)，灰度圖片會(huì)變成原色。



代碼如下:


<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// 設(shè)置 window load事件是為了等待所有圖片加載完畢之后才行運(yùn)行
$(window).load(function(){
// 使圖片漸入，這樣有顏色的原圖就不會(huì)顯示出來(lái)了，然后再執(zhí)行window load 事件
$(".item img").fadeIn(500);
// 復(fù)制圖片
$('.item img').each(function(){
var el = $(this);
el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
var el = $(this);
el.parent().css({"width":this.width,"height":this.height});
el.dequeue();
});
this.src = grayscale(this.src);
});
// 使圖片漸入
$('.item img').mouseover(function(){
$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
})
$('.img_grayscale').mouseout(function(){
$(this).stop().animate({opacity:0}, 1000);
});
});
// 使用canvas制作灰色圖片
function grayscale(src){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
</script>



如何使用
依照下面的步驟：
引用jquery.js
復(fù)制上面的代碼
設(shè)置目標(biāo)圖片(eg: .post-img, img, .gallery img, etc.)
你也可以設(shè)置動(dòng)畫的速度(ie. 1000 = 1 second)
HTML5中圖片如何設(shè)置成灰度圖 
兼容性
我嘗試了所有支持html5和canvas的瀏覽器，例如：Chrome, Safari, 和 Firefox。如果是不支持html5的瀏覽器，他只會(huì)用原圖，不會(huì)生成灰度圖片。
注意：如果本地html文件不能在firefox和chrome上運(yùn)行的話，你就需要將html文件部署到服務(wù)器上去了。

自我實(shí)踐
我自己按照教程測(cè)試了下，發(fā)現(xiàn)些需要注意的事項(xiàng)，使用firefox打開頁(yè)面，程序不能正確運(yùn)行，但是將相關(guān)代碼部署到服務(wù)器之后可以運(yùn)行。
必須保證是本地圖片，不然要報(bào)Security error。
這是因?yàn)?/strong>：
Canvas是HTML5標(biāo)準(zhǔn)中的畫布元素,可以用來(lái)繪制2D和3D圖像.
但是在調(diào)試的時(shí)候很容易遇到Security error問(wèn)題.
目前我在調(diào)試時(shí)遇到過(guò)的Security error主要是出現(xiàn)在toDataURL()和src上.
Security error說(shuō)明這段代碼沒(méi)有語(yǔ)義問(wèn)題,但因?yàn)榘踩驘o(wú)法正常運(yùn)行.

throw Security error的情況:
在Canvas中使用跨域圖片
在本地?zé)o服務(wù)器環(huán)境下進(jìn)行調(diào)試
無(wú)法獲取當(dāng)前域與圖片的關(guān)系
在stackoverflow上查到的一些解決方法通常是讓你解決跨域問(wèn)題.
但實(shí)際上如果你本地調(diào)試時(shí)不使用服務(wù)器軟件也會(huì)造成這個(gè)問(wèn)題.
例如: 本地調(diào)試時(shí)使用toDataURL功能,此時(shí)的Canvas中使用了本地的圖片文件.在Chrome和Firefox中仍然會(huì)throw security error.
常見(jiàn)的解決方法是在本地架設(shè)一個(gè)服務(wù)器環(huán)境,或者將內(nèi)容提交到服務(wù)器上再進(jìn)行調(diào)試.

看完上述內(nèi)容，你們掌握HTML5中圖片如何設(shè)置成灰度圖的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

標(biāo)題名稱：HTML5中圖片如何設(shè)置成灰度圖-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://muchs.cn/article20/cochjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、全網(wǎng)營(yíng)銷推廣、網(wǎng)站設(shè)計(jì)、用戶體驗(yàn)、移動(dòng)網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)