imgupcanvas

canvas图片预览，操控图片移动、缩放、旋转，裁切,支持PC设备部分功能；Canvas image upload preview, mobile touch device can move, zoom, rotate, clip; PC device has no rotation function.

latest

npm

Version: 1.0.3

Version published: 7 years ago

Weekly downloads: 3

Maintainers: 1

Weekly downloads

Created: 5 years ago

Source

Imgupcanvas.js

Canvas image upload preview, mobile touch device can move, zoom, rotate, clip; PC device has no rotation function.Pictures will automatically adjust their orientation based on the meta-information they are captured and stored in,The maximum capacity of uploaded image is 10MB,Image format support (jpeg, jpg, png, gif),Will automatically create a canvas.When the picture is wrong, you can view the information through the callback function.

There must be exif-js and domhammer dependencies in the module, No need to request again during project development.
In order to achieve good device compatibility, the js startup file can add the screen-pl requirement module.
System Support: Mobile browser kernel Android4.4+ 、ios ；Pc browser kernel webkit、Chrome、Gecko.

Install

npm install imgupcanvas --save

Usage

Add the requirement JS library file to the code, and provide a method after loading. The method provides four parameters [obj, width, height, callback, clip].Obj is the object that gets the input[file] type data, width is the width of the image to be generated, and height is the height at which the image will be generated,Callback is a function of outputting information when an error occurs,If the image format and capacity are qualified, you can ignore this parameter.Clip is an option that includes 'rect' squares and 'arc' circles,Return coordinate information by the previous callback method, Callback must also exist when Clip is present, At this point, callback returns coordinates, not error picture error messages.If you don't need clip, you can ignore it.

JavaScript:


let imgupcanvas=require('imgupcanvas');

let obj=document.querySelector('input');
	
	imgupcanvas(obj,100,100);

html:


<body>
	<input type="file" multiple accept="image/*" />
</body>

Keywords

FAQs

What is imgupcanvas?

Is imgupcanvas popular?

Is imgupcanvas well maintained?

Package last updated on 09 Oct 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install