html5 작업자 예제(2) 이미지 변환 effect_html5 튜토리얼 기술
- WBOY원래의
- 2016-05-16 15:49:251509검색
worker's js code img.js
onmessage = function(e) {
postMessage(filter(e.data))
}
function filter(imgd) {
var pix = imgd.pixels. data;
var xcord = imgd.x / 1000;
var ycord = imgd.y / 1000
for ( var i = 0, n = pix.length; i < n; i = 4 ) {
var greyscale = pix[i] * xcord pix[i 1] * .59 pix[i 2] * .11;
pix[i] = greyscale // 빨간색
pix; 1] = 회색조; // 녹색
pix[i 2] = 회색조; // 파란색
}
imgd['pixels'].data = pix;
return imgd;
html 코드
test2.html<br />< 메타 http-equiv=" 키워드" content="keyword1,keyword2,keyword3"> <br><meta http-equiv="description" content="내 페이지입니다"> Equiv="content-type " content="text/html; charset=UTF-8"> <br><!--<link rel="stylesheet" type="text/css" href="./ styles.css"> --> <br><script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script> <br></head> <br><body> <br><canvas id="myCanvas" width="640" height="480"></canvas> ../image/psu [4].jpg" class="onHover"> //여기에 그림을 삽입하세요. 그렇지 않으면 아무런 효과가 없습니다.<br><script type="text/javascript"> <br>함수 프로세스( img,x,y){ <br>var canvas = document.getElementById("myCanvas"); <br>var context = canvas.getContext('2d') <br>context.drawImage(img) , 0, 0) ; <br>var pixel = context.getImageData(0,0,img.width,img.height) <br>var Worker("img.js") <br>var obj = { <br> 픽셀: 픽셀, <br>x:x, <br>y:y <br>} <br>worker.postMessage(obj) <br>worker.onmessage = function(e) { <br>if (typeof e .data === "string") { <br>console.log("Worker: " e.data) <br>return; <br>} <br>var new_pixels = e.data. Pixels; // 작업자의 픽셀 <br>context.putImageData(new_pixels, 0, 0); <br>img.src = canvas.toDataURL() // 그리고 img로 <br>} <br>} <br></ script> <br><script type="text/javascript"> <br>$(function(){ <br>$(".onHover").on("mouseover", function( ){ <br> var x =this.width; <br>var y = this.height; <br>console.log("X: " x " Y: " y); y); <br>}) <br></body> <br><br><br> 위의 예에서는 jquery 패키지를 직접 소개하고 html 페이지의 img 태그에 변환하려는 이미지를 넣어야 합니다. 그런 다음 서버에 배포하고 페이지를 열면 그림 위에 마우스를 올리면 변환이 발생합니다. 여기서 변환 기능을 수행하는 함수는 작업자를 담당하며 이는 페이지 자체의 효율성에는 영향을 미치지 않습니다. Java 언어의 멀티스레딩과 유사합니다.</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="HTML5 Canvas는 팬/줌/회전 데모 예제(스크린샷 포함)를 구현합니다._html5 튜토리얼 기술" href="https://m.php.cn/ko/faq/6305.html">HTML5 Canvas는 팬/줌/회전 데모 예제(스크린샷 포함)를 구현합니다._html5 튜토리얼 기술</a></span><span>다음 기사：<a class="dBlack" title="HTML5 Canvas는 팬/줌/회전 데모 예제(스크린샷 포함)를 구현합니다._html5 튜토리얼 기술" href="https://m.php.cn/ko/faq/6310.html">HTML5 Canvas는 팬/줌/회전 데모 예제(스크린샷 포함)를 구현합니다._html5 튜토리얼 기술</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="https://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ko/faq/348281.html" title="AlloyTouch 전체 화면 스크롤 플러그인으로 30초 만에 부드러운 H5 페이지 생성" class="aBlack">AlloyTouch 전체 화면 스크롤 플러그인으로 30초 만에 부드러운 H5 페이지 생성</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348372.html" title="HTML5 실제 전투 및 터치 이벤트 분석(touchstart, touchmove 및 touchend)" class="aBlack">HTML5 실제 전투 및 터치 이벤트 분석(touchstart, touchmove 및 touchend)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348373.html" title="HTML5 Canvas 9의 이미지 그리기 예제에 대한 자세한 설명" class="aBlack">HTML5 Canvas 9의 이미지 그리기 예제에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348374.html" title="정규 표현식과 새로운 HTML5 요소" class="aBlack">정규 표현식과 새로운 HTML5 요소</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348469.html" title="NodeJS와 HTML5를 결합하여 여러 파일을 끌어서 놓아 서버에 업로드하는 방법" class="aBlack">NodeJS와 HTML5를 결합하여 여러 파일을 끌어서 놓아 서버에 업로드하는 방법</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '9']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script><!-- End Matomo Code --></html>
코드 복사
코드는 다음과 같습니다.onmessage = function(e) {
postMessage(filter(e.data))
}
function filter(imgd) {
var pix = imgd.pixels. data;
var xcord = imgd.x / 1000;
var ycord = imgd.y / 1000
for ( var i = 0, n = pix.length; i < n; i = 4 ) {
var greyscale = pix[i] * xcord pix[i 1] * .59 pix[i 2] * .11;
pix[i] = greyscale // 빨간색
pix; 1] = 회색조; // 녹색
pix[i 2] = 회색조; // 파란색
}
imgd['pixels'].data = pix;
return imgd;
html 코드
코드 복사코드는 다음과 같습니다. 다음: