插件 jQuery.PhotoJShop 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.PhotoJShop 中文API文档 https://github.com/aurbano/PhotoJShop

PhotoJShop

A JavaScript photo editing library packaged in a simple jQuery plugin

PhotoJShop is a JavaScript library for photo editing using the canvas and kernel convolution matrixes, aiming to reproduce most usual filters. A demo of its capabilities can be seen in Nuophoto, a project that uses this library for all the editing (Although an older version)

The idea is to provide a simple library to developers that will allow quick integration of photo filters to their website.

Demo

If you clone the repo, simply open index.html, which is a very simple demo of the plugin’s capabilities. The project has Github’s pages enabled, so you can see the demo page online:

Download

Head over to the releases list and grab the lastest one

Usage

After including jQuery, include photojshop.jquery.js. Once loaded you simply need to call it on a valid element. You have to ensure that the element has loaded, $(document).ready() doesn’t mean images have loaded!

Right now it works on Canvas and images, so you would call it like so:

$('#img1').PhotoJShop("blur");

// The following would produce the same effect:
$('#img1').PhotoJShop({ effect : "blur"});

// Color effects can be applied at the same time:
$('#img1').PhotoJShop({
  effect  : "blur",
  color   : "b&w"
});

Effects can also be chained if replace is set to true (Which is by default)

$('img').PhotoJShop("blur").PhotoJShop("lighten");

You can also set replace to false, and obtain the dataURL of the filtered photo:

$('#image1').attr('src',
  $('#image2').PhotoJShop({
    effect : "blur",
    replace : false
  })
);

Do you want to do a non-implemented effect? Use the custom mode, and define your own matrix, in the example below we will use a version of blur that also lightens the image:

$('img').PhotoJShop({
  matrix :  [ [1, 1,  1],
              [1, 1.5,1],
              [1, 1,  1] ]
});
// That code is exactly the same as the following:
$('img').PhotoJShop({
  matrix :  [ [1.5] ]
});

You can use any size for the matrix, although it must be square. You can use a 1x1 matrix for example, which will lighten/darken the image if you use a bigger/lower value than 1.

Parameters

Parameter Values Description
effect blur, sharpen, emboss, lighten, darken, edge-enhance, edge-detect, hard-edge, laplace, custom Select the effect you want to apply
replace true, false If true the result of the filter will replace the original image/canvas data and return the jQuery object for chainability. If false it will return the dataURL of the resulting image
matrix JavaScript matrix Use this with the custom effect (Although if you set the matrix you don’t have to specify the effect), the matrix can be any size, but it must be in JavaScript format.
color b&w, sepia, vintage, recolor, red, blue, green Apply a coloring effect. Red, blue and green leave only the corresponding channel on all channels.

Changelog

1.0.4

  • Add two new effects: Hard-edge and Laplace

1.0.1

  • Add minified version
  • Released in jQuery plugin repository

1.0.0

  • First stable release

Meta

Analytics


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>