The front end can also quickly synthesize images

• 1.3.4 (6.22)

  • Modified text drawing mechanism, added text rotation parameter,option.pos.rotate;

• 1.3.2 (4.28)

  • addfunctionwidthParameters of the neworiginIs drawn according to the size of the original picture;
  • Text rendering added fault tolerance: whenoptions.width < fontSize, the pressfontSizeDraw to avoid the problem of swapping blank lines;
  • Fix the problem that initialization does not send parameters wrong;

• 1.3.1 (4.28)

  • repairtextThe problem of multiple calls affecting each other;

• 1.3.0 (2.22)

  • Modify the parameter format of the new instance, which is relatively unified and easy to expand;
  • Optimized storage management classification, added on instancefn 及 dataProperties;
  • The new Apimc.rect / mc.circle, used to draw rectangles and circles;
  • correctmc.textMethods To locate the inaccurate problem, and add the function of stroke text, gradient text, text shadow;
  • Added error callbacks that are triggered when images fail to loaddrawIn the incomingerrorThe callback.
  • Optimize documentation and code;

• 1.2.9 (12.20)

  • The new Apimc.clear: Empty the canvas;

• 1.2.8 (10.27)

  • repairbackgroundAPI interfaceleft/topParameter vertical center problem, in addition to new supportleft:'center', unified API;

• 1.2.6 (9.27)

  • backgroundAPI interfaceleft/topParameters of the new0%,50% 和 100%;

• 1.2.5 (9.27)

  • Fix documentation errors;

• 1.2.3 (9.26)

  • Increase the materialcanvasSize limit, ios8 is 2096, other limits are 4096;

• 1.2.2 (9.25)

  • Add parameter round down;

• 1.2.1 (9.7)

  • Modify theaddIn the functioncropClipping feature BUG;

• 1.2.0 (8.28)

  • Modify themc.draw()Add configurable export image format and image quality, compatible with the old versionapi;
  • Add some error reminders that may cause errors to facilitate the business side to locate problems;

• 1.1.8 (8.13)

  • Update documents;

• 1.1.7 (8.12)

  • increasemc.background(bg)Error reminder when the interface is called for the first time, modify the content of the exception prompt;

• 1.1.6 (8.11)

  • Fixed the problem of clipping canvas magnification error in vertical footage.

• 1.1.5 (8.10)

  • increaseadd/background/watermarkThe incomingimageCan I do forcanvas;

• 1.1.4 (8.9)

  • Add English documents;
  • Added the default background color that can be configured during initialization.

• 1.1.3 (8.3)

  • Modify a warning syntax error;
  • Added a small canvas magnification mechanism for painting materials, which is used to solve the cropping caused by rotation.
  • Add the clearing mechanism after drawing a small canvas to avoid occupying too much memory due to too large material;

• 1.0.9 (7.27)

  • Get picture width byimg.widthModified toimg.naturalWidthTo avoid direct incomingDOMNode to get the width and heightcssInfluence;
  • Add background image error alert;

• 1.0.8 (7.27)

  • Adjust the constructor structure usingprototypeThe prototype chain is shaped to be compatible with the beltnewHow to call;
  • Adjust and improve documents;
  • Delete incorrect package dependencies and adjust package names;

• 1.0.2 (7.26)

  • Revision and improvement of documents
  • BigStyle –> largeStyle;

Create Canvas, initialize Canvas;

params:

• {Object} options
  • {Number} width: optional canvas width;
  • {Number} height: canvas height, optional;
  • {Color} backgroundColor: optional canvas backgroundColor;

Usage:

	MCanvas({
		width : 500,
		height: 500,
		backgroundColor: '#fff',
	})Copy the code

Draw the base of the canvas;

Options: Mandatory for the first time, optional later;

The parameters are stored as default values each time the background is drawn, so the background initialization can be restored by calling this function without passing a value.

Usage:

/ / image: the background image, type: url/HTMLImageElement HTMLCanvasElement MC. Background (image, {/ / drawing modes: Origin/crop/contain // origin: the original image mode, the size of the canvas is the same as the background image, ignore the initial width of the incoming canvas; Ignore left/top; // crop: crop mode, background image adaptively spread all over the canvas, cut the excess parts; The clipping part can be controlled by the left/ TOP value; // contain :contain; background-size:contain; The position can be controlled by the left/top value; Type :'origin', // The distance between the background image and the top left corner of the canvas, // 100 / '100%'/'100px' // 0% : left clipping; 50% : represents the center cut; Left :'50%', top:0, // only include type:contain; color:'#000000', })Copy the code

Add watermark function, based on add() encapsulation, more portable and convenient to use; prepare the watermark;

params:

/ / material picture, type: url/HTMLImageElement HTMLCanvasElement image: "', / / configuration parameters: options: {/ / watermark size, in order to adaptive according to image, only support in the form of percentage; // The width is the width of the canvas * percentage; // type : string // Default : '40%'; Width: '100%', / / / / position 4 selected value: leftTop/leftBottom/rightTop/rightBottom; // type : string // Default : 'rightBottom'; Pos: 'leftTop', // margin of the distance from the canvas edge, // type: Number // Default: 20; margin : 20, }Copy the code

Like the add function, this method is used to draw a rectangle directly;

Ops: {// top left corner of rectangle, support multiple values; / / x: 250 / '250 px'/' 100% '/' left: 250 '/' center ', x: 0, y: 0, / / rectangle size; StrokeWidth: 1, // strokeColor: '# FFF ', // fillColor: '# FFF ',}Copy the code

Drawing function, add/watermark/text method need to call this method at the end of drawing, and this function includes export function, the base64 of the result graph can be directly obtained in the callback.

params:

// Base64 and configuration coefficients can only be fetched in this callback because of asynchron; Mc.draw ({// Export image format: PNG/JPG /jpeg/webp; // default : png; Type: 'PNG ', // image quality, invalid for PNG format; 0 ~ 1; // default: .9; Quality: 1, // Successful callback; success(b64){ console.log(b64); }, // Error callback; error(err){ console.log(err); }})Copy the code