perspective.js demo

### Full Browser Integration Example Source: https://context7.com/wanadev/perspective.js/llms.txt Demonstrates installing perspective.js via CDN and rendering an image with perspective distortion onto a canvas. Ensure the image file exists or use a data URI. ```html perspective.js demo

``` -------------------------------- ### Build perspective.js Distribution Files Source: https://github.com/wanadev/perspective.js/blob/master/README.md Run these commands to install dependencies and build the distributable files for perspective.js. This is typically done after cloning the repository or making code changes. ```bash npm install npx grunt ``` -------------------------------- ### Install perspective.js via NPM Source: https://github.com/wanadev/perspective.js/blob/master/README.md Use this command to add perspective.js to your project dependencies. ```bash npm install perspectivejs ``` -------------------------------- ### Build Distribution Bundle with Grunt Source: https://context7.com/wanadev/perspective.js/llms.txt Commands to install dependencies and build the browser-ready UMD bundles for perspective.js using Grunt and Browserify. This process generates files in the dist/ folder. ```bash # Install dependencies npm install # Build dist/ files (perspective.js and perspective.min.js) npx grunt # Expected output: # Running "browserify:dist" (browserify) task # Running "uglify:dist" (uglify) task # Done. # # dist/ # perspective.js ← unminified UMD bundle # perspective.min.js ← minified UMD bundle ``` -------------------------------- ### Build Distribution Files Source: https://github.com/wanadev/perspective.js/blob/master/RELEASE.rst Run this command to build the necessary distribution files for the project. ```bash npm i && npx grunt ``` -------------------------------- ### Browser Usage: Initialize and Draw with Perspective Source: https://context7.com/wanadev/perspective.js/llms.txt Demonstrates how to initialize the Perspective library in a browser environment and draw an image warped into a quadrilateral. Ensure the image has loaded before calling `p.draw()`. ```javascript const canvas = document.getElementById("output-canvas"); const ctx = canvas.getContext("2d"); const image = new Image(); image.onload = function () { canvas.width = 600; canvas.height = 400; // Create a Perspective instance const p = new Perspective(ctx, image); // Draw the image warped into a quadrilateral p.draw([ [30, 30], // top-left [x, y] [image.width - 50, 50], // top-right [x, y] [image.width - 70, image.height - 30], // bottom-right [x, y] [10, image.height] // bottom-left [x, y] ]); }; image.src = "photo.jpg"; ``` -------------------------------- ### Package for Release Source: https://github.com/wanadev/perspective.js/blob/master/RELEASE.rst Use this command to check the contents of the package before publishing. ```bash npm pack ``` -------------------------------- ### Basic Image Transformation with Perspective.js Source: https://github.com/wanadev/perspective.js/blob/master/README.md Instantiate Perspective with a canvas context and an image, then call draw() with an array of four points defining the quadrilateral. Ensure the canvas context and image are properly initialized before use. ```javascript // ctx (CanvasRenderingContext2D): The 2D context of a HTML5 canvas element. // image (Image): The image to transform. var p = new Perspective(ctx, image); p.draw([ [30, 30], // Top-left [x, y] [image.width - 50, 50], // Top-right [x, y] [image.width - 70, image.height - 30], // bottom-right [x, y] [10, image.height] // bottom-left [x, y] ]); ``` -------------------------------- ### Publish NPM Package Source: https://github.com/wanadev/perspective.js/blob/master/RELEASE.rst Command to publish the package to the NPM registry. ```bash npm publish ``` -------------------------------- ### Node.js/Bundler Import: CommonJS Source: https://context7.com/wanadev/perspective.js/llms.txt Shows how to import the Perspective constructor when using a bundler like Webpack or Browserify, or when requiring it in a Node.js environment. Usage is identical to the browser global after import. ```javascript const Perspective = require("perspectivejs"); // Then use identically to the browser global: const p = new Perspective(ctx, image); p.draw([ [0, 0], [400, 20], [380, 280], [20, 300] ]); ``` -------------------------------- ### Constructor: new Perspective(ctx, image) Source: https://context7.com/wanadev/perspective.js/llms.txt Creates a new Perspective instance. It requires a 2D rendering context from a target canvas and an HTMLImageElement (or similar object) as the source image. This constructor prepares internal canvases for the transformation process. ```APIDOC ## Constructor: `new Perspective(ctx, image)` ### Description Creates a new `Perspective` instance bound to a destination canvas 2D context and a source image. The `ctx` parameter must be a `CanvasRenderingContext2D` obtained from the target canvas. The `image` parameter must be an `HTMLImageElement` (or any object with `width` and `height` properties and drawable by `drawImage`). The constructor internally prepares two off-screen canvases for the transformation pipeline. ### Parameters #### Path Parameters - **ctx** (`CanvasRenderingContext2D`) - Required - The 2D rendering context of the target canvas. - **image** (`HTMLImageElement` or object with `width` and `height`) - Required - The source image to be transformed. ### Request Example ```javascript const canvas = document.getElementById("output-canvas"); const ctx = canvas.getContext("2d"); const image = new Image(); image.onload = function () { canvas.width = 600; canvas.height = 400; // Create a Perspective instance const p = new Perspective(ctx, image); // Draw the image warped into a quadrilateral p.draw([ [30, 30], [image.width - 50, 50], [image.width - 70, image.height - 30], [10, image.height] ]); }; image.src = "photo.jpg"; ``` ``` -------------------------------- ### Commit and Tag Release Source: https://github.com/wanadev/perspective.js/blob/master/RELEASE.rst Commands to commit the changes, tag the new version, and push to the remote repositories. ```bash git commit -m vX.Y.Z && git tag vX.Y.Z && git push && git push --tags ``` -------------------------------- ### Draw Image with Perspective Source: https://github.com/wanadev/perspective.js/blob/master/demo/demo.html Initializes Perspective.js and draws an image with specified perspective points. Ensure the image source is valid and the canvas element exists. ```javascript var canvas = document.getElementById("canvas"); var image = new Image(); image.onload = function() { canvas.width = image.width; canvas.height = image.height; var ctx = canvas.getContext("2d"); var p = new Perspective(ctx, image); p.draw([ [30, 30], [image.width - 50, 50], [image.width - 70, image.height - 30], [10, image.height] ]); } image.src = "firefox.jpg"; ``` -------------------------------- ### Method: perspective.draw(points) Source: https://context7.com/wanadev/perspective.js/llms.txt The primary method for applying the perspective transformation. It takes an array of four [x, y] coordinate pairs, defining the corners of the destination quadrilateral. The source image is then warped to fit this shape and rendered onto the canvas. ```APIDOC ## `perspective.draw(points)` ### Description The sole public method of a `Perspective` instance. Accepts an array of exactly four `[x, y]` coordinate pairs defining the four corners of the destination quadrilateral on the canvas, in order: **top-left, top-right, bottom-right, bottom-left**. The source image is warped to fill this shape and drawn onto the destination canvas. If more than one side of the quadrilateral has zero length, the method returns early without drawing. ### Parameters #### Path Parameters - **points** (Array>) - Required - An array containing exactly four `[x, y]` coordinate pairs representing the corners of the destination quadrilateral in the order: top-left, top-right, bottom-right, bottom-left. ### Request Example ```javascript const canvas = document.getElementById("canvas"); canvas.width = 500; canvas.height = 400; const ctx = canvas.getContext("2d"); const img = new Image(); img.onload = function () { const p = new Perspective(ctx, img); // Example 1: Slight perspective tilt (right side pushed inward) p.draw([ [0, 0], // top-left [500, 40], // top-right (lower than top-left → tilted) [500, 360], // bottom-right [0, 400] // bottom-left ]); // Example 2: Redraw with a more extreme trapezoid shape ctx.clearRect(0, 0, canvas.width, canvas.height); const p2 = new Perspective(ctx, img); p2.draw([ [100, 50], // top-left (narrower top) [400, 50], // top-right (narrower top) [480, 380], // bottom-right (wider bottom) [20, 380] // bottom-left (wider bottom) ]); }; img.src = "texture.png"; ``` ``` -------------------------------- ### Draw Warped Image to Quadrilateral Source: https://context7.com/wanadev/perspective.js/llms.txt The `draw` method warps a source image to fit a specified quadrilateral on the canvas. Provide four `[x, y]` coordinate pairs in the order: top-left, top-right, bottom-right, bottom-left. The method returns early if any quadrilateral side has zero length. ```javascript const canvas = document.getElementById("canvas"); canvas.width = 500; canvas.height = 400; const ctx = canvas.getContext("2d"); const img = new Image(); img.onload = function () { const p = new Perspective(ctx, img); // Example 1: Slight perspective tilt (right side pushed inward) p.draw([ [0, 0], // top-left [500, 40], // top-right (lower than top-left → tilted) [500, 360], // bottom-right [0, 400] // bottom-left ]); // Example 2: Redraw with a more extreme trapezoid shape ctx.clearRect(0, 0, canvas.width, canvas.height); const p2 = new Perspective(ctx, img); p2.draw([ [100, 50], // top-left (narrower top) [400, 50], // top-right (narrower top) [480, 380], // bottom-right (wider bottom) [20, 380] // bottom-left (wider bottom) ]); }; img.src = "texture.png"; ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.