wd-canvas2image
A function that converts a canvas to an image.
Features
- save image file
- covert canvas to image
- select the type of conversion
- select the size of the transformation
Usage
import React useState useRef from 'react';import html2canvas from "html2canvas"; // 自行安装import Canvas2Image from 'wd-canvas2image'; // 本插件需安装 { // 容器 const boxRef = ; const canvasBoxRef = ; const imageBoxRef = ; // 宽、高、文件名、文件类型 const height setHeight = ; const width setWidth = ; const fileName setFileName = ; const fileType setFileType = ; // 存储canvas const canvasImage setCanvasImage = ; { } { // 调用Canvas2Image插件 const img = Canvas2Image; imageBoxRefcurrent; } { // 调用saveAsImage方法实现下载 Canvas2Image; } return <div ="App"> <h2>原始HTML</h2> <div = ="test" => <div => <div => <div => <div => 6666666666666666666666666666666 </div> </div> </div> </div> </div> <h2 ="toCanvas" => <a => 转成canvas </a> </h2> <h2 ="toPic" => <a => 转成图片 </a> </h2> <h5> <label>宽度:</label> <input ="number" = ="默认是原图宽度" = /> <label>高度:</label> <input ="number" = ="默认是原图高度" = /> <label>文件名:</label> <input ="text" = ="文件名" = /> <select = => <option ="png">png</option> <option ="jpeg">jpeg</option> <option ="bmp">bmp</option> </select> <button =>保存</button> </h5> </div> ;} ;
Api To Introduce
saveAsImage(canvas: CanvasElement, width: Number | String, height: Number | String, type: String, fileName: String)
Save the image according to the parameters.
saveAsPNG(canvas: CanvasElement, width: Number | String, height: Number | String)
Save the image in PNG format.
saveAsJPEG(canvas: CanvasElement, width: Number | String, height: Number | String)
Save the image in JPEG format.
saveAsGIF(canvas: CanvasElement, width: Number | String, height: Number | String)
Save the image in GIF format.
saveAsBMP(canvas: CanvasElement, width: Number | String, height: Number | String)
Save the image in BMP format.
convertToImage(canvas: CanvasElement, width: Number | String, height: Number | String, type: String)
Convert the canvas to an image based on parameters.
convertToPNG(canvas: CanvasElement, width: Number | String, height: Number | String)
Convert the Canvas to a PNG image.
convertToJPEG(canvas: CanvasElement, width: Number | String, height: Number | String)
Convert the Canvas to a JPEG image.
convertToGIF(canvas: CanvasElement, width: Number | String, height: Number | String)
Convert the Canvas to a GIF image.
convertToBMP(canvas: CanvasElement, width: Number | String, height: Number | String)
Convert the Canvas to a BMP image.