jqImgBlurEffects : Unblur Part Of The Image In A Shape

Sunday, 1 May 2016 | Posted by
jqImgBlurEffects plugin is supports svg shapes - circle, ellipse, polygon, path , rectangle. Lets start with an example. Find below markup for image
<img src="https://lh3.googleusercontent.com/-zJ3ijSNpElc/VyGE80Uo5PI/AAAAAAAADk4/w2cGycz0gIoGz5HDci02WU70uXqJnhYAgCCo/s912/inNature.JPG" class="myImg" width="750px">
Import jquery and jqImgBlurEffects
<script src="jquery-1.11.3.min.js"></script>
<script src="jqImgBlurEffects/jqImgBlurEffects.js"></script>

Circle

SVG circle needs center coordinates and radius. So just give those details in below format.
var myOptns = {
    stdDeviation : 7,
    scircles : [ {
        cx : 177,
        cy : 166,
        r : 150
    },  {
        cx : 477,
        cy : 166,
        r : 150
    }  ]
};

$(".myImg").jqImgBlur(myOptns);

Ellipse

SVG ellipse needs center coordinates and x-radius, y-radius. So just give those details in below format.
var myOptns = {
    stdDeviation : 7,
    sellipses : [ {
        cx : 390,
        cy : 225,
        rx : 300,
        ry : 150
    } ]
};

$(".myImg").jqImgBlur(myOptns);

Rectangle

SVG rectangle needs starting coordinates and width, height. So just give those details in below format.
var myOptns = {
    stdDeviation : 4,
    srectangles : [ {
        x : 100,
        y : 125,
        width : 580,
        height : 220
    } ]
};

$(".myImg").jqImgBlur(myOptns);

Path

SVG path needs d attribute values which consists of points and directions . So just give those details in below format.
var myOptns = {
    stdDeviation : 4,
    spaths : [ {
        d:"M100 125 L700 125 L700 350 L100 350 Z"
    } ]
};

$(".myImg").jqImgBlur(myOptns);

Polygon

SVG polygon needs points attribute values which consists of points. So just give those details in below format.
var myOptns = {
    stdDeviation : 4,
    spolygons : [ {
        points:"170 140 585 140 585 350 170 350"
    } ]
};

$(".myImg").jqImgBlur(myOptns);
Click here to see DEMO
Labels:

9 comments:

  1. Anna27 July 2016 at 01:07

    nice

    ReplyDelete
  2. Unknown31 July 2016 at 02:15

    Thank you for these codes, now it will be easy for http://bestessay.education students to create their images no matter what shape the jqImgBlurEffects plugin system will require.

    ReplyDelete
  3. jacksmith5 December 2018 at 09:03

    Thanks for sharing.I found a lot of interesting information here. A really good post, very thankful and hopeful that you will write many more posts like this one.
    kodi.software
    plex.software
    luckypatcher.pro

    ReplyDelete
  4. Unknown31 May 2019 at 03:25

    sharing.I found a lot of interesting information here. A really good post, very thankful and hopeful that you will write many more where is the routing number on a check

    ReplyDelete
  5. Fadsan Technologies4 May 2021 at 04:20

    Thanks for sharing informative content…Find noida software company to know more and Contact us on given no.…

    ReplyDelete
  6. Frank Howell6 August 2021 at 12:40

    ซึ่งหมายความว่าคุณจะไม่ต้องกังวลกับค่าใช้จ่ายใด https://huc99casino.org/ ๆ ที่เกี่ยวข้องกับการเดินทางไปยังคาสิโนทางบก คุณจะสามารถเล่นเกมที่ต้องการได้โดยไม่ต้องรอที่นั่งว่าง คุณยังสามารถเล่นในขณะที่เข้าถึงทรัพยากรกลยุทธ์ทั้งหมดได้ ซึ่งจะช่วยเพิ่มโอกาสในการชนะรางวัลใหญ่ได้อย่างมาก

    ReplyDelete
  7. Frank Howell17 August 2021 at 14:17

    แต่ก็ยังเป็นไปได้ที่จะหาสถานที่ในที่สาธารณะในสนามหลังบ้าน https://bk8games.org/ เช่น คันทรีคลับ เพื่อเล่นเกมหลายประเภทที่ไม่ซ้ำใคร เช่น แบล็คแจ็คและแบล็คแจ็ค

    ReplyDelete
  8. Goldyy24 August 2021 at 03:43

    ไซต์นี้มีข้อเสนอมากมาย มีอะไรมากมายให้ผู้เล่นสังเกตเห็น https://ivip9-casino.com/ แต่สิ่งแรกที่จะดึงดูดความสนใจของคุณคือเกมคาสิโนสดที่มีให้เลือกมากมายทั้งบนเดสก์ท็อปและมือถือ

    ReplyDelete
  9. Frank Howell27 August 2021 at 07:23

    ยิ่งไปกว่านั้น ผู้คนเริ่มตระหนักว่าโปกเกอร์เป็นเรื่องเกี่ยวกับทักษะมากกว่าโอกาส https://k9wincasino.org/ ซึ่งเพิ่มความน่าดึงดูด เมื่อพิจารณาข้อเท็จจริงบางประการเกี่ยวกับโป๊กเกอร์ออนไลน์ เราเข้าใจดีว่าตอนนี้มีเกมมากกว่าที่เคยเป็นมา ดังนั้นอนาคตของโป๊กเกอร์จึงไม่ใช่แค่สุขภาพดี

    ReplyDelete

Subscribe to: Post Comments (Atom)

Blogroll

Popular Posts