تعليق: عند تنفيذ المثال التالي ، يجب عليك تقديم حزمة jQuery بنفسك ووضع الصورة التي تريد تغييرها على علامة IMG على صفحة HTML. خطوات التنفيذ المحددة هي كما يلي. يمكن للأصدقاء المهتمين الرجوع إليها. آمل أن يكون ذلك مفيدًا للجميع.
رمز JS العامل IMG.JSonMessage = function (e) {
postmessage (مرشح (e.data))
} ؛
مرشح الوظيفة (IMGD) {
var pix = imgd.pixels.data ؛
var xcord = imgd.x / 1000 ؛
var ycord = imgd.y / 1000 ؛
لـ (var i = 0 ، n = pix.length ؛ i <n ؛ i += 4) {
var grayscale = pix [i] * xcord + pix [i + 1] * .59 + pix [i + 2] * .11 ؛
PIX [i] = grayscale ؛ // أحمر
PIX [i + 1] = grayscale ؛ // أخضر
PIX [i + 2] = grayscale ؛ // أزرق
}
IMGD ['pixels']. data = pix ؛
إرجاع IMGD ؛
}
رمز HTML
<! doctype html>
<html>
<head>
<title> test2.html </itlem>
<meta http-equiv = "الكلمات الرئيسية" content = "Keyword1 ، Keyword2 ، Keyword3">
<meta http-equiv = "description" content = "This is is my past">
<meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8">
<!-<link type = "text/css" href = "./ Styles.css">->
<script type = "text/javaScript" src = "../ js/jquery-1.8.0.min.js"> </script>
</head>
<body>
<Canvas> </tanvas>
<img src = "../ image/psu [4] .jpg"> // لاحظ أنك تقوم بإدراج صورة هنا ، وإلا فإنها ستكون عديمة الفائدة.
<script type = "text/javaScript">
عملية الوظيفة (IMG ، X ، Y) {
var canvas = document.getElementById ("mycanvas") ؛
var context = canvas.getContext ('2d') ؛
context.drawImage (IMG ، 0 ، 0) ؛
var pixels = context.getimagedata (0،0 ، img.width ، img.height) ؛
var Worker = New Worker ("img.js") ؛
var obj = {
بكسلات: بكسل ،
X: X ،
Y: Y.
}
عامل. postmessage (OBJ) ؛
عامل.
if (typeof e.data === "String") {
console.log ("العامل:" + e.data) ؛
يعود؛
}
var new_pixels = e.data.pixels ؛ // بكسل من العامل
context.putimagedata (new_pixels ، 0 ، 0) ؛
img.src = canvas.todataurl () ؛ // ثم إلى IMG
}
}
</script>
<script type = "text/javaScript">
$ (function () {
$ (". onhover"). على ("Mouseover" ، وظيفة () {
var x = this.width ؛
var y = this.hight ؛
console.log ("x:" + x + "y:" + y) ؛
العملية (هذا ، x ، y) ؛
}) ؛
})
</script>
</body>
</html>
عند تنفيذ المثال أعلاه ، تحتاج إلى تقديم حزمة jQuery بنفسك ووضع الصورة التي تريد تغييرها على علامة IMG على صفحة HTML. ثم نشر على الخادم وفتح الصفحة. عندما ينتقل الماوس إلى الجزء العلوي من الصورة ، سيحدث التحول. العامل مسؤول عن الوظيفة التي تؤدي وظيفة التحول هنا ، ولن تؤثر على كفاءة الصفحة نفسها حسب الرغبة ، على غرار متعددة في لغة Java.