JavaScript�ʼn摜���H�A�v������낤���I�FHTML5�A�v����낤���I�i4�j�i1/2 �y�[�W�j

�摜�ɊȒP�Ɏ�������邱�Ƃ̂ł���A�����Ȃ�����yJavaScript���C�u�����APixastic���Љ��B�A�����W�̉��������Љ��

» 2012�N08��07�� 00��00�� ���J
[�R��叕�C���ÃV�X�e��]

�@����A�Љ�郉�C�u�����͂�����́uPixastic�v�Ƃ���JavaScript���C�u�����ł��I

�@Pixastic���C�u�����𗘗p����ƁA�摜�ɃG�t�F�N�g�Ȃǂ̌��ʂ��|�����܂��BHTML5��API�ƘA�g���邱�ƂŁA�A�v���P�[�V�����̂悤�ȓ�����”\�ɂȂ�܂��B

�@�ߋ��ɁuHTML5�v�֘A�̕׋���Ŕ��\�����ہA����Pixastic���C�u�������g�����x�[�^�ŃT���v���A�v�����I���܂����B�M�҂Ƃ��Ă͔��ɗD�ꂽ���C�u�����ł���Ǝv���܂��̂ŁA�ēx�L���ɂďЉ�܂��B

Pixastic�Ƃ́H

�@�摜�Ɏ�������邱�Ƃ��ł���A�I�[�v���\�[�X��JavaScript���C�u�����ł��BGitHub�ɂ��A�b�v���[�h����Ă��܂����A�ȉ���URL���uPixastic�v�̃T�C�g�ł��B

Pixastic�̓���

�@JavaScript���C�u�������g�p���邾���ŁA�ȉ��̂悤�ȉ摜���H���”\�ɂȂ�܂��B

�摜���H�̗�
  1. �u���E�U��ō�Ƃł���
    ����܂ł̉摜���H�\�t�g�́A����̉摜�ύX�E���H�A�v����PC�ɃC���X�g�[�������p���Ă��܂����B�uPixastic�v���g�p����΃u���E�U��AWeb�T�[�r�X�ł̉摜���H�A�A�v�����쐬�”\�ɂȂ�܂��B

  2. ���C�u�����̃t�@�C���T�C�Y���y��
    �uPixastic�v�͔�r�I�R�[�h�ʂ����Ȃ߂ł��B���܂��܂ȉ摜���H�������ł��܂����AJQuery��JavaScript�t�@�C�������y���t�@�C���T�C�Y�ƂȂ��Ă��܂��B���̃��C�u�����ƕ��p���Ďg�p���邱�Ƃ��l����Ǝ����p����ɂ͗ǂ��_�ł��B

  3. �V���v���Ȏg�p���@
    �uPixastic�v�̎g�p���@�̓V���v���ŊȒP�ɂȂ��Ă��܂��BPixastic�T�C�g��ɂ�Documentation�y�[�W������A�uIntroduction�v���ꗗ�ŕ\�L����Ă���̂ŁA�N���b�N���邱�ƂŊȒP�ɃT���v��������m�F�ł��܂��B�g�p���@�́A�T���v���\�[�X�R�[�h���\�L����Ă��܂��̂ŊȒP�Ɏg���܂��B

�T���v��DEMO�Ώۃu���E�U

�@�T���v���́AChrome�ASafari�̃u���E�U�ł��m�F���������B

�@�uPixastic�v�T�C�g�ɂ��A�u���E�U�Ή��󋵂��\������Ă��܂��̂ŁA�s�x���m�F���������B

�uPixastic�v���g���Ă݂悤�I

1�D�܂��́uPixastic�v���_�E�����[�h���܂��傤�B

�@�_�E�����[�hURL�Fhttp://www.pixastic.com/lib/download/

2�D�ȉ��̉�ʂ��J���܂��B

�_�E�����[�h�y�[�W

�@��L�摜�i�y�[�W���j���uActions (check all)�F�v�̉ӏ����N���b�N�B

�@�uActions (check all)�F�v�ӏ��̈ȉ����ׂẴ`�F�b�N�{�b�N�X�Ƀ��_������܂��i���ׂđI���j�B

�@�y�[�W�������uBuild file�v�{�^�����N���b�N�����pixastic�t�@�C�����_�E�����[�h�ł��܂��B

�@���f�X�N�g�b�v��Ƀ_�E�����[�h����ƕ�����₷���ł��B

3�Dsample�t�@�C�����_�E�����[�h�����������B

�@[ �_�E�����[�h �����@sample1.zip ]

�@���E�N���b�N�u�����N���ʖ��ŕۑ��v���Ă��������B

�@���f�X�N�g�b�v�Ƀ_�E�����[�h����ƕ�����₷���ł��B

4�Dsample1.zip���𓀂���Ɓusample1�v�t�H���_���쐬����܂��B

�@�ȉ���4�t�@�C�����t�H���_���ɂ��邱�Ƃ��m�F���Ă��������B

index.html ���[�r�[�y�[�W
pixastic.custom.js JavaScript���C�u����
jquery.js JavaScript���C�u����
���H�p�C���[�W

5�D�t�H���_����[ index.html ]��Chrome��Safari�̃u���E�U�ŊJ���Ă��������B

6�D���L��ʂ��\������܂��B

�@�u���[���ʁi�ڂ����j�̃T���v�������Љ�܂��B

�\�����ꂽ���

7�D[Blur image]�{�^�����N���b�N����Ɖ摜���{�����܂��B

�@[Reset]�{�^���Ń{�������摜�����ɖ߂��܂��B

8.����ŃT���v���y�[�W�̊m�F��OK�ł��B

���T���v���̉��

1�Dindex.html�t�@�C�����G�f�B�^�ŊJ���Ă��������B

2�D27�s�ځ`34�s�ځisample1.html�j

	//Blur image���N���b�N
	function blur_btn() {
		Pixastic.process(can, "blur"); 
	}
	//Reset���N���b�N
	function reset_btn() {
		Pixastic.revert(document.getElementById("demoimage"));
	}

3�D�R�[�h�̐���

  • �u���[���ʁF�uPixastic.process(canvas�v�f,"blur");�v�̍s�̋L�q��OK
  • ���ʃ��Z�b�g�F�uPixastic.revert(canvas�v�f);�v��1�s�Ō��ʂ��������i���Z�b�g�j

�����A�Z�s�A�A�\�[�����C�Y�A�����]�A�c���]

�Z�s�A�A�����A�����]�̃T���v��

1�Dsample�t�@�C�����_�E�����[�h�����������B

�@[�_�E�����[�h �@���� �@sample2.zip ]

�@���E�N���b�N�u�����N���ʖ��ŕۑ��v���Ă��������B

2�Dsample2.zip���𓀂���Ɓusample2�v�t�H���_���쐬����܂��B

�@�ȉ���4�t�@�C�����t�H���_���ɂ��邱�Ƃ��m�F���Ă��������B

index.html ���[�r�[�y�[�W
pixastic.custom.js JavaScript���C�u����
jquery.js JavaScript���C�u����
���H�p�C���[�W

3�D�t�H���_����[index.html]��Safari�AChrome�i�ꕔ�@�\���g���܂���j�̃u���E�U�ŊJ���Ă��������B

4�D���L�̉�ʂ��\������܂��B

�\�����ꂽ���

�@�e�@�\�̃{�^���������Ă݂Ă��������i�����[�h����Ə���������܂��j�B

5�D����ŃT���v���y�[�W�̊m�F��OK�ł��B

���@�T���v���̉��

1�Dindex.html�t�@�C�����G�f�B�^�ŊJ���Ă��������B

2�D30�s�ځ`50�s�ځisample2.html�j

    //����
     var description = function (){
         Pixastic.process(document.getElementById('demoimage'), "desaturate", {average : false});
     };
    //�\�[�����C�Y
     var solarize = function (){
         Pixastic.process(document.getElementById('demoimage'), "solarize");
     };
    //�Z�s�A
     var sepia = function(){
         Pixastic.process(document.getElementById('demoimage'), "sepia");
     };
    //�����]
     var flip = function() {
        Pixastic.process(document.getElementById('demoimage'), "fliph");
     };
    //�c���]
     var flipv = function() {
        Pixastic.process(document.getElementById('demoimage'), "flipv");
     };

3�D��L�R�[�h�̐���

  • �����F�uPixastic.process(canvas�v�f, "desaturate"); �v ��1�s�̋L�q��OK
  • �\�[�����C�Y�F �uPixastic.process(canvas�v�f, "solarize"); �v��1�s�̋L�q��OK
  • �Z�s�A�F�uPixastic.process(canvas�v�f, "sepia"); �v��1�s�̋L�q��OK
  • �����]�F�uPixastic.process(canvas�v�f, "fliph"); �v��1�s�̋L�q��OK
  • �c���]�F�uPixastic.process(canvas�v�f, "flipv"); �v��1�s�̋L�q��OK

�@Pixastic.process�̑������Ɂgflipv�h�A�gsepia�h�A�gdesaturate�h���Ȃǂ̃v���p�e�B���L�q���邾���ŁA�����A�Z�s�A�A�c���]�Ȃǂ��ȒP�ɂł���悤�ɂȂ�̂ł��B

�@�@�@�@�@�@ 1|2 ���̃y�[�W��

Copyright © ITmedia, Inc. All Rights Reserved.

�A�C�e�B���f�B�A����̂��m�点

�X�|���T�[����̂��m�点PR

���ڂ̃e�[�}

���́uAI�R�[�f�B���O�v�͖{���ɕK�v���H
Microsoft �� Windows�őO��2026
4AI by ��IT - AI�����A�������A���A������
���[�R�[�h�^�m�[�R�[�h �Z���g���� by ��IT - IT�G���W�j�A���r�W�l�X�̒��S�Ŋ��􂷂�g�D��
Cloud Native Central by ��IT - �X�P�[���u���Ȕ\�͂�g�D��
�V�X�e���J���m�E�n�E �y�����i�r�zPR
���Ȃ��ɂ������߂̋L��PR

RSS�ɂ‚���

�A�C�e�B���f�B�AID�ɂ‚���

���[���}�K�W���o�^

��IT�̃��[���}�K�W���́A �������A���ׂĖ����ł��B���Ѓ��[���}�K�W�������w�ǂ��������B