How to use imageData method in wpt

Best JavaScript code snippet using wpt

amexio.carouselce.component.ts

Source:amexio.carouselce.component.ts

1/*2* Copyright [2019] [Metamagic]3*4* Licensed under the Apache License, Version 2.0 (the "License");5* you may not use this file except in compliance with the License.6* You may obtain a copy of the License at7*8* http://www.apache.org/licenses/LICENSE-2.09*10* Unless required by applicable law or agreed to in writing, software11* distributed under the License is distributed on an "AS IS" BASIS,12* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.13* See the License for the specific language governing permissions and14* limitations under the License.15*16*  Created by kedar on 18/4/2019.17*/18import { animate, state, style, transition, trigger } from '@angular/animations';19import { HttpClient } from '@angular/common/http';20import {21  AfterContentInit, Component, ContentChild, ContentChildren, ElementRef, Input, OnDestroy, OnInit, QueryList, TemplateRef, ViewChild,22} from '@angular/core';23import { AmexioTemplateDirective } from '../../panes/amexio.pane.module';24import { CommonDataService } from '../../services/data/common.data.service';25import { TitleModel } from '../carousel/amexio.carouselce.model';26@Component({27  selector: 'amexio-carousel-ce',28  templateUrl: './amexio.carouselce.component.html',29  animations: [trigger('changeState', [30    state('block1-1', style({31      opacity: 1,32    })),33    state('none1-1', style({34      opacity: 0,35    })),36    state('block1-2', style({37      opacity: 1,38    })),39    state('none1-2', style({40      opacity: 0,41    })),42    state('block2-1', style({43      transform: 'translateX(0%)',44    })),45    state('none2-1', style({46      transform: 'translateX(-100%)',47    })),48    state('block2-2', style({49      transform: 'translateX(0%)',50    })),51    state('none2-2', style({52      transform: 'translateX(100%)',53    })),54    transition('*=>*', animate('200ms')),55  ]),56  ],57})58export class AmexioCarouselCEComponent implements OnInit, AfterContentInit {59  /*60Properties61name : data62datatype : any63version : 5.10 onwards64default : none65description : Local Data binding.66*/67  @Input() data: any[];68  /*69  Properties70  name : http-url71  datatype : string72  version : 5.10 onwards73  default : none74  description : REST url for fetching data.75  */76  @Input('http-url') httpurl: string;77  /*78  Properties79  name : data-reader80  datatype : string81  version : 5.10 onwards82  default : none83  description : Key in JSON Datasource for records.84  */85  @Input('data-reader') datareader: string;86  /*87  Properties88  name : http-method89  datatype : string90  version : 5.10 onwards91  default : none92  description : Type of HTTP call, POST,GET etc.93  */94  @Input('http-method') httpmethod: string;95  @Input('type') type = 1;96  @Input('translucent') translucent = false;97  @Input('translucent-value') translucentValue: any;98  @Input('bar-bg-color') barBGColor: any;99  @Input('bar-font-color') barFontColor: any;100  responseData: any;101  currentImageIndex = 0;102  imageData: any;103  centerImagePath: string;104  nextImagePath: string;105  preImagePath: string;106  previousTitle: any;107  centerTitle: any;108  nextTitle: any;109  positionLeft: any;110  positionRight: any;111  @Input('template-width') templateWidth: any;112  @Input('position') position: any;113  public itemTemplate: TemplateRef<any>;114  @ContentChildren(AmexioTemplateDirective) templates: QueryList<any>;115  @ViewChild('tab', { read: ElementRef }) public tabs: ElementRef;116  itemData: any;117  navigationType = 2;118  currentObj: any;119  titleModel: TitleModel;120  constructor(public http: HttpClient, private dataService: CommonDataService) {121    this.titleModel = new TitleModel();122  }123  ngOnInit() {124    if (this.httpmethod && this.httpurl) {125      this.dataService.fetchData(this.httpurl, this.httpmethod).subscribe((response) => {126        this.responseData = response;127      }, (error) => {128      }, () => {129        this.setData(this.responseData);130      });131    } else if (this.data) {132      this.setData(this.data);133    }134    this.positionCalculation();135  }136  ngAfterContentInit() {137    this.templates.forEach((item: any) => {138      this.itemTemplate = item.template;139    });140  }141  positionCalculation() {142    if (this.templateWidth) {143      if (this.position === 'left') {144        this.positionRight = (100 - this.templateWidth);145        this.positionLeft = 0;146      } else if (this.position === 'right') {147        this.positionRight = 0;148        this.positionLeft = (100 - this.templateWidth);149      } else if (this.position === 'center') {150        this.positionLeft = ((100 - this.templateWidth) / 2);151        this.positionRight = this.positionLeft;152      }153    } else {154      if (this.position === 'left') {155        this.positionRight = 60;156        this.positionLeft = 0;157      } else if (this.position === 'right') {158        this.positionRight = 0;159        this.positionLeft = 60;160      } else if (this.position === 'center') {161        this.positionLeft = 30;162        this.positionRight = 30;163      }164    }165  }166  setData(httpResponse: any) {167    let responsedata = httpResponse;168    // Check if key is added?169    if (this.datareader != null) {170      const dr = this.datareader.split('.');171      for (const ir of dr) {172        responsedata = responsedata[ir];173      }174    } else {175      responsedata = httpResponse;176    }177    this.imageData = responsedata;178    this.titleModel.previousTitle = this.imageData[this.imageData.length - 1].title ? this.imageData[this.imageData.length - 1].title : '';179    this.titleModel.centerTitle = this.imageData[0].title ? this.imageData[0].title : '';180    this.titleModel.nextTitle = this.imageData[1].title ? this.imageData[1].title : '';181  }182  dividedPreviousMethod() {183    this.imageData.forEach((element: any, index: any) => {184      if (element && element.active) {185        this.currentImageIndex = index;186      }187    });188  }189  previousClick() {190    this.navigationType = 1;191    setTimeout(() => {192      this.dividedPreviousMethod();193      if (this.currentImageIndex === 0) {194        this.previousClickMethod();195      } else {196        this.imageData.forEach((element: any, index: any) => {197          if (index === this.currentImageIndex - 1) {198            const duplicateIndex = this.currentImageIndex - 1;199            this.imageData[duplicateIndex].active = true;200            if (this.imageData[duplicateIndex] && this.imageData[duplicateIndex - 1] &&201              this.imageData[duplicateIndex].title && this.imageData[duplicateIndex + 1].title) {202              this.titleModel.setTitle(this.imageData[duplicateIndex - 1].title,203                this.imageData[duplicateIndex].title, this.imageData[duplicateIndex + 1].title);204            } else {205              this.titleModel.setTitle(this.imageData[this.imageData.length - 1].title,206                this.imageData[0].title, this.imageData[this.currentImageIndex].title);207            }208          } else {209            this.imageData[index].active = false;210          }211        });212      }213    }, 500);214  }215  nextClickCurrentIndexLogic() {216    const nextIndex = this.currentImageIndex;217    if (this.imageData[nextIndex] && this.imageData[nextIndex].title) {218      this.titleModel.setTitle(this.imageData[nextIndex - 1].title, this.imageData[nextIndex].title,219        this.imageData[nextIndex + 1].title);220    }221  }222  nextClick() {223    this.navigationType = 2;224    setTimeout(() => {225      this.dividedPreviousMethod();226      if (this.currentImageIndex === 0) {227        this.currentImageIndex = 1;228        this.imageData[this.currentImageIndex].active = true;229        this.nextClickCurrentIndexLogic();230        this.setFlag();231      } else {232        if (this.currentImageIndex === this.imageData.length - 1) {233          this.currentImageIndex = 0;234          this.titleModel.setTitle(this.imageData[this.imageData.length - 1].title,235            this.imageData[this.currentImageIndex].title, this.imageData[this.currentImageIndex + 1].title);236        } else {237          this.currentImageIndex++;238          const nextIndex = this.currentImageIndex;239          if (this.currentImageIndex < this.imageData.length - 1) {240            this.titleModel.setTitle(this.imageData[nextIndex - 1].title,241              this.imageData[nextIndex].title, this.imageData[nextIndex + 1].title);242          } else {243            this.titleModel.setTitle(this.imageData[nextIndex - 1].title,244              this.imageData[nextIndex].title, this.imageData[0].title);245          }246        }247        this.setFlag();248      }249    }, 500);250  }251  previousClickMethod() {252    this.imageData[this.currentImageIndex].active = true;253    const lastIndex = this.imageData.length - 1;254    this.currentImageIndex = this.imageData.length - 1;255    this.imageData.forEach((element: any, index: any) => {256      if (index === this.currentImageIndex) {257        this.imageData[index].active = true;258        if (this.imageData[lastIndex] && this.imageData[lastIndex].title) {259          this.titleModel.setTitle(this.imageData[lastIndex - 1].title,260            this.imageData[lastIndex].title, this.imageData[0].title);261        }262      } else {263        this.imageData[index]['active'] = false;264      }265    });266  }267  onPreBtnHover(i: number) {268    if (i === 0) {269      this.preImagePath = this.imageData[this.imageData.length - 1].imagepath;270    } else {271      const ind = i - 1;272      this.preImagePath = this.imageData[ind].imagepath;273    }274  }275  onNextBtnHover(i: number) {276    if (i === 0) {277      const ind = i + 1;278      this.nextImagePath = this.imageData[ind].imagepath;279    } else {280      const ind = i + 1;281      if (ind === this.imageData.length) {282        this.nextImagePath = this.imageData[0].imagepath;283      } else {284        this.nextImagePath = this.imageData[ind].imagepath;285      }286    }287  }288  setFlag() {289    this.imageData.forEach((element: any, index: any) => {290      if (index === this.currentImageIndex) {291        this.imageData[index].active = true;292      } else {293        this.imageData[index]['active'] = false;294      }295    });296  }...

canvas-strokePath-cap-join.js

Source:canvas-strokePath-cap-join.js

1description("Ensure correct behavior of canvas with path stroke with cap and join");2var canvas = document.createElement('canvas');3document.body.appendChild(canvas);4canvas.setAttribute('width', '700');5canvas.setAttribute('height', '200');6var ctx = canvas.getContext('2d');7ctx.miterLimit = 5;8ctx.lineWidth = 15;9ctx.fillStyle="rgba(255, 255, 255, 1.0)";10ctx.fillRect(0, 0, 700, 200);11ctx.strokeStyle="rgba(0, 0, 0, 1.0)";12ctx.lineJoin = "miter";13ctx.lineCap = "round";14ctx.translate(0, 50);15ctx.save();16ctx.beginPath();17ctx.moveTo(10, 100);18ctx.lineTo(30, 2);19ctx.lineTo(50, 100);20ctx.stroke();21ctx.translate(60 ,0);22ctx.beginPath();23ctx.moveTo(10, 100);24ctx.lineTo(30, 3);25ctx.lineTo(50, 100);26ctx.stroke();27ctx.translate(90 ,0);28ctx.save();29ctx.rotate(0.2);30ctx.beginPath();31ctx.moveTo(10, 100);32ctx.lineTo(30, 3);33ctx.lineTo(50, 100);34ctx.closePath();35ctx.stroke();36ctx.restore();37ctx.restore();38ctx.lineJoin = "bevel";39ctx.lineCap = "square";40ctx.translate(200, 0);41ctx.save();42ctx.beginPath();43ctx.moveTo(10, 100);44ctx.lineTo(30, 2);45ctx.lineTo(50, 100);46ctx.stroke();47ctx.translate(60 ,0);48ctx.beginPath();49ctx.moveTo(10, 100);50ctx.lineTo(30, 3);51ctx.lineTo(50, 100);52ctx.stroke();53ctx.translate(90 ,0);54ctx.save();55ctx.rotate(0.2);56ctx.beginPath();57ctx.moveTo(10, 100);58ctx.lineTo(30, 3);59ctx.lineTo(50, 100);60ctx.closePath();61ctx.stroke();62ctx.restore();63ctx.restore();64ctx.lineJoin = "round";65ctx.lineCap = "butt";66ctx.translate(200, 0);67ctx.save();68ctx.beginPath();69ctx.moveTo(10, 100);70ctx.lineTo(30, 2);71ctx.lineTo(50, 100);72ctx.stroke();73ctx.translate(60 ,0);74ctx.beginPath();75ctx.moveTo(10, 100);76ctx.lineTo(30, 3);77ctx.lineTo(50, 100);78ctx.stroke();79ctx.translate(90 ,0);80ctx.save();81ctx.rotate(0.2);82ctx.beginPath();83ctx.moveTo(10, 100);84ctx.lineTo(30, 3);85ctx.lineTo(50, 100);86ctx.closePath();87ctx.stroke();88ctx.restore();89ctx.restore();90var imageData, data;91// Verify Join : miter, Cap : round.92imageData = ctx.getImageData(30, 51, 1, 1);93data = imageData.data;94shouldBe('data[0]', '0');95imageData = ctx.getImageData(30, 49, 1, 1);96data = imageData.data;97shouldBe('data[0]', '255');98imageData = ctx.getImageData(14, 154, 1, 1);99data = imageData.data;100shouldBe('data[0]', '0');101imageData = ctx.getImageData(14, 157, 1, 1);102data = imageData.data;103shouldBe('data[0]', '255');104imageData = ctx.getImageData(89, 22, 1, 1);105data = imageData.data;106shouldBe('data[0]', '0');107imageData = ctx.getImageData(89, 12, 1, 1);108data = imageData.data;109shouldBe('data[0]', '255');110imageData = ctx.getImageData(184, 29, 1, 1);111data = imageData.data;112shouldBe('data[0]', '0');113imageData = ctx.getImageData(180, 27, 1, 1);114data = imageData.data;115shouldBe('data[0]', '255');116imageData = ctx.getImageData(132, 152, 1, 1);117data = imageData.data;118shouldBe('data[0]', '0');119imageData = ctx.getImageData(130, 157, 1, 1);120data = imageData.data;121shouldBe('data[0]', '255');122// Verify Join : bevel, Cap : square.123imageData = ctx.getImageData(202, 154, 1, 1);124data = imageData.data;125shouldBe('data[0]', '0');126imageData = ctx.getImageData(201, 150, 1, 1);127data = imageData.data;128shouldBe('data[0]', '255');129imageData = ctx.getImageData(228, 52, 1, 1);130data = imageData.data;131shouldBe('data[0]', '0');132imageData = ctx.getImageData(225, 48, 1, 1);133data = imageData.data;134shouldBe('data[0]', '255');135imageData = ctx.getImageData(316, 154, 1, 1);136data = imageData.data;137shouldBe('data[0]', '0');138imageData = ctx.getImageData(316, 157, 1, 1);139data = imageData.data;140shouldBe('data[0]', '255');141imageData = ctx.getImageData(289, 52, 1, 1);142data = imageData.data;143shouldBe('data[0]', '0');144imageData = ctx.getImageData(289, 48, 1, 1);145data = imageData.data;146shouldBe('data[0]', '255');147imageData = ctx.getImageData(372, 58, 1, 1);148data = imageData.data;149shouldBe('data[0]', '0');150imageData = ctx.getImageData(373, 54, 1, 1);151data = imageData.data;152shouldBe('data[0]', '255');153imageData = ctx.getImageData(380, 159, 1, 1);154data = imageData.data;155shouldBe('data[0]', '0');156imageData = ctx.getImageData(383, 162, 1, 1);157data = imageData.data;158shouldBe('data[0]', '255');159// Verify Join : round, Cap : butt.160imageData = ctx.getImageData(405, 147, 1, 1);161data = imageData.data;162shouldBe('data[0]', '0');163imageData = ctx.getImageData(405, 151, 1, 1);164data = imageData.data;165shouldBe('data[0]', '255');166imageData = ctx.getImageData(429, 46, 1, 1);167data = imageData.data;168shouldBe('data[0]', '0');169imageData = ctx.getImageData(429, 43, 1, 1);170data = imageData.data;171shouldBe('data[0]', '255');172imageData = ctx.getImageData(464, 146, 1, 1);173data = imageData.data;174shouldBe('data[0]', '0');175imageData = ctx.getImageData(464, 150, 1, 1);176data = imageData.data;177shouldBe('data[0]', '255');178imageData = ctx.getImageData(489, 46, 1, 1);179data = imageData.data;180shouldBe('data[0]', '0');181imageData = ctx.getImageData(489, 43, 1, 1);182data = imageData.data;183shouldBe('data[0]', '255');184imageData = ctx.getImageData(534, 151, 1, 1);185data = imageData.data;186shouldBe('data[0]', '0');187imageData = ctx.getImageData(531, 153, 1, 1);188data = imageData.data;189shouldBe('data[0]', '255');190imageData = ctx.getImageData(579, 52, 1, 1);191data = imageData.data;192shouldBe('data[0]', '0');193imageData = ctx.getImageData(579, 48, 1, 1);194data = imageData.data;...

filters.js

Source:filters.js

1'use strict';2var StackBlur = require('stackblur-canvas');3/**4 * Apply a Gaussian Blur filter to the ImageData.5 * @param {ImageData} imageData6 * @returns {ImageData}7 */8function blur(imageData) {9  var w = imageData.width;10  var h = imageData.height;11  var r = 10;12  StackBlur.imageDataRGBA(imageData, 0, 0, w, h, r);13  return imageData;14}15/**16 * Apply a Grayscale filter to the ImageData.17 * @param {ImageData} imageData18 * @returns {ImageData}19 */20function grayscale(imageData) {21  var data = imageData.data;22  for (var i = 0; i < data.length; i += 4) {23    var r = data[i];24    var g = data[i + 1];25    var b = data[i + 2];26    var gs = (r + g + b) / 3;27    data[i] = data[i + 1] = data[i + 2] = gs;28  }29  return imageData;30}31/**32 * Return the ImageData without applying any filter.33 * @param {ImageData} imageData34 * @returns {ImageData}35 */36function none(imageData) {37  return imageData;38}39/**40 * Apply a Sepia filter to the ImageData.41 * @param {ImageData} imageData42 * @returns {ImageData}43 */44function sepia(imageData) {45  var data = imageData.data;46  for (var i = 0; i < data.length; i += 4) {47    var r = data[i];48    var g = data[i + 1];49    var b = data[i + 2];50    data[i] = (r * 0.393) + (g * 0.769) + (b * 0.189);51    data[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168);52    data[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131);53  }54  return imageData;55}56module.exports.blur = blur;57module.exports.grayscale = grayscale;58module.exports.none = none;...

Using AI Code Generation

1var wpt = require('wpt.js');2var wptData = new wpt('API_KEY');3var options = {4};5wptData.runTest(options, function(err, data) {6    if (err) {7        console.log(err);8    } else {9        wptData.getImageData(data.data.testId, 'waterfall', 'png', function(err, data) {10            if (err) {11                console.log(err);12            } else {13                console.log(data);14            }15        });16    }17});

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.