jquery 이미지 워터마크 플러그인

간략한 튜토리얼

Img2Blob.js는 이미지에 사용자 정의 워터마크를 추가할 수 있는 jquery 플러그인입니다. 이 jquery 이미지 워터마크 플러그인은 이미지를 blob 객체로 변환한 다음 사용자 정의 워터마크 효과를 추가할 수 있습니다.

사용 방법

페이지에 jquery 및 img2blob.js 파일을 도입합니다.

<script src="path/to/jquery.min.js"></script>
<script src="path/to/img2blob.js"></script>

HTML 구조

사용자 정의 이미지 워터마크 플러그인의 기본 효과와 워터마크 효과의 HTML 구조는 다음과 같습니다.

<h3>默认图片</h3>
<img class="sample1" data-img2blob="img/1.png" />
<img class="sample1" data-img2blob="img/2.jpg" />
 
<hr>
 
<h3>添加水印之后的图片</h3>
<img class="sample2" data-img2blob="img/1.png" />
<img class="sample2" data-img2blob="img/2.jpg" />

플러그인을 초기화합니다. 페이지의

DOM 요소가 로드된 후 다음 방법을 통해 이미지 워터마크 플러그인을 초기화할 수 있습니다

$(function() {
 
    // default
    $(".sample1").img2blob();
     
    // with watermark
    $(".sample2").img2blob({
        watermark: '@bachors',
        fontStyle: 'Arial',
        fontSize: '30', // px
        fontColor: '#333', // default 'black'
        fontX: 50, // The x coordinate where to start painting the text
        fontY: 50 // The y coordinate where to start painting the text
    });
 
});

Img2Blob.js 이미지 워터마크 플러그인의 github 주소는 다음과 같습니다. : https://github.com/bachors/Img2Blob.js

위는 jquery 이미지 워터마크 플러그인 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www. php.cn)!