文章目录

  • 前言
  • 一、view生成分享图片
    • 1.组件的封装
    • 2.组件的使用
    • 3.效果
    • 4.第三方工具的使用

前言

微信小程序并不支持view直接转绘到画布上，想要实现海报功能必须通过以下4个步骤：

  • 通过wx.createCanvasContext创建一个画布
  • 在画布上绘制文本、内容、图片
  • 在通过wx.canvasToTempFilePath保存到本地路径
  • 在通过wx.saveImageToPhotosAlbum保存到相册

一、view生成分享图片

1.组件的封装

项目结构图：

1、dialogModal

var app = getApp()
Component({data: {},properties: {isShow: {type: Boolean,value: false},title: {type: String,value: '提示'},content: {type: String,value: ''},cancelText: {type: String,value: '取消'},confirmText: {type: String,value: '确定'},isNeedAuth: {type: Boolean,value: false},cancelType: {type: String,value: ''},confirmType: {type: String,value: ''}},methods: {preventTouchMove() { },cancel() {this.setData({isShow: false})this.triggerEvent('cancel')},confirm() {this.setData({isShow: false})this.triggerEvent('confirm')}}
})
{"component": true,"usingComponents": {}
}

<view class="container" wx:if="{{isShow}}" catchtouchmove="preventTouchMove"><view class="back-model"></view><view class="conent-model"><text class="title">{{title}}</text><text class="content">{{content}}</text><view class="quickBtn"><button class="cancel-btn" open-type="{{cancelType}}" bindtap="cancel">{{cancelText}}</button><button class="confirm-btn" open-type="{{confirmType}}" bindtap="confirm">{{confirmText}}</button></view></view>
</view>

.container {width: 100%;height: 100%;
}.back-model {width: 100%;height: 100%;position: fixed;z-index: 999;background-color: rgba(0, 0, 0, 0.6);top: 0;
}.conent-model {position: fixed;left: 50%;top: 50%;width: 622rpx;margin-left: -311rpx;margin-top: -200rpx;z-index: 999;background: #fff;border-radius: 8rpx;padding-top: 32rpx;
}.title {display: block;text-align: center;font-size: 36rpx;color: #3c3c3c;
}.content {display: block;text-align: center;font-size: 30rpx;padding: 32rpx;color: #999;
}.quickBtn {width: 100%;height: 96rpx;border-top: 2rpx solid #EEE;line-height: 96rpx;
}.cancel-btn {width: 50%;display: inline-block;color: #3c3c3c;font-size: 32rpx;text-align: center;height: 96rpx;line-height: 96rpx;border-right: 1rpx solid #EEE;
}.confirm-btn {width: 50%;display: inline-block;color: #00cc88;font-size: 32rpx;height: 96rpx;line-height: 96rpx;text-align: center;border-left: 1rpx solid #EEE;
}

2、painter
lib

/*** LRU 文件存储，使用该 downloader 可以让下载的文件存储在本地，下次进入小程序后可以直接使用*/
const util = require('./util');const SAVED_FILES_KEY = 'savedFiles';
const KEY_TOTAL_SIZE = 'totalSize';
const KEY_PATH = 'path';
const KEY_TIME = 'time';
const KEY_SIZE = 'size';// 可存储总共为 6M，目前小程序可允许的最大本地存储为 10M
let MAX_SPACE_IN_B = 6 * 1024 * 1024;
let savedFiles = {};export default class Dowloader {constructor() {// app 如果设置了最大存储空间，则使用 app 中的if (getApp().PAINTER_MAX_LRU_SPACE) {MAX_SPACE_IN_B = getApp().PAINTER_MAX_LRU_SPACE;}wx.getStorage({key: SAVED_FILES_KEY,success: function (res) {if (res.data) {savedFiles = res.data;}},});}/*** 下载文件，会用 lru 方式来缓存文件到本地* @param {String} url 文件的 url*/download(url) {return new Promise((resolve, reject) => {if (!(url && util.isValidUrl(url))) {resolve(url);return;}const file = getFile(url);if (file) {// 检查文件是否正常，不正常需要重新下载wx.getSavedFileInfo({filePath: file[KEY_PATH],success: (res) => {resolve(file[KEY_PATH]);},fail: (error) => {console.error(`the file is broken, redownload it, ${JSON.stringify(error)}`);downloadFile(url).then((path) => {resolve(path);}, () => {reject();});},});} else {downloadFile(url).then((path) => {resolve(path);}, () => {reject();});}});}
}function downloadFile(url) {return new Promise((resolve, reject) => {wx.downloadFile({url: url,success: function (res) {if (res.statusCode !== 200) {console.error(`downloadFile ${url} failed res.statusCode is not 200`);reject();return;}const { tempFilePath } = res;wx.getFileInfo({filePath: tempFilePath,success: (tmpRes) => {const newFileSize = tmpRes.size;doLru(newFileSize).then(() => {saveFile(url, newFileSize, tempFilePath).then((filePath) => {resolve(filePath);});}, () => {resolve(tempFilePath);});},fail: (error) => {// 文件大小信息获取失败，则此文件也不要进行存储console.error(`getFileInfo ${res.tempFilePath} failed, ${JSON.stringify(error)}`);resolve(res.tempFilePath);},});},fail: function (error) {console.error(`downloadFile failed, ${JSON.stringify(error)} `);reject();},});});
}function saveFile(key, newFileSize, tempFilePath) {return new Promise((resolve, reject) => {wx.saveFile({tempFilePath: tempFilePath,success: (fileRes) => {const totalSize = savedFiles[KEY_TOTAL_SIZE] ? savedFiles[KEY_TOTAL_SIZE] : 0;savedFiles[key] = {};savedFiles[key][KEY_PATH] = fileRes.savedFilePath;savedFiles[key][KEY_TIME] = new Date().getTime();savedFiles[key][KEY_SIZE] = newFileSize;savedFiles['totalSize'] = newFileSize + totalSize;wx.setStorage({key: SAVED_FILES_KEY,data: savedFiles,});resolve(fileRes.savedFilePath);},fail: (error) => {console.error(`saveFile ${key} failed, then we delete all files, ${JSON.stringify(error)}`);// 由于 saveFile 成功后，res.tempFilePath 处的文件会被移除，所以在存储未成功时，我们还是继续使用临时文件resolve(tempFilePath);// 如果出现错误，就直接情况本地的所有文件，因为你不知道是不是因为哪次lru的某个文件未删除成功reset();},});});
}/*** 清空所有下载相关内容*/
function reset() {wx.removeStorage({key: SAVED_FILES_KEY,success: () => {wx.getSavedFileList({success: (listRes) => {removeFiles(listRes.fileList);},fail: (getError) => {console.error(`getSavedFileList failed, ${JSON.stringify(getError)}`);},});},});
}function doLru(size) {return new Promise((resolve, reject) => {let totalSize = savedFiles[KEY_TOTAL_SIZE] ? savedFiles[KEY_TOTAL_SIZE] : 0;if (size + totalSize <= MAX_SPACE_IN_B) {resolve();return;}// 如果加上新文件后大小超过最大限制，则进行 lruconst pathsShouldDelete = [];// 按照最后一次的访问时间，从小到大排序const allFiles = JSON.parse(JSON.stringify(savedFiles));delete allFiles[KEY_TOTAL_SIZE];const sortedKeys = Object.keys(allFiles).sort((a, b) => {return allFiles[a][KEY_TIME] - allFiles[b][KEY_TIME];});for (const sortedKey of sortedKeys) {totalSize -= savedFiles[sortedKey].size;pathsShouldDelete.push(savedFiles[sortedKey][KEY_PATH]);delete savedFiles[sortedKey];if (totalSize + size < MAX_SPACE_IN_B) {break;}}savedFiles['totalSize'] = totalSize;wx.setStorage({key: SAVED_FILES_KEY,data: savedFiles,success: () => {// 保证 storage 中不会存在不存在的文件数据if (pathsShouldDelete.length > 0) {removeFiles(pathsShouldDelete);}resolve();},fail: (error) => {console.error(`doLru setStorage failed, ${JSON.stringify(error)}`);reject();},});});
}function removeFiles(pathsShouldDelete) {for (const pathDel of pathsShouldDelete) {let delPath = pathDel;if (typeof pathDel === 'object') {delPath = pathDel.filePath;}wx.removeSavedFile({filePath: delPath,fail: (error) => {console.error(`removeSavedFile ${pathDel} failed, ${JSON.stringify(error)}`);},});}
}function getFile(key) {if (!savedFiles[key]) {return;}savedFiles[key]['time'] = new Date().getTime();wx.setStorage({key: SAVED_FILES_KEY,data: savedFiles,});return savedFiles[key];
}
const QR = require('./qrcode.js');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();});}_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 = '#fff';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 {// 背景填充图片this.ctx.drawImage(bg, -(width / 2), -(height / 2), width, height);}this.ctx.restore();}_drawAbsolute(view) {// 证明 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 'rect':this._drawAbsRect(view);break;case 'qrcode':this._drawQRCode(view);break;default:break;}}/*** 根据 borderRadius 进行裁减*/_doClip(borderRadius, width, height) {if (borderRadius && width && height) {const r = Math.min(borderRadius.toPx(), width / 2, height / 2);// 防止在某些机型上周边有黑框现象，此处如果直接设置 setFillStyle 为透明，在 Android 机型上会导致被裁减的图片也变为透明， iOS 和 IDE 上不会// setGlobalAlpha 在 1.9.90 起支持，低版本下无效，但把 setFillStyle 设为了 white，相对默认的 black 要好点this.ctx.globalAlpha = 0;this.ctx.fillStyle = 'white';this.ctx.beginPath();this.ctx.arc(-width / 2 + r, -height / 2 + r, r, 1 * Math.PI, 1.5 * Math.PI);this.ctx.lineTo(width / 2 - r, -height / 2);this.ctx.arc(width / 2 - r, -height / 2 + r, r, 1.5 * Math.PI, 2 * Math.PI);this.ctx.lineTo(width / 2, height / 2 - r);this.ctx.arc(width / 2 - r, height / 2 - r, r, 0, 0.5 * Math.PI);this.ctx.lineTo(-width / 2 + r, height / 2);this.ctx.arc(-width / 2 + r, height / 2 - r, r, 0.5 * Math.PI, 1 * Math.PI);this.ctx.closePath();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,} = view.css;if (!borderWidth) {return;}this.ctx.save();this._preProcess(view, true);let r;if (borderRadius) {r = Math.min(borderRadius.toPx(), width / 2, height / 2);} else {r = 0;}const lineWidth = borderWidth.toPx();this.ctx.lineWidth = lineWidth;this.ctx.strokeStyle = borderColor || 'black';this.ctx.beginPath();this.ctx.arc(-width / 2 + r, -height / 2 + r, r + lineWidth / 2, 1 * Math.PI, 1.5 * Math.PI);this.ctx.lineTo(width / 2 - r, -height / 2 - lineWidth / 2);this.ctx.arc(width / 2 - r, -height / 2 + r, r + lineWidth / 2, 1.5 * Math.PI, 2 * Math.PI);this.ctx.lineTo(width / 2 + lineWidth / 2, height / 2 - r);this.ctx.arc(width / 2 - r, height / 2 - r, r + lineWidth / 2, 0, 0.5 * Math.PI);this.ctx.lineTo(-width / 2 + r, height / 2 + lineWidth / 2);this.ctx.arc(-width / 2 + r, height / 2 - r, r + lineWidth / 2, 0.5 * Math.PI, 1 * Math.PI);this.ctx.closePath();this.ctx.stroke();this.ctx.restore();}_preProcess(view, notClip) {let width;let height;let extra;switch (view.type) {case 'text': {const fontWeight = view.css.fontWeight === 'bold' ? 'bold' : 'normal';view.css.fontSize = view.css.fontSize ? view.css.fontSize : '20rpx';this.ctx.font = `normal ${fontWeight} ${view.css.fontSize.toPx()}px sans-serif`;// this.ctx.setFontSize(view.css.fontSize.toPx());const textLength = this.ctx.measureText(view.text).width;width = view.css.width ? view.css.width.toPx() : textLength;// 计算行数const calLines = Math.ceil(textLength / width);const lines = view.css.maxLines < calLines ? view.css.maxLines : calLines;const lineHeight = view.css.lineHeight ? view.css.lineHeight.toPx() : view.css.fontSize.toPx();height = lineHeight * lines;extra = { lines: lines, lineHeight: lineHeight };break;}case 'image': {// image 如果未设置长宽，则使用图片本身的长宽const ratio = getApp().systemInfo.pixelRatio ? getApp().systemInfo.pixelRatio : 2;width = view.css && view.css.width ? view.css.width.toPx() : Math.round(view.sWidth / ratio);height = view.css && view.css.height ? view.css.height.toPx() : Math.round(view.sHeight / ratio);break;}default: {if (!(view.css.width && view.css.height)) {console.error('You should set width and height');return;}width = view.css.width.toPx();height = view.css.height.toPx();}}const x = view.css && view.css.right ? this.style.width - view.css.right.toPx(true) : (view.css && view.css.left ? view.css.left.toPx(true) : 0);const y = view.css && view.css.bottom ? this.style.height - height - view.css.bottom.toPx(true) : (view.css && view.css.top ? view.css.top.toPx(true) : 0);const angle = view.css && view.css.rotate ? this._getAngle(view.css.rotate) : 0;// 当设置了 right 时，默认 align 用 right，反之用 leftconst align = view.css && view.css.align ? view.css.align : (view.css && view.css.right ? 'right' : 'left');switch (align) {case 'center':this.ctx.translate(x, y + height / 2);break;case 'right':this.ctx.translate(x - width / 2, y + height / 2);break;default:this.ctx.translate(x + width / 2, y + height / 2);break;}this.ctx.rotate(angle);if (!notClip && view.css && view.css.borderRadius) {this._doClip(view.css.borderRadius, width, height);}return {width: width,height: height,x: x,y: y,extra: extra,};}_drawQRCode(view) {this.ctx.save();const {width,height,} = this._preProcess(view);QR.api.draw(view.content, this.ctx, -width / 2, -height / 2, width, height, view.css.background, view.css.color);this.ctx.restore();this._doBorder(view, width, height);}_drawAbsImage(view) {if (!view.url) {return;}this.ctx.save();const {width,height,} = this._preProcess(view);// 获得缩放到图片大小级别的裁减框let rWidth;let rHeight;let startX = 0;let startY = 0;if (width > height) {rHeight = Math.round((view.sWidth / width) * height);rWidth = view.sWidth;} else {rWidth = Math.round((view.sHeight / height) * width);rHeight = view.sHeight;}if (view.sWidth > rWidth) {startX = Math.round((view.sWidth - rWidth) / 2);}if (view.sHeight > rHeight) {startY = Math.round((view.sHeight - rHeight) / 2);}if (view.css && view.css.mode === 'scaleToFill') {this.ctx.drawImage(view.url, -(width / 2), -(height / 2), width, height);} else {this.ctx.drawImage(view.url, startX, startY, rWidth, rHeight, -(width / 2), -(height / 2), width, height);}this.ctx.restore();this._doBorder(view, width, height);}_fillAbsText(view) {if (!view.text) {return;}this.ctx.save();const {width,height,extra,} = this._preProcess(view);this.ctx.fillStyle = view.css.color || 'black';const { lines, lineHeight } = extra;const preLineLength = Math.round(view.text.length / lines);let start = 0;let alreadyCount = 0;for (let i = 0; i < lines; ++i) {alreadyCount = preLineLength;let text = view.text.substr(start, alreadyCount);let measuredWith = this.ctx.measureText(text).width;// 如果测量大小小于width一个字符的大小，则进行补齐，如果测量大小超出 width，则进行减除// 如果已经到文本末尾，也不要进行该循环while ((start + alreadyCount <= view.text.length) && (width - measuredWith > view.css.fontSize.toPx() || measuredWith > width)) {if (measuredWith < width) {text = view.text.substr(start, ++alreadyCount);} else {if (text.length <= 1) {// 如果只有一个字符时，直接跳出循环break;}text = view.text.substr(start, --alreadyCount);}measuredWith = this.ctx.measureText(text).width;}start += text.length;// 如果是最后一行了，发现还有未绘制完的内容，则加...if (i === lines - 1 && start < view.text.length) {while (this.ctx.measureText(`${text}...`).width > width) {if (text.length <= 1) {// 如果只有一个字符时，直接跳出循环break;}text = text.substring(0, text.length - 1);}text += '...';measuredWith = this.ctx.measureText(text).width;}this.ctx.setTextAlign(view.css.align ? view.css.align : 'left');let x;switch (view.css.align) {case 'center':x = 0;break;case 'right':x = (width / 2);break;default:x = -(width / 2);break;}const y = -(height / 2) + (i === 0 ? view.css.fontSize.toPx() : (view.css.fontSize.toPx() + i * lineHeight));if (view.css.textStyle === 'stroke') {this.ctx.strokeText(text, x, y, measuredWith);} else {this.ctx.fillText(text, x, y, measuredWith);}const fontSize = view.css.fontSize.toPx();if (view.css.textDecoration) {this.ctx.beginPath();if (/\bunderline\b/.test(view.css.textDecoration)) {this.ctx.moveTo(x, y);this.ctx.lineTo(x + measuredWith, y);}if (/\boverline\b/.test(view.css.textDecoration)) {this.ctx.moveTo(x, y - fontSize);this.ctx.lineTo(x + measuredWith, y - fontSize);}if (/\bline-through\b/.test(view.css.textDecoration)) {this.ctx.moveTo(x, y - fontSize / 3);this.ctx.lineTo(x + measuredWith, y - fontSize / 3);}this.ctx.closePath();this.ctx.strokeStyle = view.css.color;this.ctx.stroke();}}this.ctx.restore();this._doBorder(view, width, height);}_drawAbsRect(view) {this.ctx.save();const {width,height,} = this._preProcess(view);this.ctx.fillStyle = view.css.color;this.ctx.fillRect(-(width / 2), -(height / 2), width, height);this.ctx.restore();this._doBorder(view, width, height);}_getAngle(angle) {return Number(angle) * Math.PI / 180;}
}
/* eslint-disable */
!(function () {// alignment patternvar adelta = [0, 11, 15, 19, 23, 27, 31,16, 18, 20, 22, 24, 26, 28, 20, 22, 24, 24, 26, 28, 28, 22, 24, 24,26, 26, 28, 28, 24, 24, 26, 26, 26, 28, 28, 24, 26, 26, 26, 28, 28];// version blockvar vpat = [0xc94, 0x5bc, 0xa99, 0x4d3, 0xbf6, 0x762, 0x847, 0x60d,0x928, 0xb78, 0x45d, 0xa17, 0x532, 0x9a6, 0x683, 0x8c9,0x7ec, 0xec4, 0x1e1, 0xfab, 0x08e, 0xc1a, 0x33f, 0xd75,0x250, 0x9d5, 0x6f0, 0x8ba, 0x79f, 0xb0b, 0x42e, 0xa64,0x541, 0xc69];// final format bits with mask: level << 3 | maskvar fmtword = [0x77c4, 0x72f3, 0x7daa, 0x789d, 0x662f, 0x6318, 0x6c41, 0x6976,    //L0x5412, 0x5125, 0x5e7c, 0x5b4b, 0x45f9, 0x40ce, 0x4f97, 0x4aa0,    //M0x355f, 0x3068, 0x3f31, 0x3a06, 0x24b4, 0x2183, 0x2eda, 0x2bed,    //Q0x1689, 0x13be, 0x1ce7, 0x19d0, 0x0762, 0x0255, 0x0d0c, 0x083b    //H];// 4 per version: number of blocks 1,2; data width; ecc widthvar eccblocks = [1, 0, 19, 7, 1, 0, 16, 10, 1, 0, 13, 13, 1, 0, 9, 17,1, 0, 34, 10, 1, 0, 28, 16, 1, 0, 22, 22, 1, 0, 16, 28,1, 0, 55, 15, 1, 0, 44, 26, 2, 0, 17, 18, 2, 0, 13, 22,1, 0, 80, 20, 2, 0, 32, 18, 2, 0, 24, 26, 4, 0, 9, 16,1, 0, 108, 26, 2, 0, 43, 24, 2, 2, 15, 18, 2, 2, 11, 22,2, 0, 68, 18, 4, 0, 27, 16, 4, 0, 19, 24, 4, 0, 15, 28,2, 0, 78, 20, 4, 0, 31, 18, 2, 4, 14, 18, 4, 1, 13, 26,2, 0, 97, 24, 2, 2, 38, 22, 4, 2, 18, 22, 4, 2, 14, 26,2, 0, 116, 30, 3, 2, 36, 22, 4, 4, 16, 20, 4, 4, 12, 24,2, 2, 68, 18, 4, 1, 43, 26, 6, 2, 19, 24, 6, 2, 15, 28,4, 0, 81, 20, 1, 4, 50, 30, 4, 4, 22, 28, 3, 8, 12, 24,2, 2, 92, 24, 6, 2, 36, 22, 4, 6, 20, 26, 7, 4, 14, 28,4, 0, 107, 26, 8, 1, 37, 22, 8, 4, 20, 24, 12, 4, 11, 22,3, 1, 115, 30, 4, 5, 40, 24, 11, 5, 16, 20, 11, 5, 12, 24,5, 1, 87, 22, 5, 5, 41, 24, 5, 7, 24, 30, 11, 7, 12, 24,5, 1, 98, 24, 7, 3, 45, 28, 15, 2, 19, 24, 3, 13, 15, 30,1, 5, 107, 28, 10, 1, 46, 28, 1, 15, 22, 28, 2, 17, 14, 28,5, 1, 120, 30, 9, 4, 43, 26, 17, 1, 22, 28, 2, 19, 14, 28,3, 4, 113, 28, 3, 11, 44, 26, 17, 4, 21, 26, 9, 16, 13, 26,3, 5, 107, 28, 3, 13, 41, 26, 15, 5, 24, 30, 15, 10, 15, 28,4, 4, 116, 28, 17, 0, 42, 26, 17, 6, 22, 28, 19, 6, 16, 30,2, 7, 111, 28, 17, 0, 46, 28, 7, 16, 24, 30, 34, 0, 13, 24,4, 5, 121, 30, 4, 14, 47, 28, 11, 14, 24, 30, 16, 14, 15, 30,6, 4, 117, 30, 6, 14, 45, 28, 11, 16, 24, 30, 30, 2, 16, 30,8, 4, 106, 26, 8, 13, 47, 28, 7, 22, 24, 30, 22, 13, 15, 30,10, 2, 114, 28, 19, 4, 46, 28, 28, 6, 22, 28, 33, 4, 16, 30,8, 4, 122, 30, 22, 3, 45, 28, 8, 26, 23, 30, 12, 28, 15, 30,3, 10, 117, 30, 3, 23, 45, 28, 4, 31, 24, 30, 11, 31, 15, 30,7, 7, 116, 30, 21, 7, 45, 28, 1, 37, 23, 30, 19, 26, 15, 30,5, 10, 115, 30, 19, 10, 47, 28, 15, 25, 24, 30, 23, 25, 15, 30,13, 3, 115, 30, 2, 29, 46, 28, 42, 1, 24, 30, 23, 28, 15, 30,17, 0, 115, 30, 10, 23, 46, 28, 10, 35, 24, 30, 19, 35, 15, 30,17, 1, 115, 30, 14, 21, 46, 28, 29, 19, 24, 30, 11, 46, 15, 30,13, 6, 115, 30, 14, 23, 46, 28, 44, 7, 24, 30, 59, 1, 16, 30,12, 7, 121, 30, 12, 26, 47, 28, 39, 14, 24, 30, 22, 41, 15, 30,6, 14, 121, 30, 6, 34, 47, 28, 46, 10, 24, 30, 2, 64, 15, 30,17, 4, 122, 30, 29, 14, 46, 28, 49, 10, 24, 30, 24, 46, 15, 30,4, 18, 122, 30, 13, 32, 46, 28, 48, 14, 24, 30, 42, 32, 15, 30,20, 4, 117, 30, 40, 7, 47, 28, 43, 22, 24, 30, 10, 67, 15, 30,19, 6, 118, 30, 18, 31, 47, 28, 34, 34, 24, 30, 20, 61, 15, 30];// Galois field log tablevar glog = [0xff, 0x00, 0x01, 0x19, 0x02, 0x32, 0x1a, 0xc6, 0x03, 0xdf, 0x33, 0xee, 0x1b, 0x68, 0xc7, 0x4b,0x04, 0x64, 0xe0, 0x0e, 0x34, 0x8d, 0xef, 0x81, 0x1c, 0xc1, 0x69, 0xf8, 0xc8, 0x08, 0x4c, 0x71,0x05, 0x8a, 0x65, 0x2f, 0xe1, 0x24, 0x0f, 0x21, 0x35, 0x93, 0x8e, 0xda, 0xf0, 0x12, 0x82, 0x45,0x1d, 0xb5, 0xc2, 0x7d, 0x6a, 0x27, 0xf9, 0xb9, 0xc9, 0x9a, 0x09, 0x78, 0x4d, 0xe4, 0x72, 0xa6,0x06, 0xbf, 0x8b, 0x62, 0x66, 0xdd, 0x30, 0xfd, 0xe2, 0x98, 0x25, 0xb3, 0x10, 0x91, 0x22, 0x88,0x36, 0xd0, 0x94, 0xce, 0x8f, 0x96, 0xdb, 0xbd, 0xf1, 0xd2, 0x13, 0x5c, 0x83, 0x38, 0x46, 0x40,0x1e, 0x42, 0xb6, 0xa3, 0xc3, 0x48, 0x7e, 0x6e, 0x6b, 0x3a, 0x28, 0x54, 0xfa, 0x85, 0xba, 0x3d,0xca, 0x5e, 0x9b, 0x9f, 0x0a, 0x15, 0x79, 0x2b, 0x4e, 0xd4, 0xe5, 0xac, 0x73, 0xf3, 0xa7, 0x57,0x07, 0x70, 0xc0, 0xf7, 0x8c, 0x80, 0x63, 0x0d, 0x67, 0x4a, 0xde, 0xed, 0x31, 0xc5, 0xfe, 0x18,0xe3, 0xa5, 0x99, 0x77, 0x26, 0xb8, 0xb4, 0x7c, 0x11, 0x44, 0x92, 0xd9, 0x23, 0x20, 0x89, 0x2e,0x37, 0x3f, 0xd1, 0x5b, 0x95, 0xbc, 0xcf, 0xcd, 0x90, 0x87, 0x97, 0xb2, 0xdc, 0xfc, 0xbe, 0x61,0xf2, 0x56, 0xd3, 0xab, 0x14, 0x2a, 0x5d, 0x9e, 0x84, 0x3c, 0x39, 0x53, 0x47, 0x6d, 0x41, 0xa2,0x1f, 0x2d, 0x43, 0xd8, 0xb7, 0x7b, 0xa4, 0x76, 0xc4, 0x17, 0x49, 0xec, 0x7f, 0x0c, 0x6f, 0xf6,0x6c, 0xa1, 0x3b, 0x52, 0x29, 0x9d, 0x55, 0xaa, 0xfb, 0x60, 0x86, 0xb1, 0xbb, 0xcc, 0x3e, 0x5a,0xcb, 0x59, 0x5f, 0xb0, 0x9c, 0xa9, 0xa0, 0x51, 0x0b, 0xf5, 0x16, 0xeb, 0x7a, 0x75, 0x2c, 0xd7,0x4f, 0xae, 0xd5, 0xe9, 0xe6, 0xe7, 0xad, 0xe8, 0x74, 0xd6, 0xf4, 0xea, 0xa8, 0x50, 0x58, 0xaf];// Galios field exponent tablevar gexp = [0x01, 0x02, 0x04, 0x08, 0x10, 0x20, 0x40, 0x80, 0x1d, 0x3a, 0x74, 0xe8, 0xcd, 0x87, 0x13, 0x26,0x4c, 0x98, 0x2d, 0x5a, 0xb4, 0x75, 0xea, 0xc9, 0x8f, 0x03, 0x06, 0x0c, 0x18, 0x30, 0x60, 0xc0,0x9d, 0x27, 0x4e, 0x9c, 0x25, 0x4a, 0x94, 0x35, 0x6a, 0xd4, 0xb5, 0x77, 0xee, 0xc1, 0x9f, 0x23,0x46, 0x8c, 0x05, 0x0a, 0x14, 0x28, 0x50, 0xa0, 0x5d, 0xba, 0x69, 0xd2, 0xb9, 0x6f, 0xde, 0xa1,0x5f, 0xbe, 0x61, 0xc2, 0x99, 0x2f, 0x5e, 0xbc, 0x65, 0xca, 0x89, 0x0f, 0x1e, 0x3c, 0x78, 0xf0,0xfd, 0xe7, 0xd3, 0xbb, 0x6b, 0xd6, 0xb1, 0x7f, 0xfe, 0xe1, 0xdf, 0xa3, 0x5b, 0xb6, 0x71, 0xe2,0xd9, 0xaf, 0x43, 0x86, 0x11, 0x22, 0x44, 0x88, 0x0d, 0x1a, 0x34, 0x68, 0xd0, 0xbd, 0x67, 0xce,0x81, 0x1f, 0x3e, 0x7c, 0xf8, 0xed, 0xc7, 0x93, 0x3b, 0x76, 0xec, 0xc5, 0x97, 0x33, 0x66, 0xcc,0x85, 0x17, 0x2e, 0x5c, 0xb8, 0x6d, 0xda, 0xa9, 0x4f, 0x9e, 0x21, 0x42, 0x84, 0x15, 0x2a, 0x54,0xa8, 0x4d, 0x9a, 0x29, 0x52, 0xa4, 0x55, 0xaa, 0x49, 0x92, 0x39, 0x72, 0xe4, 0xd5, 0xb7, 0x73,0xe6, 0xd1, 0xbf, 0x63, 0xc6, 0x91, 0x3f, 0x7e, 0xfc, 0xe5, 0xd7, 0xb3, 0x7b, 0xf6, 0xf1, 0xff,0xe3, 0xdb, 0xab, 0x4b, 0x96, 0x31, 0x62, 0xc4, 0x95, 0x37, 0x6e, 0xdc, 0xa5, 0x57, 0xae, 0x41,0x82, 0x19, 0x32, 0x64, 0xc8, 0x8d, 0x07, 0x0e, 0x1c, 0x38, 0x70, 0xe0, 0xdd, 0xa7, 0x53, 0xa6,0x51, 0xa2, 0x59, 0xb2, 0x79, 0xf2, 0xf9, 0xef, 0xc3, 0x9b, 0x2b, 0x56, 0xac, 0x45, 0x8a, 0x09,0x12, 0x24, 0x48, 0x90, 0x3d, 0x7a, 0xf4, 0xf5, 0xf7, 0xf3, 0xfb, 0xeb, 0xcb, 0x8b, 0x0b, 0x16,0x2c, 0x58, 0xb0, 0x7d, 0xfa, 0xe9, 0xcf, 0x83, 0x1b, 0x36, 0x6c, 0xd8, 0xad, 0x47, 0x8e, 0x00];// Working buffers:// data input and ecc append, image working buffer, fixed part of image, run lengths for badnessvar strinbuf = [], eccbuf = [], qrframe = [], framask = [], rlens = [];// Control values - width is based on version, last 4 are from table.var version, width, neccblk1, neccblk2, datablkw, eccblkwid;var ecclevel = 2;// set bit to indicate cell in qrframe is immutable.  symmetric around diagonalfunction setmask(x, y) {var bt;if (x > y) {bt = x;x = y;y = bt;}// y*y = 1+3+5...bt = y;bt *= y;bt += y;bt >>= 1;bt += x;framask[bt] = 1;}// enter alignment pattern - black to qrframe, white to mask (later black frame merged to mask)function putalign(x, y) {var j;qrframe[x + width * y] = 1;for (j = -2; j < 2; j++) {qrframe[(x + j) + width * (y - 2)] = 1;qrframe[(x - 2) + width * (y + j + 1)] = 1;qrframe[(x + 2) + width * (y + j)] = 1;qrframe[(x + j + 1) + width * (y + 2)] = 1;}for (j = 0; j < 2; j++) {setmask(x - 1, y + j);setmask(x + 1, y - j);setmask(x - j, y - 1);setmask(x + j, y + 1);}}//========================================================================// Reed Solomon error correction// exponentiation mod Nfunction modnn(x) {while (x >= 255) {x -= 255;x = (x >> 8) + (x & 255);}return x;}var genpoly = [];// Calculate and append ECC data to data block.  Block is in strinbuf, indexes to buffers given.function appendrs(data, dlen, ecbuf, eclen) {var i, j, fb;for (i = 0; i < eclen; i++)strinbuf[ecbuf + i] = 0;for (i = 0; i < dlen; i++) {fb = glog[strinbuf[data + i] ^ strinbuf[ecbuf]];if (fb != 255)     /* fb term is non-zero */for (j = 1; j < eclen; j++)strinbuf[ecbuf + j - 1] = strinbuf[ecbuf + j] ^ gexp[modnn(fb + genpoly[eclen - j])];elsefor (j = ecbuf; j < ecbuf + eclen; j++)strinbuf[j] = strinbuf[j + 1];strinbuf[ecbuf + eclen - 1] = fb == 255 ? 0 : gexp[modnn(fb + genpoly[0])];}}//========================================================================// Frame data insert following the path rules// check mask - since symmetrical use half.function ismasked(x, y) {var bt;if (x > y) {bt = x;x = y;y = bt;}bt = y;bt += y * y;bt >>= 1;bt += x;return framask[bt];}//========================================================================//  Apply the selected mask out of the 8.function applymask(m) {var x, y, r3x, r3y;switch (m) {case 0:for (y = 0; y < width; y++)for (x = 0; x < width; x++)if (!((x + y) & 1) && !ismasked(x, y))qrframe[x + y * width] ^= 1;break;case 1:for (y = 0; y < width; y++)for (x = 0; x < width; x++)if (!(y & 1) && !ismasked(x, y))qrframe[x + y * width] ^= 1;break;case 2:for (y = 0; y < width; y++)for (r3x = 0, x = 0; x < width; x++ , r3x++) {if (r3x == 3)r3x = 0;if (!r3x && !ismasked(x, y))qrframe[x + y * width] ^= 1;}break;case 3:for (r3y = 0, y = 0; y < width; y++ , r3y++) {if (r3y == 3)r3y = 0;for (r3x = r3y, x = 0; x < width; x++ , r3x++) {if (r3x == 3)r3x = 0;if (!r3x && !ismasked(x, y))qrframe[x + y * width] ^= 1;}}break;case 4:for (y = 0; y < width; y++)for (r3x = 0, r3y = ((y >> 1) & 1), x = 0; x < width; x++ , r3x++) {if (r3x == 3) {r3x = 0;r3y = !r3y;}if (!r3y && !ismasked(x, y))qrframe[x + y * width] ^= 1;}break;case 5:for (r3y = 0, y = 0; y < width; y++ , r3y++) {if (r3y == 3)r3y = 0;for (r3x = 0, x = 0; x < width; x++ , r3x++) {if (r3x == 3)r3x = 0;if (!((x & y & 1) + !(!r3x | !r3y)) && !ismasked(x, y))qrframe[x + y * width] ^= 1;}}break;case 6:for (r3y = 0, y = 0; y < width; y++ , r3y++) {if (r3y == 3)r3y = 0;for (r3x = 0, x = 0; x < width; x++ , r3x++) {if (r3x == 3)r3x = 0;if (!(((x & y & 1) + (r3x && (r3x == r3y))) & 1) && !ismasked(x, y))qrframe[x + y * width] ^= 1;}}break;case 7:for (r3y = 0, y = 0; y < width; y++ , r3y++) {if (r3y == 3)r3y = 0;for (r3x = 0, x = 0; x < width; x++ , r3x++) {if (r3x == 3)r3x = 0;if (!(((r3x && (r3x == r3y)) + ((x + y) & 1)) & 1) && !ismasked(x, y))qrframe[x + y * width] ^= 1;}}break;}return;}// Badness coefficients.var N1 = 3, N2 = 3, N3 = 40, N4 = 10;// Using the table of the length of each run, calculate the amount of bad image // - long runs or those that look like finders; called twice, once each for X and Yfunction badruns(length) {var i;var runsbad = 0;for (i = 0; i <= length; i++)if (rlens[i] >= 5)runsbad += N1 + rlens[i] - 5;// BwBBBwB as in finderfor (i = 3; i < length - 1; i += 2)if (rlens[i - 2] == rlens[i + 2]&& rlens[i + 2] == rlens[i - 1]&& rlens[i - 1] == rlens[i + 1]&& rlens[i - 1] * 3 == rlens[i]// white around the black pattern? Not part of spec&& (rlens[i - 3] == 0 // beginning|| i + 3 > length  // end|| rlens[i - 3] * 3 >= rlens[i] * 4 || rlens[i + 3] * 3 >= rlens[i] * 4))runsbad += N3;return runsbad;}// Calculate how bad the masked image is - blocks, imbalance, runs, or finders.function badcheck() {var x, y, h, b, b1;var thisbad = 0;var bw = 0;// blocks of same color.for (y = 0; y < width - 1; y++)for (x = 0; x < width - 1; x++)if ((qrframe[x + width * y] && qrframe[(x + 1) + width * y]&& qrframe[x + width * (y + 1)] && qrframe[(x + 1) + width * (y + 1)]) // all black|| !(qrframe[x + width * y] || qrframe[(x + 1) + width * y]|| qrframe[x + width * (y + 1)] || qrframe[(x + 1) + width * (y + 1)])) // all whitethisbad += N2;// X runsfor (y = 0; y < width; y++) {rlens[0] = 0;for (h = b = x = 0; x < width; x++) {if ((b1 = qrframe[x + width * y]) == b)rlens[h]++;elserlens[++h] = 1;b = b1;bw += b ? 1 : -1;}thisbad += badruns(h);}// black/white imbalanceif (bw < 0)bw = -bw;var big = bw;var count = 0;big += big << 2;big <<= 1;while (big > width * width)big -= width * width, count++;thisbad += count * N4;// Y runsfor (x = 0; x < width; x++) {rlens[0] = 0;for (h = b = y = 0; y < width; y++) {if ((b1 = qrframe[x + width * y]) == b)rlens[h]++;elserlens[++h] = 1;b = b1;}thisbad += badruns(h);}return thisbad;}function genframe(instring) {var x, y, k, t, v, i, j, m;// find the smallest version that fits the stringt = instring.length;version = 0;do {version++;k = (ecclevel - 1) * 4 + (version - 1) * 16;neccblk1 = eccblocks[k++];neccblk2 = eccblocks[k++];datablkw = eccblocks[k++];eccblkwid = eccblocks[k];k = datablkw * (neccblk1 + neccblk2) + neccblk2 - 3 + (version <= 9);if (t <= k)break;} while (version < 40);// FIXME - insure that it fits insted of being truncatedwidth = 17 + 4 * version;// allocate, clear and setup data structuresv = datablkw + (datablkw + eccblkwid) * (neccblk1 + neccblk2) + neccblk2;for (t = 0; t < v; t++)eccbuf[t] = 0;strinbuf = instring.slice(0);for (t = 0; t < width * width; t++)qrframe[t] = 0;for (t = 0; t < (width * (width + 1) + 1) / 2; t++)framask[t] = 0;// insert finders - black to frame, white to maskfor (t = 0; t < 3; t++) {k = 0;y = 0;if (t == 1)k = (width - 7);if (t == 2)y = (width - 7);qrframe[(y + 3) + width * (k + 3)] = 1;for (x = 0; x < 6; x++) {qrframe[(y + x) + width * k] = 1;qrframe[y + width * (k + x + 1)] = 1;qrframe[(y + 6) + width * (k + x)] = 1;qrframe[(y + x + 1) + width * (k + 6)] = 1;}for (x = 1; x < 5; x++) {setmask(y + x, k + 1);setmask(y + 1, k + x + 1);setmask(y + 5, k + x);setmask(y + x + 1, k + 5);}for (x = 2; x < 4; x++) {qrframe[(y + x) + width * (k + 2)] = 1;qrframe[(y + 2) + width * (k + x + 1)] = 1;qrframe[(y + 4) + width * (k + x)] = 1;qrframe[(y + x + 1) + width * (k + 4)] = 1;}}// alignment blocksif (version > 1) {t = adelta[version];y = width - 7;for (; ;) {x = width - 7;while (x > t - 3) {putalign(x, y);if (x < t)break;x -= t;}if (y <= t + 9)break;y -= t;putalign(6, y);putalign(y, 6);}}// single blackqrframe[8 + width * (width - 8)] = 1;// timing gap - mask onlyfor (y = 0; y < 7; y++) {setmask(7, y);setmask(width - 8, y);setmask(7, y + width - 7);}for (x = 0; x < 8; x++) {setmask(x, 7);setmask(x + width - 8, 7);setmask(x, width - 8);}// reserve mask-format areafor (x = 0; x < 9; x++)setmask(x, 8);for (x = 0; x < 8; x++) {setmask(x + width - 8, 8);setmask(8, x);}for (y = 0; y < 7; y++)setmask(8, y + width - 7);// timing row/colfor (x = 0; x < width - 14; x++)if (x & 1) {setmask(8 + x, 6);setmask(6, 8 + x);}else {qrframe[(8 + x) + width * 6] = 1;qrframe[6 + width * (8 + x)] = 1;}// version blockif (version > 6) {t = vpat[version - 7];k = 17;for (x = 0; x < 6; x++)for (y = 0; y < 3; y++ , k--)if (1 & (k > 11 ? version >> (k - 12) : t >> k)) {qrframe[(5 - x) + width * (2 - y + width - 11)] = 1;qrframe[(2 - y + width - 11) + width * (5 - x)] = 1;}else {setmask(5 - x, 2 - y + width - 11);setmask(2 - y + width - 11, 5 - x);}}// sync mask bits - only set above for white spaces, so add in black bitsfor (y = 0; y < width; y++)for (x = 0; x <= y; x++)if (qrframe[x + width * y])setmask(x, y);// convert string to bitstream// 8 bit data to QR-coded 8 bit data (numeric or alphanum, or kanji not supported)v = strinbuf.length;// string to arrayfor (i = 0; i < v; i++)eccbuf[i] = strinbuf.charCodeAt(i);strinbuf = eccbuf.slice(0);// calculate max string lengthx = datablkw * (neccblk1 + neccblk2) + neccblk2;if (v >= x - 2) {v = x - 2;if (version > 9)v--;}// shift and repack to insert length prefixi = v;if (version > 9) {strinbuf[i + 2] = 0;strinbuf[i + 3] = 0;while (i--) {t = strinbuf[i];strinbuf[i + 3] |= 255 & (t << 4);strinbuf[i + 2] = t >> 4;}strinbuf[2] |= 255 & (v << 4);strinbuf[1] = v >> 4;strinbuf[0] = 0x40 | (v >> 12);}else {strinbuf[i + 1] = 0;strinbuf[i + 2] = 0;while (i--) {t = strinbuf[i];strinbuf[i + 2] |= 255 & (t << 4);strinbuf[i + 1] = t >> 4;}strinbuf[1] |= 255 & (v << 4);strinbuf[0] = 0x40 | (v >> 4);}// fill to end with pad patterni = v + 3 - (version < 10);while (i < x) {strinbuf[i++] = 0xec;// buffer has room    if (i == x)      break;strinbuf[i++] = 0x11;}// calculate and append ECC// calculate generator polynomialgenpoly[0] = 1;for (i = 0; i < eccblkwid; i++) {genpoly[i + 1] = 1;for (j = i; j > 0; j--)genpoly[j] = genpoly[j]? genpoly[j - 1] ^ gexp[modnn(glog[genpoly[j]] + i)] : genpoly[j - 1];genpoly[0] = gexp[modnn(glog[genpoly[0]] + i)];}for (i = 0; i <= eccblkwid; i++)genpoly[i] = glog[genpoly[i]]; // use logs for genpoly[] to save calc step// append ecc to data bufferk = x;y = 0;for (i = 0; i < neccblk1; i++) {appendrs(y, datablkw, k, eccblkwid);y += datablkw;k += eccblkwid;}for (i = 0; i < neccblk2; i++) {appendrs(y, datablkw + 1, k, eccblkwid);y += datablkw + 1;k += eccblkwid;}// interleave blocksy = 0;for (i = 0; i < datablkw; i++) {for (j = 0; j < neccblk1; j++)eccbuf[y++] = strinbuf[i + j * datablkw];for (j = 0; j < neccblk2; j++)eccbuf[y++] = strinbuf[(neccblk1 * datablkw) + i + (j * (datablkw + 1))];}for (j = 0; j < neccblk2; j++)eccbuf[y++] = strinbuf[(neccblk1 * datablkw) + i + (j * (datablkw + 1))];for (i = 0; i < eccblkwid; i++)for (j = 0; j < neccblk1 + neccblk2; j++)eccbuf[y++] = strinbuf[x + i + j * eccblkwid];strinbuf = eccbuf;// pack bits into frame avoiding masked area.x = y = width - 1;k = v = 1;         // up, minus/* inteleaved data and ecc codes */m = (datablkw + eccblkwid) * (neccblk1 + neccblk2) + neccblk2;for (i = 0; i < m; i++) {t = strinbuf[i];for (j = 0; j < 8; j++ , t <<= 1) {if (0x80 & t)qrframe[x + width * y] = 1;do {        // find next fill positionif (v)x--;else {x++;if (k) {if (y != 0)y--;else {x -= 2;k = !k;if (x == 6) {x--;y = 9;}}}else {if (y != width - 1)y++;else {x -= 2;k = !k;if (x == 6) {x--;y -= 8;}}}}v = !v;} while (ismasked(x, y));}}// save pre-mask copy of framestrinbuf = qrframe.slice(0);t = 0;           // besty = 30000;         // demerit// for instead of while since in original arduino code// if an early mask was "good enough" it wouldn't try for a better one// since they get more complex and take longer.for (k = 0; k < 8; k++) {applymask(k);      // returns black-white imbalancex = badcheck();if (x < y) { // current mask better than previous best?y = x;t = k;}if (t == 7)break;       // don't increment i to a void redoing maskqrframe = strinbuf.slice(0); // reset for next pass}if (t != k)         // redo best mask - none good enough, last wasn't tapplymask(t);// add in final mask/ecclevel bytesy = fmtword[t + ((ecclevel - 1) << 3)];// low bytefor (k = 0; k < 8; k++ , y >>= 1)if (y & 1) {qrframe[(width - 1 - k) + width * 8] = 1;if (k < 6)qrframe[8 + width * k] = 1;elseqrframe[8 + width * (k + 1)] = 1;}// high bytefor (k = 0; k < 7; k++ , y >>= 1)if (y & 1) {qrframe[8 + width * (width - 7 + k)] = 1;if (k)qrframe[(6 - k) + width * 8] = 1;elseqrframe[7 + width * 8] = 1;}return qrframe;}var _canvas = null;var api = {get ecclevel() {return ecclevel;},set ecclevel(val) {ecclevel = val;},get size() {return _size;},set size(val) {_size = val},get canvas() {return _canvas;},set canvas(el) {_canvas = el;},getFrame: function (string) {return genframe(string);},//这里的utf16to8(str)是对Text中的字符串进行转码，让其支持中文utf16to8: function (str) {var out, i, len, c;out = "";len = str.length;for (i = 0; i < len; i++) {c = str.charCodeAt(i);if ((c >= 0x0001) && (c <= 0x007F)) {out += str.charAt(i);} else if (c > 0x07FF) {out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));} else {out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));}}return out;},/*** 新增$this参数，传入组件的this,兼容在组件中生成* @param bg 目前只能设置颜色值*/ draw: function (str, ctx, startX, startY, cavW, cavH, bg, color, $this, ecc) {var that = this;ecclevel = ecc || ecclevel;if (!ctx) {console.warn('No canvas provided to draw QR code in!')return;}var size = Math.min(cavW, cavH);str = that.utf16to8(str);//增加中文显示var frame = that.getFrame(str);var px = size / width;if (bg) {ctx.setFillStyle(bg)ctx.fillRect(startX, startY, cavW, cavW);}ctx.setFillStyle(color || 'black');for (var i = 0; i < width; i++) {for (var j = 0; j < width; j++) {if (frame[j * width + i]) {ctx.fillRect(startX + px * i, startY + px * j, px, px);}}}}}module.exports = { api }// exports.draw = api;})();


function isValidUrl(url) {return /(ht|f)tp(s?):\/\/([^ \\/]*\.)+[^ \\/]*(:[0-9]+)?\/?/.test(url);
}/*** 深度对比两个对象是否一致* from: https://github.com/epoberezkin/fast-deep-equal* @param  {Object} a 对象a* @param  {Object} b 对象b* @return {Boolean}   是否相同*/
/* eslint-disable */
function equal(a, b) {if (a === b) return true;if (a && b && typeof a == 'object' && typeof b == 'object') {var arrA = Array.isArray(a), arrB = Array.isArray(b), i, length, key;if (arrA && arrB) {length = a.length;if (length != b.length) return false;for (i = length; i-- !== 0;)if (!equal(a[i], b[i])) return false;return true;}if (arrA != arrB) return false;var dateA = a instanceof Date, dateB = b instanceof Date;if (dateA != dateB) return false;if (dateA && dateB) return a.getTime() == b.getTime();var regexpA = a instanceof RegExp, regexpB = b instanceof RegExp;if (regexpA != regexpB) return false;if (regexpA && regexpB) return a.toString() == b.toString();var keys = Object.keys(a);length = keys.length;if (length !== Object.keys(b).length)return false;for (i = length; i-- !== 0;)if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;for (i = length; i-- !== 0;) {key = keys[i];if (!equal(a[key], b[key])) return false;}return true;}return a!==a && b!==b;
}module.exports = {isValidUrl,equal
};

painter部分

import Pen from './lib/pen';
import Downloader from './lib/downloader';const util = require('./lib/util');const downloader = new Downloader();// 最大尝试的绘制次数
const MAX_PAINT_COUNT = 5;
Component({canvasWidthInPx: 0,canvasHeightInPx: 0,paintCount: 0,/*** 组件的属性列表*/properties: {customStyle: {type: String,},palette: {type: Object,observer: function (newVal, oldVal) {if (this.isNeedRefresh(newVal, oldVal)) {this.paintCount = 0;this.startPaint();}},},// 启用脏检查，默认 falsedirty: {type: Boolean,value: false,},},data: {picURL: '',showCanvas: true,painterStyle: '',},attached() {setStringPrototype();},methods: {/*** 判断一个 object 是否为 空* @param {object} object*/isEmpty(object) {for (const i in object) {return false;}return true;},isNeedRefresh(newVal, oldVal) {if (!newVal || this.isEmpty(newVal) || (this.data.dirty && util.equal(newVal, oldVal))) {return false;}return true;},startPaint() {if (this.isEmpty(this.properties.palette)) {return;}if (!(getApp().systemInfo && getApp().systemInfo.screenWidth)) {try {getApp().systemInfo = wx.getSystemInfoSync();} catch (e) {const error = `Painter get system info failed, ${JSON.stringify(e)}`;that.triggerEvent('imgErr', { error: error });console.log(error);return;}}screenK = getApp().systemInfo.screenWidth / 750;this.downloadImages().then((palette) => {const { width, height } = palette;this.canvasWidthInPx = width.toPx();this.canvasHeightInPx = height.toPx();if (!width || !height) {console.log(`You should set width and height correctly for painter, width: ${width}, height: ${height}`);return;}this.setData({painterStyle: `width:${width};height:${height};`,});const ctx = wx.createCanvasContext('k-canvas', this);const pen = new Pen(ctx, palette);pen.paint(() => {this.saveImgToLocal();});});},downloadImages() {return new Promise((resolve, reject) => {let preCount = 0;let completeCount = 0;const paletteCopy = JSON.parse(JSON.stringify(this.properties.palette));if (paletteCopy.background) {preCount++;downloader.download(paletteCopy.background).then((path) => {paletteCopy.background = path;completeCount++;if (preCount === completeCount) {resolve(paletteCopy);}}, () => {completeCount++;if (preCount === completeCount) {resolve(paletteCopy);}});}if (paletteCopy.views) {let that = thisfor (const view of paletteCopy.views) {if (view && view.type === 'image' && view.url) {preCount++;/* eslint-disable no-loop-func */downloader.download(view.url).then((path) => {view.url = path;wx.getImageInfo({src: view.url,success: (res) => {// 获得一下图片信息，供后续裁减使用view.sWidth = res.width;view.sHeight = res.height;},fail: (error) => {console.log(`imgDownloadErr failed, ${JSON.stringify(error)}`);that.triggerEvent('imgDownloadErr', { error: error });},complete: () => {completeCount++;if (preCount === completeCount) {resolve(paletteCopy);}},});}, () => {completeCount++;if (preCount === completeCount) {resolve(paletteCopy);}});}}}if (preCount === 0) {resolve(paletteCopy);}});},saveImgToLocal() {const that = this;setTimeout(() => {wx.canvasToTempFilePath({canvasId: 'k-canvas',success: function (res) {that.getImageInfo(res.tempFilePath);},fail: function (error) {console.log(`canvasToTempFilePath failed, ${JSON.stringify(error)}`);that.triggerEvent('imgErr', { error: error });},}, this);}, 300);},getImageInfo(filePath) {const that = this;wx.getImageInfo({src: filePath,success: (infoRes) => {if (that.paintCount > MAX_PAINT_COUNT) {const error = `The result is always fault, even we tried ${MAX_PAINT_COUNT} times`;console.log(error);that.triggerEvent('imgErr', { error: error });return;}// 比例相符时才证明绘制成功，否则进行强制重绘制if (Math.abs((infoRes.width * that.canvasHeightInPx - that.canvasWidthInPx * infoRes.height) / (infoRes.height * that.canvasHeightInPx)) < 0.01) {that.triggerEvent('imgOK', { path: filePath });} else {that.startPaint();}that.paintCount++;},fail: (error) => {console.log(`getImageInfo failed, ${JSON.stringify(error)}`);that.triggerEvent('imgErr', { error: error });},});},},
});let screenK = 0.5;function setStringPrototype() {/* eslint-disable no-extend-native *//*** 是否支持负数* @param {Boolean} minus 是否支持负数*/String.prototype.toPx = function toPx(minus) {let reg;if (minus) {reg = /^-?[0-9]+([.]{1}[0-9]+){0,1}(rpx|px)$/g;} else {reg = /^[0-9]+([.]{1}[0-9]+){0,1}(rpx|px)$/g;}const results = reg.exec(this);if (!this || !results) {console.log(`The size: ${this} is illegal`);return 0;}const unit = results[2];const value = parseFloat(this);let res = 0;if (unit === 'rpx') {res = Math.round(value * screenK);} else if (unit === 'px') {res = value;}return res;};
}
{"component": true,"usingComponents": {}
}

<canvas canvas-id="k-canvas" style="{{painterStyle}}{{customStyle}}" />

3、shareBox

Component({properties: {//属性值可以在组件使用时指定isCanDraw: {type: Boolean,value: false,observer(newVal, oldVal) {newVal && this.drawPic()}}},data: {isModal: false, //是否显示拒绝保存图片后的弹窗imgDraw: {}, //绘制图片的大对象sharePath: '', //生成的分享图visible: false},methods: {handlePhotoSaved() {this.savePhoto(this.data.sharePath)},handleClose() {this.setData({visible: false})},drawPic() {if (this.data.sharePath) { //如果已经绘制过了本地保存有图片不需要重新绘制this.setData({visible: true})this.triggerEvent('initData') return}wx.showLoading({title: '生成中'})this.setData({imgDraw: {width: '750rpx',height: '1334rpx',background: 'https://cdn.nlark.com/yuque/0/2020/png/1252071/1586359267074-3d9d4922-d473-49db-8b14-e43d1d7d3e1a.png',views: [{type: 'image',url: 'https://cdn.nlark.com/yuque/0/2020/jpeg/1252071/1586359160786-8d5b7738-3ad3-43e7-bf0a-738c58365645.jpeg',//头图css: {top: '32rpx',left: '30rpx',right: '32rpx',width: '688rpx',height: '420rpx',borderRadius: '16rpx'},},{type: 'image',url: wx.getStorageSync('avatarUrl') || 'https://cdn.nlark.com/yuque/0/2020/png/1252071/1586358984220-88e904c6-345e-4d21-9960-6f26aaa85043.png',//用户头像css: {top: '404rpx',left: '328rpx',width: '96rpx',height: '96rpx',borderWidth: '6rpx',borderColor: '#FFF',borderRadius: '96rpx'}},{type: 'text',text: wx.getStorageSync('nickName') || '匿名用户',css: {top: '532rpx',fontSize: '28rpx',left: '375rpx',align: 'center',color: '#3c3c3c'}},{type: 'text',text: `邀请您参与助力活动`,css: {top: '576rpx',left: '375rpx',align: 'center',fontSize: '28rpx',color: '#3c3c3c'}},{type: 'text',text: `这是一个view转canvas绘制的示例`,css: {top: '644rpx',left: '375rpx',maxLines: 1,align: 'center',fontWeight: 'bold',fontSize: '44rpx',color: '#3c3c3c'}},{type: 'image',url: 'https://cdn.nlark.com/yuque/0/2020/jpeg/1252071/1586358913137-22be603f-99b1-4349-98bd-961d369b89e7.jpeg',//小程序码css: {top: '834rpx',left: '470rpx',width: '200rpx',height: '200rpx'}}]}})},onImgErr(e) {wx.hideLoading()wx.showToast({title: '生成分享图失败，请刷新页面重试'})},onImgOK(e) {wx.hideLoading()this.setData({sharePath: e.detail.path,visible: true,})//通知外部绘制完成，重置isCanDraw为falsethis.triggerEvent('initData') },preventDefault() { },// 保存图片savePhoto(path) {wx.showLoading({title: '正在保存...',mask: true})this.setData({isDrawImage: false})wx.saveImageToPhotosAlbum({filePath: path,success: (res) => {wx.showToast({title: '保存成功',icon: 'none'})setTimeout(() => {this.setData({visible: false})}, 300)},fail: (res) => {wx.getSetting({success: res => {let authSetting = res.authSettingif (!authSetting['scope.writePhotosAlbum']) {this.setData({isModal: true})}}})setTimeout(() => {wx.hideLoading()this.setData({visible: false})}, 300)}})}}
})
{"component": true,"usingComponents": {"painter": "../painter/painter","dialog-modal": "../dialogModal/index"}
}

<view class="share-wrap" wx:if="{{visible}}" catchtouchmove="preventDefault"><view class="share-back"></view><view class="share-container"><view class="close" bindtap="handleClose" data-ptpid="ebe9-1656-ad6a-462e"></view><image mode="widthFix" src="{{sharePath}}" class="share-image" /><view class="share-tips">保存图片，叫伙伴们来参与吧</view><view class="save-btn" bindtap="handlePhotoSaved" data-ptpid="4095-16fd-bc97-4868"></view></view>
</view>
<painter style="position: absolute; top: -9999rpx;" palette="{{imgDraw}}" bind:imgOK="onImgOK" />
<dialog-modal isShow="{{isModal}}" title="提示" content="您未开启保存图片到相册的权限，请点击确定去开启权限！" confirmType="openSetting" />
.share-wrap {width: 100%;
}.share-back {width: 100%;height: 100%;background: rgba(0, 0, 0, 0.6);position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 888;
}.share-container {width: 100%;background: #FFF;position: fixed;bottom: 0;left: 0;right: 0;z-index: 999;
}.close {width: 30rpx;height: 30rpx;overflow: hidden;position: absolute;right: 64rpx;top: 64rpx;
}.close::after {transform: rotate(-45deg);
}.close::before {transform: rotate(45deg);
}.close::before,
.close::after {content: '';position: absolute;height: 3rpx;width: 100%;top: 50%;left: 0;margin-top: -2rpx;background: #9C9C9C;
}.share-image {width: 420rpx;margin: 66rpx auto 0;display: block;border-radius: 16rpx;box-shadow: 0px 4rpx 8px 0px rgba(0, 0, 0, 0.1);
}.share-tips {width: 100%;text-align: center;color: #3C3C3C;font-size: 28rpx;margin: 32rpx 0;
}.save-btn {width: 336rpx;height: 96rpx;margin: 0 auto 94rpx;background: url('https://qiniu-image.qtshe.com/20190506save-btn.png') center center;background-size: 100% 100%;
}

2.组件的使用

const app = getApp()Page({data: {nickName: '',avatarUrl: '',isCanDraw: false},onLoad() {this.setData({nickName: wx.getStorageSync('nickName') || '',avatarUrl: wx.getStorageSync('avatarUrl') || ''})},getUserInfo(e) {this.setData({nickName: e.detail.userInfo.nickName,avatarUrl: e.detail.userInfo.avatarUrl})wx.setStorageSync('avatarUrl', e.detail.userInfo.avatarUrl)wx.setStorageSync('nickName', e.detail.userInfo.nickName)},createShareImage() {this.setData({isCanDraw: !this.data.isCanDraw})},
})
{"usingComponents": {"share-box": "./components/shareBox/index"}
}

<view class="section"><!-- 生成分享图，将view转绘为图片 --><button type="primary" class="intro" open-type="getUserInfo" bindgetuserinfo="getUserInfo" wx:if="{{!nickName}}">获取分享图头像昵称</button><button type="primary" class="intro" bindtap="createShareImage" wx:else>点我生成分享图</button><share-box isCanDraw="{{isCanDraw}}" bind:initData="createShareImage" />
</view>

3.效果

4.第三方工具的使用

安装包：npm install --save wxml-to-canvas

引入组件

"usingComponents": {"wxml-to-canvas": "wxml-to-canvas"
}

demo.js

const wxml = `
<view class="container" ><view class="item-box red"></view><view class="item-box green" ><text class="text">yeah!</text></view><view class="item-box blue"><image class="img" src="https://cdn.nlark.com/yuque/0/2020/png/1252071/1590050624644-dd5948db-22fe-48d9-af37-8a2a9f099715.png"></image></view>
</view>
`const style = {container: {width: 300,height: 200,flexDirection: 'row',justifyContent: 'space-around',backgroundColor: '#ccc',alignItems: 'center',},itemBox: {width: 80,height: 60,},red: {backgroundColor: '#ff0000'},green: {backgroundColor: '#00ff00'},blue: {backgroundColor: '#0000ff',alignItems: 'center',justifyContent: 'center',},text: {width: 80,height: 60,textAlign: 'center',verticalAlign: 'middle',},img: {width: 40,height: 40,borderRadius: 20,}
}module.exports = {wxml,style
}

wxml

<!-- wxml -->
<view class="page-section"><view class="page-section-title">wxml</view><view class="container" ><view class="item-box red"></view><view class="item-box green" ><text class="text">yeah!</text></view><view class="item-box blue"><image class="img" src="https://cdn.nlark.com/yuque/0/2020/png/1252071/1590050624644-dd5948db-22fe-48d9-af37-8a2a9f099715.png"></image></view></view>
</view><!--  -->
<!-- 渲染wxml -->
<view class="page-section"><view class="page-section-title">渲染wxml</view><!-- 组件 --><wxml-to-canvas class="widget"></wxml-to-canvas><view class="page-section-title">导出图片</view><!-- 图片 --><image src="{{src}}" style="width: {{width}}px; height: {{height}}px"></image>
</view><!-- btns -->
<view class="btn-area"><button type="primary" bindtap="renderToCanvas">渲染到canvas</button><button bindtap="extraImage">导出图片</button><button bindtap="onTapSaveBtn">保存图片</button>
</view>

js

const { wxml, style } = require('./demo')
Page({data: {src: ''},onLoad() {this.widget = this.selectComponent('.widget')},onTapSaveBtn(e){wx.saveImageToPhotosAlbum({filePath:this.data.src,complete(res) { console.log(res)}})},renderToCanvas() {const p1 = this.widget.renderToCanvas({ wxml, style })p1.then((res) => {console.log('container', res.layoutBox)this.container = res})},extraImage() {const p2 = this.widget.canvasToTempFilePath()p2.then(res => {this.setData({src: res.tempFilePath,width: this.container.layoutBox.width,height: this.container.layoutBox.height})})}
})

wxss

.widget {}.container {width: 300px;height: 200px;min-height: 200px;flex-direction: row;justify-content: space-around;background-color: #ccc;align-items: center;padding: 60px 0 60px;display: flex;
}
.item-box {width: 80px;height: 60px;display: flex;
}
.red{background-color: #ff0000
}
.green {background-color: #00ff00
}
.blue{background-color: #0000ff;align-items: center;justify-content: center;
}
.text{width: 80px;height: 60px;text-align: center;vertical-align: middle;line-height: 60px;
}
.img{width: 40px;height: 40px;border-radius: 50%;
}

效果

【愚公系列】2022年08月 微信小程序-view生成分享图片相关推荐

  1. 【愚公系列】2022年08月 微信小程序-(rich-text)富文本和(text)文本的详解

    文章目录 前言 一.富文本使用 1.富文本的基本使用 2.富文本中预览图片 2.1 原生使用 2.2 组件封装使用 2.2.1 组件封装 2.2.2 组件使用 二.文本 1.文本属性 前言 富文本格式 ...

  2. 【愚公系列】2022年08月 微信小程序项目篇-抽奖轮盘

    文章目录 前言 一.抽奖轮盘 1.标题布局 1.1 CSS 1.2 HTML 1.4 效果 2.轮盘布局 2.1 CSS 2.2 HTML 2.3 效果 3.轮盘分割 3.1 CSS 3.2 HTML ...

  3. 【愚公系列】2022年08月 微信小程序-icon图标详解

    文章目录 前言 一.自带图标 二.实现图标的五种方案 1.图片 2.精灵图 3.CSS绘图 4.矢量字体 4.1 使用步骤 5.SVG格式 前言 在小程序中经常会用到各种各样的图标,如果这些图标都使用 ...

  4. 【愚公系列】2022年08月 微信小程序-左划删除效果实现

    文章目录 前言 一.左划删除效果实现 1.自定义实现 2.第三方组件实现 2.1 第三方包安装 2.2 使用 3.1 weui方式使用 3.1 weui安装 3.2 使用 前言 左划删除效果实现主要用 ...

  5. 【愚公系列】2022年08月 微信小程序-纵向和横向选项卡功能实现

    文章目录 前言 一.纵向选项卡(weui版) 1.安装包 2.使用 二.横向选项卡(weui版) 1.安装包 2.使用 前言 纵向选项卡(vtabs)用于让用户在不同的视图中进行切换. 以下讲解的是w ...

  6. 微信小程序实现生成分享海报案例

    一.引入插件painter (1)克隆地址:https://gitcode.net/mirrors/Kujiale-Mobile/Painter (2)下载的painter放到小程序的componen ...

  7. 【愚公系列】2022年10月 微信小程序-电商项目-微信支付后端功能实现（node版）

    文章目录 前言 一.微信支付后端功能实现(node版) 1.相关文档 2.项目配置 前言 微信支付是腾讯集团旗下的第三方支付平台,致力于为用户和企业提供安全.便捷.专业的在线支付服务.以"微 ...

  8. 【愚公系列】2022年09月 微信小程序-微信小程序实现网页一键登录功能

    文章目录 前言 一.微信小程序实现网页一键登录功能 1.旧版登录方法 2.新版登录方法 二.相关第三方包源码 前言 如果微信小程序要获取微信登录的用户信息,需要拿到code去后台换取用户信息,具体步骤 ...

  9. 【愚公系列】2022年02月 微信小程序-数据绑定

    文章目录 前言 1.小程序页面结构 2.数据绑定的定义 一.数据绑定 1.简单绑定 总结 前言 1.小程序页面结构 微信小程序的页面结构主要是分别由四个文件组成: js(逻辑处理文件):负责页面逻辑内 ...

最新文章

  1. Struts2标签库
  2. 语言模型如何为大象“称”体重？斯坦福提出“尺度探测”新思路
  3. 160个Crackme017
  4. 2017 企业服务创新大会启动，助力中国企业敏捷发展
  5. 简单记录js中的this关键字
  6. PyODPS开发中的最佳实践
  7. ImportError: No module named ‘sklearn.qda‘  ImportError: No module named ‘sklearn.lda‘
  8. bzoj 4094: [Usaco2013 Dec]Optimal Milking
  9. 拷贝文件到另一台电脑
  10. 百度地图坐标和高德地图坐标转换
  11. 微积分是研究连续变化的数学理论
  12. 5g/4g工业无线路由器
  13. Spring整合JsonRpc
  14. QQ消息自动发送器（自动发广告、聊天，支持群，支持最新的QQ2008II Beta1） C# 版...
  15. 21天早睡早起习惯计划
  16. Partial Dependence Plots 从原理到实战
  17. 2003英语单词四6级大学六级CET6资料
  18. SpringBoot + Vue 结合支付宝支付（3）--调用api
  19. Android开发笔记之SeekBar 时间的显示 快进快退 Mediaplayer
  20. 互联网巨头前沿科技产品一览

热门文章

  1. 站长SEO超级外链工具_V1.1
  2. iPhone 适配之路
  3. php页面链接无线网络,Wifi无线网络连接工作概念
  4. springboot中的线程池
  5. 黑马C++项目实操演讲比赛流程管理系统
  6. power 见解_客户见解的两个简单来源，可改善用户体验
  7. 1930年经济大萧条
  8. 国家开放大学2021春1174水工钢筋混凝土结构(本)题目
  9. windows10家庭版 超级管理员（administrator）用户登录
  10. 招聘过程中，3分钟看懂一个人