diff --git a/src/core/helpers/protocol/canvas.js b/src/core/helpers/protocol/canvas.js index 52ee1593a97aacfa83b278fa2f89b0ee1e346fc9..8001579746f620f4a4046151ec1f89f38a819e37 100644 --- a/src/core/helpers/protocol/canvas.js +++ b/src/core/helpers/protocol/canvas.js @@ -43,7 +43,52 @@ export const canvasPutImageData = { required: true }, height: { + type: Number + } +} + +const fileType = { + PNG: 'PNG', + JPG: 'JPG' +} + +export const canvasToTempFilePath = { + x: { + type: Number, + default: 0 + }, + y: { + type: Number, + default: 0 + }, + width: { + type: Number + }, + height: { + type: Number + }, + destWidth: { + type: Number + }, + destHeight: { + type: Number + }, + canvasId: { + type: String, + require: true + }, + fileType: { + type: String, + validator (value, params) { + value = (value || '').toUpperCase() + params.fileType = Object.values(fileType).indexOf(value) < 0 ? fileType.PNG : value + } + }, + quality: { type: Number, - required: false + validator (value, params) { + value = Math.floor(value) + params.quality = value > 0 && value < 1 ? value : 1 + } } } diff --git a/src/core/service/api/context/canvas.js b/src/core/service/api/context/canvas.js index beb12efcc9b837b3a6348816484a8ed8d5cd8a70..5469cf8fcb333588a018a0e8247ac6ff821576a6 100644 --- a/src/core/service/api/context/canvas.js +++ b/src/core/service/api/context/canvas.js @@ -252,7 +252,15 @@ var methods3 = ['setFillStyle', 'setTextAlign', 'setStrokeStyle', 'setGlobalAlph 'setFontSize', 'setLineCap', 'setLineJoin', 'setLineWidth', 'setMiterLimit', 'setTextBaseline', 'setLineDash' ] -var c2d + +var tempCanvas +function getTempCanvas () { + if (!tempCanvas) { + tempCanvas = document.createElement('canvas') + } + return tempCanvas +} + class CanvasContext { constructor (id, pageId) { this.id = id @@ -306,10 +314,7 @@ class CanvasContext { } } measureText (text) { - if (!c2d) { - let canvas = document.createElement('canvas') - c2d = canvas.getContext('2d') - } + var c2d = getTempCanvas().getContext('2d') c2d.font = this.state.font return new TextMetrics(c2d.measureText(text).width || 0) } @@ -637,3 +642,61 @@ export function canvasPutImageData ({ callbackId: cId }) } + +export function canvasToTempFilePath ({ + x, + y, + width, + height, + destWidth, + destHeight, + canvasId, + fileType, + qualit +}, callbackId) { + var pageId + const app = getApp() + if (app.$route && app.$route.params.__id__) { + pageId = app.$route.params.__id__ + } else { + invoke(callbackId, { + errMsg: 'canvasPutImageData:fail' + }) + return + } + var cId = canvasEventCallbacks.push(function (data) { + var imgData = data.data + if (!imgData || !imgData.length) { + invoke(callbackId, { + errMsg: 'canvasToTempFilePath:fail' + }) + return + } + imgData = new ImageData(new Uint8ClampedArray(imgData), data.width, data.height) + var canvas = getTempCanvas() + canvas.width = data.width + canvas.height = data.height + var c2d = canvas.getContext('2d') + c2d.putImageData(imgData, 0, 0) + var base64 = canvas.toDataURL('image/png') + var img = new Image() + img.onload = function () { + canvas.width = destWidth || imgData.width + canvas.height = destHeight || imgData.height + c2d.drawImage(img, 0, 0) + base64 = canvas.toDataURL(`image/${fileType.toLowerCase()}`, qualit) + invoke(callbackId, { + errMsg: 'canvasToTempFilePath:ok', + tempFilePath: base64 + }) + } + img.src = base64 + }) + operateCanvas(canvasId, pageId, 'getImageData', { + x, + y, + width, + height, + callbackId: cId + }) +} diff --git a/src/core/view/components/canvas/index.vue b/src/core/view/components/canvas/index.vue index f9d01318524123afea326ce83f17f3cfa6060582..39eea2d3bd80d7447be830c14b11bfb896297d6b 100644 --- a/src/core/view/components/canvas/index.vue +++ b/src/core/view/components/canvas/index.vue @@ -327,8 +327,15 @@ export default { callbackId }) { var imgData + var canvas = this.$refs.canvas + if (!width) { + width = canvas.width + } + if (!height) { + height = canvas.height + } try { - imgData = this.$refs.canvas.getContext('2d').getImageData(x, y, width, height) + imgData = canvas.getContext('2d').getImageData(x, y, width, height) } catch (error) { UniViewJSBridge.publishHandler('onCanvasMethodCallback', { callbackId,