微信小程序-绘制图片并分享下载（painter）

const QR = require('./qrcode.js'); const GD = require('./gradient.js'); require('./string-polyfill.js'); export const penCache = { // 用于存储带 id 的 view 的 rect 信息 viewRect: {}, textLines: {}, }; export const clearPenCache = id => { if (id) { penCache.viewRect[id] = null; penCache.textLines[id] = null; } else { penCache.viewRect = {}; penCache.textLines = {}; } }; export default class Painter { constructor(ctx, data) { this.ctx = ctx; this.data = data; } paint(callback) { this.style = { width: this.data.width.toPx(), height: this.data.height.toPx(), }; this._background(); for (const view of this.data.views) { this._drawAbsolute(view); } this.ctx.draw(false, () => { callback && callback(); }); } _background() { this.ctx.save(); const { width, height } = this.style; const bg = this.data.background; this.ctx.translate(width / 2, height / 2); this._doClip(this.data.borderRadius, width, height); if (!bg) { // 如果未设置背景，则默认使用透明色 this.ctx.fillStyle = 'transparent'; this.ctx.fillRect(-(width / 2), -(height / 2), width, height); } else if (bg.startsWith('#') || bg.startsWith('rgba') || bg.toLowerCase() === 'transparent') { // 背景填充颜色 this.ctx.fillStyle = bg; this.ctx.fillRect(-(width / 2), -(height / 2), width, height); } else if (GD.api.isGradient(bg)) { GD.api.doGradient(bg, width, height, this.ctx); this.ctx.fillRect(-(width / 2), -(height / 2), width, height); } else { // 背景填充图片 this.ctx.drawImage(bg, -(width / 2), -(height / 2), width, height); } this.ctx.restore(); } _drawAbsolute(view) { if (!(view && view.type)) { // 过滤无效 view return; } // 证明 css 为数组形式，需要合并 if (view.css && view.css.length) { /* eslint-disable no-param-reassign */ view.css = Object.assign(...view.css); } switch (view.type) { case 'image': this._drawAbsImage(view); break; case 'text': this._fillAbsText(view); break; case 'inlineText': this._fillAbsInlineText(view); break; case 'rect': this._drawAbsRect(view); break; case 'qrcode': this._drawQRCode(view); break; default: break; } } _border({ borderRadius = 0, width, height, borderWidth = 0, borderStyle = 'solid' }) { let r1 = 0, r2 = 0, r3 = 0, r4 = 0; const minSize = Math.min(width, height); if (borderRadius) { const border = borderRadius.split(/\s+/); if (border.length === 4) { r1 = Math.min(border[0].toPx(false, minSize), width / 2, height / 2); r2 = Math.min(border[1].toPx(false, minSize), width / 2, height / 2); r3 = Math.min(border[2].toPx(false, minSize), width / 2, height / 2); r4 = Math.min(border[3].toPx(false, minSize), width / 2, height / 2); } else { r1 = r2 = r3 = r4 = Math.min(borderRadius && borderRadius.toPx(false, minSize), width / 2, height / 2); } } const lineWidth = borderWidth && borderWidth.toPx(false, minSize); this.ctx.lineWidth = lineWidth; if (borderStyle === 'dashed') { this.ctx.setLineDash([(lineWidth * 4) / 3, (lineWidth * 4) / 3]); // this.ctx.lineDashOffset = 2 * lineWidth } else if (borderStyle === 'dotted') { this.ctx.setLineDash([lineWidth, lineWidth]); } const notSolid = borderStyle !== 'solid'; this.ctx.beginPath(); notSolid && r1 === 0 && this.ctx.moveTo(-width / 2 - lineWidth, -height / 2 - lineWidth / 2); // 顶边虚线规避重叠规则 r1 !== 0 && this.ctx.arc(-width / 2 + r1, -height / 2 + r1, r1 + lineWidth / 2, 1 * Math.PI, 1.5 * Math.PI); //左上角圆弧 this.ctx.lineTo( r2 === 0 ? (notSolid ? width / 2 : width / 2 + lineWidth / 2) : width / 2 - r2, -height / 2 - lineWidth / 2, ); // 顶边线 notSolid && r2 === 0 && this.ctx.moveTo(width / 2 + lineWidth / 2, -height / 2 - lineWidth); // 右边虚线规避重叠规则 r2 !== 0 && this.ctx.arc(width / 2 - r2, -height / 2 + r2, r2 + lineWidth / 2, 1.5 * Math.PI, 2 * Math.PI); // 右上角圆弧 this.ctx.lineTo( width / 2 + lineWidth / 2, r3 === 0 ? (notSolid ? height / 2 : height / 2 + lineWidth / 2) : height / 2 - r3, ); // 右边线 notSolid && r3 === 0 && this.ctx.moveTo(width / 2 + lineWidth, height / 2 + lineWidth / 2); // 底边虚线规避重叠规则 r3 !== 0 && this.ctx.arc(width / 2 - r3, height / 2 - r3, r3 + lineWidth / 2, 0, 0.5 * Math.PI); // 右下角圆弧 this.ctx.lineTo( r4 === 0 ? (notSolid ? -width / 2 : -width / 2 - lineWidth / 2) : -width / 2 + r4, height / 2 + lineWidth / 2, ); // 底边线 notSolid && r4 === 0 && this.ctx.moveTo(-width / 2 - lineWidth / 2, height / 2 + lineWidth); // 左边虚线规避重叠规则 r4 !== 0 && this.ctx.arc(-width / 2 + r4, height / 2 - r4, r4 + lineWidth / 2, 0.5 * Math.PI, 1 * Math.PI); // 左下角圆弧 this.ctx.lineTo( -width / 2 - lineWidth / 2, r1 === 0 ? (notSolid ? -height / 2 : -height / 2 - lineWidth / 2) : -height / 2 + r1, ); // 左边线 notSolid && r1 === 0 && this.ctx.moveTo(-width / 2 - lineWidth, -height / 2 - lineWidth / 2); // 顶边虚线规避重叠规则 if (!notSolid) { this.ctx.closePath(); } } /** * 根据 borderRadius 进行裁减 */ _doClip(borderRadius, width, height, borderStyle) { if (borderRadius && width && height) { // 防止在某些机型上周边有黑框现象，此处如果直接设置 fillStyle 为透明，在 Android 机型上会导致被裁减的图片也变为透明， iOS 和 IDE 上不会 // globalAlpha 在 1.9.90 起支持，低版本下无效，但把 fillStyle 设为了 white，相对默认的 black 要好点 this.ctx.globalAlpha = 0; this.ctx.fillStyle = 'white'; this._border({ borderRadius, width, height, borderStyle, }); this.ctx.fill(); // 在 ios 的 6.6.6 版本上 clip 有 bug，禁掉此类型上的 clip，也就意味着，在此版本微信的 ios 设备下无法使用 border 属性 if (!(getApp().systemInfo && getApp().systemInfo.version <= '6.6.6' && getApp().systemInfo.platform === 'ios')) { this.ctx.clip(); } this.ctx.globalAlpha = 1; } } /** * 画边框 */ _doBorder(view, width, height) { if (!view.css) { return; } const { borderRadius, borderWidth, borderColor, borderStyle } = view.css; if (!borderWidth) { return; } this.ctx.save(); this._preProcess(view, true); this.ctx.strokeStyle = borderColor || 'black'; this._border({ borderRadius, width, height, borderWidth, borderStyle, }); this.ctx.stroke(); this.ctx.restore(); } _preProcess(view, notClip) { let width = 0; let height; let extra; const paddings = this._doPaddings(view); switch (view.type) { case 'inlineText': { { // 计算行数 let lines = 0; // 文字总长度 let textLength = 0; // 行高 let lineHeight = 0; const textList = view.textList || []; for (let i = 0; i < textList.length; i++) { let subView = textList[i]; const fontWeight = subView.css.fontWeight || '400'; const textStyle = subView.css.textStyle || 'normal'; if (!subView.css.fontSize) { subView.css.fontSize = '20rpx';