linnou
11-01-2013, بتوقيت غرينيتش 04:04 PM
http://www.dzbatna.com/images/icons/iconrote.gif ط£ط*ط¯ طھط·ط¨ظٹظ‚ط§طھ Html5 ط§ظ„ظ…ظ…طھط¹ط© ط¬ط¯ط§ظ‹ .. طھظ„ظˆظٹظ† ط§ظ„طµظˆط±ط© ط¹ظ†ط¯ ظ…ط±ظˆط± ط§ظ„ظ…ط§ظˆط³ ! (http://www.dzbatna.com/t1885652/)
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته ..
اليوم وانا أتصفح موقع TutPlus المعروف , وجدت تطبيق Html5 ممتاز جداً و حبيت أنقله عشان تعم الفائدة ..
مُلاحظة : الموجود في الموقع شرح طريقة كامل لعمله و تطبيقه وانا لم أشاهده بالكامل بصراحة , لكن نقلت لكم الكود code جاهز مع بعض الملاحظات مني لـ كيفية التعديل عليه + قمت بتعديلات بسيطة عليه لأعطيه مرونة أكبر ..
أول شي مثال على التطبيق : untitled (http://demo.jeffrey-way.com/grey-color/grey-color.html)
رمز PHP:
<code style="white-space:nowrap"> <code> <?php
list($width, $height, $type, $attr) = getimagesize("i.jpeg");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<style>
/* Setup...not important. */
.img-wrap {
position: relative;
}
/* Handles animation of b*w to color */
canvas {
position: absolute;
left: 0;
top: 0;
opacity: 1;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}
canvas:hover {
opacity: 0;
}
/* If you MUST have IE support */
#cvs-src {
filter: progid:DXImageTransform.Microsoft.BasicImage(grays cale=1);
}
#cvs-src:hover {
filter: none;
}
</style>
</head>
<body>
<script>
(function() {
var supportsCanvas = !!document.createElement('canvas').getContext;
supportsCanvas && (window.onload = greyImages);
function greyImages() {
var ctx = document.getElementsByTagName("canvas")[0].getContext('2d'),
img = document.getElementById("cvs-src"),
imageData, px, length, i = 0,
grey;
ctx.drawImage(img, 0, 0);
// Set 500,500 to the width and height of your image.
imageData = ctx.getImageData(0, 0, 500, 500);
px = imageData.data;
length = px.length;
for ( ; i < length; i+= 4 ) {
grey = px[i] * .3 + px[i+1] * .59 + px[i+2] * .11;
px[i] = px[i+1] = px[i+2] = grey;
}
ctx.putImageData(imageData, 0, 0);
}
})();
</script>
<div class="img-wrap">
<img id="cvs-src" src="i.jpeg" /> <?php
echo"<canvas width=$width height=$height></canvas> "; ?>
</div>
</body>
</html> </code> </code>
نأتي لـ شرح طريقة بسيط للي فوق ,
في البداية :
رمز PHP:
<code style="white-space:nowrap"> <code> <?php
list($width, $height, $type, $attr) = getimagesize("i.jpeg");
?> </code> </code>
طبعاً هالجزئية مني , و هي عشان نحصل على مقاسات الصورة طول و عرض لأننا راح نحتاجها بعدين , الموقع طبعاً كان مثبت الطول و العرض على 500 http://www.dzbatna.com/images/smilies/crazy.gif ! وبين القوسين مسار الصورة ..
و بعدها خصائص Css واضحة للجميع , لكن ما أنصح بالتعديل عليها لأنها تناسب التطبيق ,,
رمز PHP:
<code style="white-space:nowrap"> <code> <div class="img-wrap">
<img id="cvs-src" src="i.jpeg" /> <?php
echo"<canvas width=$width height=$height></canvas> "; ?>
</div> </code> </code>
و في الأخير قمنا بـ استدعاء الصورة داخل Div خاص بخصائص الـ Css الخاصة بـ img-wrap
و أعطيناها الـ Id "cvs-src" عشان تطبق الدالة الخاصة بالتسويد و التلوين ..
و طبعا رابط الصورة بين علامتي التنصيص , وفي الأخير تدخل الـ Php لوضع المقاسات ..
طبعاً الي حابب يعرف وش فايدة حركة المقاسات يغير الطول والعرض بنفسه ويشوف المشكلة , الي هي أن الجزء الي بيتم تسويده من الصورة راح يكون حسب القياسات http://www.dzbatna.com/images/smilies/crazy.gif !
أتمنى أني أفدت الجميع , سامحوني على القصور , سلام عليكم ..
التعديل الأخير كان بواسطة Mr.SoOoMa; 27 - 06 - 2014 الساعة 00:45
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته ..
اليوم وانا أتصفح موقع TutPlus المعروف , وجدت تطبيق Html5 ممتاز جداً و حبيت أنقله عشان تعم الفائدة ..
مُلاحظة : الموجود في الموقع شرح طريقة كامل لعمله و تطبيقه وانا لم أشاهده بالكامل بصراحة , لكن نقلت لكم الكود code جاهز مع بعض الملاحظات مني لـ كيفية التعديل عليه + قمت بتعديلات بسيطة عليه لأعطيه مرونة أكبر ..
أول شي مثال على التطبيق : untitled (http://demo.jeffrey-way.com/grey-color/grey-color.html)
رمز PHP:
<code style="white-space:nowrap"> <code> <?php
list($width, $height, $type, $attr) = getimagesize("i.jpeg");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<style>
/* Setup...not important. */
.img-wrap {
position: relative;
}
/* Handles animation of b*w to color */
canvas {
position: absolute;
left: 0;
top: 0;
opacity: 1;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}
canvas:hover {
opacity: 0;
}
/* If you MUST have IE support */
#cvs-src {
filter: progid:DXImageTransform.Microsoft.BasicImage(grays cale=1);
}
#cvs-src:hover {
filter: none;
}
</style>
</head>
<body>
<script>
(function() {
var supportsCanvas = !!document.createElement('canvas').getContext;
supportsCanvas && (window.onload = greyImages);
function greyImages() {
var ctx = document.getElementsByTagName("canvas")[0].getContext('2d'),
img = document.getElementById("cvs-src"),
imageData, px, length, i = 0,
grey;
ctx.drawImage(img, 0, 0);
// Set 500,500 to the width and height of your image.
imageData = ctx.getImageData(0, 0, 500, 500);
px = imageData.data;
length = px.length;
for ( ; i < length; i+= 4 ) {
grey = px[i] * .3 + px[i+1] * .59 + px[i+2] * .11;
px[i] = px[i+1] = px[i+2] = grey;
}
ctx.putImageData(imageData, 0, 0);
}
})();
</script>
<div class="img-wrap">
<img id="cvs-src" src="i.jpeg" /> <?php
echo"<canvas width=$width height=$height></canvas> "; ?>
</div>
</body>
</html> </code> </code>
نأتي لـ شرح طريقة بسيط للي فوق ,
في البداية :
رمز PHP:
<code style="white-space:nowrap"> <code> <?php
list($width, $height, $type, $attr) = getimagesize("i.jpeg");
?> </code> </code>
طبعاً هالجزئية مني , و هي عشان نحصل على مقاسات الصورة طول و عرض لأننا راح نحتاجها بعدين , الموقع طبعاً كان مثبت الطول و العرض على 500 http://www.dzbatna.com/images/smilies/crazy.gif ! وبين القوسين مسار الصورة ..
و بعدها خصائص Css واضحة للجميع , لكن ما أنصح بالتعديل عليها لأنها تناسب التطبيق ,,
رمز PHP:
<code style="white-space:nowrap"> <code> <div class="img-wrap">
<img id="cvs-src" src="i.jpeg" /> <?php
echo"<canvas width=$width height=$height></canvas> "; ?>
</div> </code> </code>
و في الأخير قمنا بـ استدعاء الصورة داخل Div خاص بخصائص الـ Css الخاصة بـ img-wrap
و أعطيناها الـ Id "cvs-src" عشان تطبق الدالة الخاصة بالتسويد و التلوين ..
و طبعا رابط الصورة بين علامتي التنصيص , وفي الأخير تدخل الـ Php لوضع المقاسات ..
طبعاً الي حابب يعرف وش فايدة حركة المقاسات يغير الطول والعرض بنفسه ويشوف المشكلة , الي هي أن الجزء الي بيتم تسويده من الصورة راح يكون حسب القياسات http://www.dzbatna.com/images/smilies/crazy.gif !
أتمنى أني أفدت الجميع , سامحوني على القصور , سلام عليكم ..
التعديل الأخير كان بواسطة Mr.SoOoMa; 27 - 06 - 2014 الساعة 00:45
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
