阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 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

      ParameterValuesDescription
      effectblur, sharpen, emboss, lighten, darken, edge-enhance, edge-detect, hard-edge, laplace, customSelect the effect you want to apply
      replacetrue, falseIf 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
      matrixJavaScript matrixUse 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.
      colorb&w, sepia, vintage, recolor, red, blue, greenApply 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

      目录
      目录