imgupcanvas
v1.0.3
Published
canvas图片预览，操控图片移动、缩放、旋转，裁切,支持PC设备部分功能；Canvas image upload preview, mobile touch device can move, zoom, rotate, clip; PC device has no rotation function.
Downloads
4
Maintainers
guo_gReadme
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-plrequirement 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>