1 line
24 KiB
Plaintext
1 line
24 KiB
Plaintext
{"version":3,"sources":["webpack:///D:/chenq/chen/uniapp(兼小程序)/dengrui/components/mosowe-canvas-image/mosowe-canvas-image.vue?ebe7","webpack:///D:/chenq/chen/uniapp(兼小程序)/dengrui/components/mosowe-canvas-image/mosowe-canvas-image.vue?8d95","webpack:///D:/chenq/chen/uniapp(兼小程序)/dengrui/components/mosowe-canvas-image/mosowe-canvas-image.vue?4fe8","webpack:///D:/chenq/chen/uniapp(兼小程序)/dengrui/components/mosowe-canvas-image/mosowe-canvas-image.vue?45e8","uni-app:///components/mosowe-canvas-image/mosowe-canvas-image.vue","webpack:///D:/chenq/chen/uniapp(兼小程序)/dengrui/components/mosowe-canvas-image/mosowe-canvas-image.vue?8000","webpack:///D:/chenq/chen/uniapp(兼小程序)/dengrui/components/mosowe-canvas-image/mosowe-canvas-image.vue?b104"],"names":[],"mappings":";;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA4I;AAC5I;AACuE;AACL;AACsC;;;AAGxG;AACmL;AACnL,gBAAgB,uLAAU;AAC1B,EAAE,yFAAM;AACR,EAAE,0GAAM;AACR,EAAE,mHAAe;AACjB;AACA;AACA;AACA;AACA;AACA,EAAE,8GAAU;AACZ;AACA;;AAEA;AACe,gF;;;;;;;;;;;;ACvBf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;ACRA;AAAA;AAAA;AAAA;AAAgsB,CAAgB,+qBAAG,EAAC,C;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACgBptB,sF;;;;;;;;;;;;;;;gBACA,EACA,2BADA,EAEA,cAFA,EAGA,SACA;AACA,kBADA,EAEA,cAFA,EAGA,iCACA,sBACA,CALA,EADA,EAQA;AACA,mBADA,EAEA,cAFA,EARA,EAYA;AACA,4BADA,EAEA,wBAFA,EAZA;;AAgBA;AACA,mBADA;AAEA,oBAFA,EAhBA;;AAoBA;AACA,4BADA;AAEA,kBAFA,EApBA;;AAwBA;AACA,4BADA;AAEA,kBAFA,EAxBA;;AA4BA;AACA,iBADA;AAEA;AACA;AACA,OAJA,EA5BA,EAHA;;;AAsCA,MAtCA,kBAsCA;AACA;AACA,kBADA;AAEA,mBAFA;AAGA,oBAHA;AAIA,qBAJA;AAKA,yBALA;AAMA,0BANA;AAOA,yBAPA;AAQA,0BARA;;AAUA,GAjDA;AAkDA,WAlDA;AAmDA;AACA,cApDA,0BAoDA,EApDA;AAqDA;AACA,SAtDA,qBAsDA;AACA;AACA;AACA,GAzDA;AA0DA;AACA,aA3DA,yBA2DA,EA3DA;AA4DA;AACA,SA7DA,qBA6DA,EA7DA;AA8DA;AACA,cA/DA,0BA+DA,EA/DA;AAgEA;AACA,SAjEA,qBAiEA,EAjEA;AAkEA;AACA,eAnEA,2BAmEA,EAnEA;AAoEA;AACA,WArEA,uBAqEA,EArEA;AAsEA;AACA;AACA;AACA,gBAFA,0BAEA;AACA;AACA;AACA;AACA,4BADA;AAEA,sBAFA;;AAIA;AACA;AACA;AACA;AACA;AACA,0BADA;AAEA,kBAFA;;AAIA;AACA,KAlBA;AAmBA;AACA,kBApBA,4BAoBA;AACA;AACA;AACA;;AAEA;AACA;;;;;;AAMA,SATA,MASA;AACA;AACA;AACA,WAFA,MAEA;AACA;AACA;AACA,aAFA,MAEA;AACA;AACA;AACA;AACA;;AAEA,OAtBA,MAsBA;AACA;AACA,OAFA,MAEA;AACA;AACA,OAFA,MAEA;AACA;AACA,OAFA,MAEA;AACA;AACA;AACA,KArDA;;AAuDA;AACA,sBAxDA,8BAwDA,IAxDA,EAwDA;AACA;AACA,yBADA;AAEA;AACA,4CADA,EAFA;;AAKA;AACA;AACA;AACA;AACA,WAFA,MAEA;AACA;AACA;AACA,SAZA;AAaA;AACA;AACA,SAfA;;AAiBA,KA1EA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoHA;AACA,iBArHA,yBAqHA,IArHA,EAqHA;AACA;AACA,uBADA;AAEA,kBAFA;;AAIA;;AAEA;AACA,yBADA;AAEA,qCAFA;AAGA;AACA;AACA,8BADA;AAEA,sBAFA;;AAIA;AACA;AACA;AACA,WAFA,MAEA;AACA;AACA;AACA,SAdA;AAeA;AACA;AACA;AACA,yBADA;AAEA,wBAFA;;AAIA,SArBA;;;AAwBA;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,KA/KA;AAgLA;AACA,gBAjLA,wBAiLA,IAjLA,EAiLA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,oBADA;AAEA,iBAFA;AAGA,iBAHA;AAIA,kBAJA;AAKA,mBALA;;AAOA;AACA;AACA;AACA;AACA,kBADA;AAEA,kBAFA;AAGA,kCAHA;AAIA,mCAJA;AAKA,6BALA;AAMA,oCANA;AAOA;AACA;AACA;AACA;AACA;AACA,eAZA;AAaA;AACA;AACA,eAfA;AAgBA;AACA;AACA;AACA;AACA,eApBA;AAqBA,kBArBA;AAsBA,WAxBA,EAwBA,GAxBA;AAyBA,SA1BA;AA2BA,OAxCA,EAwCA,GAxCA;AAyCA,KA/NA;AAgOA;AACA,aAjOA,qBAiOA,IAjOA,EAiOA;AACA;AACA;AACA,kBADA;AAEA,YAFA;AAGA,YAHA;AAIA,4DAJA;AAKA,+DALA;;AAOA;AACA,KA3OA;AA4OA;AACA,YA7OA,oBA6OA,IA7OA,EA6OA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,OAFA,MAEA;AACA;AACA;AACA;AACA,KAzPA;;AA2PA;AACA,YA5PA,oBA4PA,IA5PA,EA4PA;AACA;AACA;AACA;AACA;AACA,KAjQA;;AAmQA;AACA,WApQA,mBAoQA,IApQA,EAoQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KA3QA;;AA6QA;AACA,UA9QA,kBA8QA,IA9QA,EA8QA;AACA;AACA,2BADA;;AAGA;AACA;AACA,aADA;AAEA,YAFA;AAGA,YAHA;AAIA,4DAJA;AAKA,+DALA;;AAOA;AACA,KA3RA;;;AA8RA;AACA,iBA/RA,2BA+RA;AACA;AACA;AACA;AACA,OAHA,MAGA;AACA;AACA;AACA,KAtSA;;AAwSA;AACA,eAzSA,yBAySA;AACA;AACA;AACA;AACA;AACA,gBADA;AAEA,gBAFA;AAGA,uCAHA;AAIA,yCAJA;AAKA,oCALA;AAMA,8BANA;AAOA;AACA;AACA;AACA;AACA;AACA,aAZA;AAaA;AACA;AACA,aAfA;AAgBA;AACA;AACA,aAlBA;AAmBA,gBAnBA;AAoBA,SArBA,EAqBA,GArBA;AAsBA,OAvBA;AAwBA,KAnUA;AAoUA;AACA,iBArUA,yBAqUA,GArUA,EAqUA;AACA;AACA,kBADA;AAEA,mBAFA;;AAIA,KA1UA;AA2UA;AACA,eA5UA,yBA4UA;AACA;AACA,KA9UA,EAvEA,E;;;;;;;;;;;;;ACjBA;AAAA;AAAA;AAAA;AAA6xC,CAAgB,yrCAAG,EAAC,C;;;;;;;;;;;ACAjzC;AACA,OAAO,KAAU,EAAE,kBAKd","file":"components/mosowe-canvas-image/mosowe-canvas-image.js","sourcesContent":["import { render, staticRenderFns, recyclableRender, components } from \"./mosowe-canvas-image.vue?vue&type=template&id=9b6619d8&scoped=true&\"\nvar renderjs\nimport script from \"./mosowe-canvas-image.vue?vue&type=script&lang=js&\"\nexport * from \"./mosowe-canvas-image.vue?vue&type=script&lang=js&\"\nimport style0 from \"./mosowe-canvas-image.vue?vue&type=style&index=0&id=9b6619d8&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"9b6619d8\",\n null,\n false,\n components,\n renderjs\n)\n\ncomponent.options.__file = \"components/mosowe-canvas-image/mosowe-canvas-image.vue\"\nexport default component.exports","export * from \"-!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--16-0!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/template.js!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-uni-app-loader/page-meta.js!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./mosowe-canvas-image.vue?vue&type=template&id=9b6619d8&scoped=true&\"","var components\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n}\nvar recyclableRender = false\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns, recyclableRender, components }","import mod from \"-!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/babel-loader/lib/index.js!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--12-1!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./mosowe-canvas-image.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/babel-loader/lib/index.js!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--12-1!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./mosowe-canvas-image.vue?vue&type=script&lang=js&\"","<!-- mosowe-canvas-image -->\r\n<template>\r\n <view class='mosowe-canvas-image'>\r\n\t\t<view class=\"slot-view\" @click=\"createCanvas\">\r\n\t\t\t<slot></slot>\r\n\t\t</view>\r\n\t\t<view class=\"canvas-wrap-box\">\r\n\t\t\t<!-- 主面板绘制 -->\r\n\t\t\t<canvas class=\"canvas-wrap\" canvas-id=\"canvas\" :style=\"'width: '+ width +'px; height: '+ height +'px;'\"></canvas>\r\n\t\t\t<!-- 这个是用来绘制圆形图片的 -->\r\n\t\t\t<canvas class=\"canvas-wrap\" canvas-id=\"canvas-arc\" :style=\"'width: '+ canvasArcWidth +'px; height: '+ canvasArcHeight +'px;'\"></canvas>\r\n\t\t</view>\r\n\t</view>\r\n</template>\r\n\r\n<script>\r\nimport QR from './wxqrcode.js';\r\nexport default {\r\n name: 'mosowe-canvas-image',\r\n components: {},\r\n props: {\r\n\t\timgType: { // 图片类型\r\n\t\t\ttype: String,\r\n\t\t\tdefault: 'jpg',\r\n\t\t\tvalidator: () => {\r\n\t\t\t\treturn ['jpg', 'png'];\r\n\t\t\t}\r\n\t\t},\r\n\t\tcompress: { // 是否开启压缩\r\n\t\t\ttype: Boolean,\r\n\t\t\tdefault: false\r\n\t\t},\r\n\t\tcompressSize: { // 压缩界限，超过界限压缩，默认2M\r\n\t\t\ttype: [Number, String],\r\n\t\t\tdefault: 1024*1024*2\r\n\t\t},\r\n\t\tshowPreview: { // 生成图像后是否预览\r\n\t\t\ttype: Boolean,\r\n\t\t\tdefault: false\r\n\t\t},\r\n\t height: { // canvas高度\r\n\t\t\ttype: [String, Number],\r\n\t\t\tdefault: 200\r\n\t\t},\r\n\t width: { // canvas宽度\r\n\t\t\ttype: [String, Number],\r\n\t\t\tdefault: 200\r\n\t\t},\r\n\t\tlists: {\r\n\t\t\ttype: Array,\r\n\t\t\tdefault: () => {\r\n\t\t\t\treturn [];\r\n\t\t\t}\r\n\t\t}\r\n\t},\r\n data () {\r\n return {\r\n\t\t\tcanvas: null,\r\n\t\t\tlistsIndex: 0,\r\n\t\t\tlistsLength: 0,\r\n\t\t\tcanvasArc: null,\r\n\t\t\tcanvasArcWidth: 100,\r\n\t\t\tcanvasArcHeight: 100,\r\n\t\t\tcompressQuality: 20,\r\n\t\t\tcompressQualityH5: 5,\r\n };\r\n },\r\n\twatch: {},\r\n // 组件实例化之前 \r\n beforeCreate () {},\r\n // 组件创建完成\r\n created () {\r\n\t\tthis.canvas = uni.createCanvasContext('canvas', this);\r\n\t\tthis.canvasArc = uni.createCanvasContext('canvas-arc', this);\r\n\t},\r\n // 组件挂载之前\r\n beforeMount () {},\r\n // 组件挂载之后\r\n mounted () {},\r\n // 组件数据更新时\r\n beforeUpdate () {},\r\n // 组价更新\r\n updated () {},\r\n // 组件销毁前\r\n beforeDestroy () {},\r\n // 组件销毁后\r\n destroyed () {},\r\n // 页面方法\r\n methods: {\r\n\t\t// 开始绘制\r\n\t\tcreateCanvas () {\r\n\t\t\tthis.clearCanvas();\r\n\t\t\tif (this.lists.length === 0) {\r\n\t\t\t\tuni.showToast({\r\n\t\t\t\t\ttitle: 'lists不能为空',\r\n\t\t\t\t\ticon: 'none'\r\n\t\t\t\t});\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t\tthis.listsIndex = 0;\r\n\t\t\tthis.listsLength = this.lists.length - 1;\r\n\t\t\tuni.showLoading({\r\n\t\t\t\ttitle: '正在生成图片...',\r\n\t\t\t\tmask: true\r\n\t\t\t});\r\n\t\t\tthis.dataDrawCanvas();\r\n\t\t},\r\n\t\t// 数据绘制\r\n\t\tdataDrawCanvas () {\r\n\t\t\tlet item = this.lists[this.listsIndex];\r\n\t\t\tif (item.type === 'image') { // 图片\r\n\t\t\t\tif (item.content.indexOf('https://') > -1) { // https://网络图片\r\n\t\t\t\t\t// #ifndef H5\r\n\t\t\t\t\t// 非H5\r\n\t\t\t\t\tthis.downloadImageNotH5(item);\r\n\t\t\t\t\t// #endif\r\n\t\t\t\t\t// #ifdef H5\r\n\t\t\t\t\t// H5\r\n\t\t\t\t\tthis.downloadImageH5(item);\r\n\t\t\t\t\t// #endif\r\n\t\t\t\t} else { // 本地选择图片\r\n\t\t\t\t\tif (this.compress && item.hasOwnProperty('file') && item.file.size > this.compressSize) { // 大于限制2M压缩\r\n\t\t\t\t\t\tthis.compressImage(item);\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tif (item.arc) {\r\n\t\t\t\t\t\t\tthis.drawImageArc(item);\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\tthis.drawImage(item);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t} else if (item.type === 'text') { // 文本\r\n\t\t\t\tthis.drawText(item);\r\n\t\t\t} else if (item.type === 'rect') { // 矩形（线条）\r\n\t\t\t\tthis.drawRect(item);\r\n\t\t\t} else if (item.type === 'arc') { // 圆形\r\n\t\t\t\tthis.drawArc(item);\r\n\t\t\t} else if (item.type === 'qr') { // 二维码\r\n\t\t\t\tthis.drawQR(item);\r\n\t\t\t}\r\n\t\t},\r\n\t\t// #ifndef H5\r\n\t\t// https图片下载本地并绘制，非H5\r\n\t\tdownloadImageNotH5 (item) { \r\n\t\t\tuni.downloadFile({\r\n\t\t\t\turl: item.content,\r\n\t\t\t\theader: {\r\n\t\t\t\t\t'Access-Control-Allow-Origin': '*',\r\n\t\t\t\t},\r\n\t\t\t\tsuccess: (res) => {\r\n\t\t\t\t\titem.content = res.tempFilePath;\r\n\t\t\t\t\tif (item.arc) {\r\n\t\t\t\t\t\tthis.drawImageArc(item);\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tthis.drawImage(item);\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\tfail: (res) => {\r\n\t\t\t\t\tconsole.log(res);\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t},\r\n\t\t// #endif\r\n\t\t// #ifdef H5\r\n\t\t// https图片下载本地并绘制，H5\r\n\t\tdownloadImageH5 (item) {\r\n\t\t\tlet image = null;\r\n\t\t\timage = new Image();\r\n\t\t\timage.setAttribute('crossOrigin', 'anonymous');\r\n\t\t\timage.crossOrigin = 'Anonymous';\r\n\t\t\timage.src = item.content;\r\n\t\t\timage.onload = () => {\r\n\t\t\t let canvas = document.createElement('canvas');\r\n\t\t\t canvas.width = item.width;\r\n\t\t\t canvas.height = item.height;\r\n\t\t\t let ctx = canvas.getContext('2d');\r\n\t\t\t\t\tctx.drawImage(\r\n\t\t\t\t\t\timage, \r\n\t\t\t\t\t\t0, \r\n\t\t\t\t\t\t0, \r\n\t\t\t\t\t\titem.width, \r\n\t\t\t\t\t\titem.height\r\n\t\t\t\t\t);\r\n\t\t\t let dataURL = canvas.toDataURL('image/png');\r\n\t\t\t\t\tif (item.arc) { // 绘制圆形\r\n\t\t\t\t\t\titem.content = dataURL;\r\n\t\t\t\t\t\tthis.drawImageArc(item);\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tthis.canvas.globalAlpha = item.hasOwnProperty('globalAlpha') ? item.globalAlpha : 1;\r\n\t\t\t\t\t\tthis.canvas.drawImage(\r\n\t\t\t\t\t\t\tdataURL, \r\n\t\t\t\t\t\t\titem.x, \r\n\t\t\t\t\t\t\titem.y, \r\n\t\t\t\t\t\t\titem.hasOwnProperty('width') ? item.width : this.width, \r\n\t\t\t\t\t\t\titem.hasOwnProperty('height') ? item.height : this.height\r\n\t\t\t\t\t\t);\r\n\r\n\t\t\t\t\tthis.checkDrawOver();\t\t\t\t\t\t\r\n\t\t\t\t}\r\n\r\n\t\t\t};\r\n\t\t},\r\n\t\t// #endif\r\n\t\t// 图片压缩\r\n\t\tcompressImage (item) {\r\n\t\t\tuni.showLoading({\r\n\t\t\t\ttitle: '压缩中...',\r\n\t\t\t\tmask: true\r\n\t\t\t});\r\n\t\t\t// 非H5压缩\r\n\t\t\t// #ifndef H5\r\n\t\t\tuni.compressImage({\r\n\t\t\t\tsrc: item.content,\r\n\t\t\t\tquality: this.compressQuality,\r\n\t\t\t\tsuccess: (res) => {\r\n\t\t\t\t\tuni.showLoading({\r\n\t\t\t\t\t\ttitle: '正在生成图片...',\r\n\t\t\t\t\t\tmask: true\r\n\t\t\t\t\t});\r\n\t\t\t\t\titem.content = res.tempFilePath;\r\n\t\t\t\t\tif (item.arc) {\r\n\t\t\t\t\t\tthis.drawImageArc(item);\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tthis.drawImage(item);\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\tfail: (res) => {\r\n\t\t\t\t\tconsole.log(res);\r\n\t\t\t\t\tuni.showToast({\r\n\t\t\t\t\t\ttitle: '压缩失败',\r\n\t\t\t\t\t\ticon: 'none'\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t\t// #endif\r\n\t\t\t// H5压缩\r\n\t\t\t// #ifdef H5\r\n\t\t\tlet image = new Image();\r\n\t\t\timage.setAttribute('crossOrigin', 'anonymous');\r\n\t\t\timage.crossOrigin = 'Anonymous';\r\n\t\t\timage.src = item.content;\r\n\t\t\timage.onload = () => {\r\n\t\t\t\tlet canvas = document.createElement('canvas');\r\n\t\t\t\tcanvas.width = item.width;\r\n\t\t\t\tcanvas.height = item.height;\r\n\t\t\t\tlet ctx = canvas.getContext('2d');\r\n\t\t\t\tctx.drawImage(\r\n\t\t\t\t\timage, \r\n\t\t\t\t\t0, \r\n\t\t\t\t\t0, \r\n\t\t\t\t\titem.width, \r\n\t\t\t\t\titem.height\r\n\t\t\t\t);\r\n\t\t\t\tlet dataURL = canvas.toDataURL('image/png');\r\n\t\t\t\titem.content = dataURL;\r\n\t\t\t\tif (item.arc) {\r\n\t\t\t\t\tthis.drawImageArc(item);\r\n\t\t\t\t} else {\r\n\t\t\t\t\tthis.drawImage(item);\r\n\t\t\t\t}\r\n\t\t\t};\r\n\t\t // #endif\r\n\t\t},\r\n\t\t// 圆形图片另外绘制canvas,png格式\r\n\t\tdrawImageArc (item) {\r\n\t\t\tthis.canvasArc.clearRect(0, 0, this.canvasArcWidth, this.canvasArcHeight);\r\n\t\t\tthis.canvasArcWidth = item.arcR * 2;\r\n\t\t\tthis.canvasArcHeight = item.arcR * 2;\r\n\t\t\tthis.canvasArc.save();\r\n\t\t\tlet arcT = setTimeout(() => {\r\n\t\t\t\tclearTimeout(arcT);\r\n\t\t\t\tthis.canvasArc.arc(item.arcR, item.arcR, item.arcR, 0, 2 * Math.PI);\r\n\t\t\t\tthis.canvasArc.clip();\r\n\t\t\t\t// this.canvasArc.closePath();\r\n\t\t\t\t\r\n\t\t\t\tthis.canvasArc.drawImage(\r\n\t\t\t\t\titem.content,\r\n\t\t\t\t\titem.arcX,\r\n\t\t\t\t\titem.arcY,\r\n\t\t\t\t\titem.width,\r\n\t\t\t\t\titem.height\r\n\t\t\t\t);\r\n\t\t\t\tthis.canvasArc.draw(false, setTimeout(() => {\r\n\t\t\t\t\tlet t = setTimeout(() => {\r\n\t\t\t\t\t\tclearTimeout(t);\r\n\t\t\t\t\t\tuni.canvasToTempFilePath({\r\n\t\t\t\t\t\t\tx: 0,\r\n\t\t\t\t\t\t\ty: 0,\r\n\t\t\t\t\t\t\twidth: item.arcR * 2,\r\n\t\t\t\t\t\t\theight: item.arcR * 2,\r\n\t\t\t\t\t\t\tfileType: 'png',\r\n\t\t\t\t\t\t\tcanvasId: 'canvas-arc',\r\n\t\t\t\t\t\t\tsuccess: (res) => {\r\n\t\t\t\t\t\t\t\titem.width = item.arcR * 2;\r\n\t\t\t\t\t\t\t\titem.height = item.arcR * 2;\r\n\t\t\t\t\t\t\t\titem.content = res.tempFilePath;\r\n\t\t\t\t\t\t\t\tthis.drawImage(item);\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\tfail: (res) => {\r\n\t\t\t\t\t\t\t\tconsole.log(res);\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\tcomplete: () => {\r\n\t\t\t\t\t\t\t\tthis.canvasArc.restore();\r\n\t\t\t\t\t\t\t\tthis.canvasArc.fillRect(0, 0, 0, 0);\r\n\t\t\t\t\t\t\t\tthis.canvasArc.clearRect(0, 0, this.canvasArcWidth, this.canvasArcHeight);\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}, this);\r\n\t\t\t\t\t}, 100);\r\n\t\t\t\t}));\r\n\t\t\t}, 100);\r\n\t\t},\r\n\t\t// 图片绘制\r\n\t\tdrawImage (item) {\r\n\t\t\t\tthis.canvas.globalAlpha = item.hasOwnProperty('globalAlpha') ? item.globalAlpha : 1;\r\n\t\t\t\tthis.canvas.drawImage(\r\n\t\t\t\t\titem.content, \r\n\t\t\t\t\titem.x, \r\n\t\t\t\t\titem.y, \r\n\t\t\t\t\titem.hasOwnProperty('width') ? item.width : this.width, \r\n\t\t\t\t\titem.hasOwnProperty('height') ? item.height : this.height\r\n\t\t\t\t);\r\n\t\t\t\tthis.checkDrawOver();\r\n\t\t},\r\n\t\t// 文本绘制\r\n\t\tdrawText (item) {\r\n\t\t\t\tthis.canvas.setFillStyle(item.hasOwnProperty('color') ? item.color : '#000000');\r\n\t\t\t\tthis.canvas.setFontSize(item.hasOwnProperty('size')? item.size : 20);\r\n\t\t\t\tthis.canvas.setTextAlign(item.hasOwnProperty('align') ? item.align: 'left');\r\n\t\t\t\tthis.canvas.globalAlpha = item.hasOwnProperty('globalAlpha') ? item.globalAlpha : 1;\r\n\t\t\t\t\r\n\t\t\t\tif (item.maxWidth) {\r\n\t\t\t\t\tthis.canvas.fillText(item.content, item.x, item.y, item.maxWidth);\r\n\t\t\t\t} else {\r\n\t\t\t\t\tthis.canvas.fillText(item.content, item.x, item.y);\r\n\t\t\t\t}\r\n\t\t\t\tthis.checkDrawOver();\r\n\t\t},\r\n\t\t\r\n\t\t// 矩形（线条）绘制\r\n\t\tdrawRect (item) {\r\n\t\t\tthis.canvas.setFillStyle(item.hasOwnProperty('color') ? item.color : '#000000');\r\n\t\t\tthis.canvas.globalAlpha = item.hasOwnProperty('globalAlpha') ? item.globalAlpha : 1;\r\n\t\t\tthis.canvas.fillRect(item.x, item.y, item.width, item.height);\r\n\t\t\tthis.checkDrawOver();\r\n\t\t},\r\n\t\t\r\n\t\t// 圆形绘制\r\n\t\tdrawArc (item) {\r\n\t\t\tthis.canvas.arc(item.arcX, item.arcY, item.arcR, 0, 2 * Math.PI);\r\n\t\t\tthis.canvas.setFillStyle(item.hasOwnProperty('color') ? item.color : '#000000');\r\n\t\t\tthis.canvas.globalAlpha = item.hasOwnProperty('globalAlpha') ? item.globalAlpha : 1;\r\n\t\t\tthis.canvas.fill();\r\n\t\t\tthis.canvas.closePath();\r\n\t\t\tthis.checkDrawOver();\r\n\t\t},\r\n\t\t\r\n\t\t// 二维码绘制\r\n\t\tdrawQR (item) {\r\n\t\t\titem['qr'] = QR.createQrCodeImg(item.content, { \r\n\t\t\t\tsize: parseInt(300) \r\n\t\t\t});\r\n\t\t\tthis.canvas.globalAlpha = item.hasOwnProperty('globalAlpha') ? item.globalAlpha : 1;\r\n\t\t\tthis.canvas.drawImage(\r\n\t\t\t\titem.qr, \r\n\t\t\t\titem.x, \r\n\t\t\t\titem.y, \r\n\t\t\t\titem.hasOwnProperty('width') ? item.width : this.width, \r\n\t\t\t\titem.hasOwnProperty('height') ? item.height : this.height\r\n\t\t\t);\r\n\t\t\tthis.checkDrawOver();\r\n\t\t},\r\n\t\t\r\n\t\t\r\n\t\t// 判断是否绘制完\r\n\t\tcheckDrawOver () {\r\n\t\t\t if (this.listsIndex < this.listsLength) { // lists未画完\r\n\t\t\t \tthis.listsIndex++;\r\n\t\t\t \tthis.dataDrawCanvas();\r\n\t\t\t } else {\r\n\t\t\t \tthis.canvasImage();\r\n\t\t\t }\r\n\t\t},\r\n\t\t\r\n\t\t// 绘制到画布并生成图片\r\n\t\tcanvasImage () {\r\n\t\t\tthis.listsIndex = 0;\r\n\t\t\tthis.canvas.draw(false, setTimeout(() => {\r\n\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\tuni.canvasToTempFilePath({\r\n\t\t\t\t\t\tx: 0,\r\n\t\t\t\t\t\ty: 0,\r\n\t\t\t\t\t\twidth: Number(this.width),\r\n\t\t\t\t\t\theight: Number(this.height),\r\n\t\t\t\t\t\tfileType: this.imgType,\r\n\t\t\t\t\t\tcanvasId: 'canvas',\r\n\t\t\t\t\t\tsuccess: (res) => {\r\n\t\t\t\t\t\t\tthis.$emit('canvasImage', res.tempFilePath);\r\n\t\t\t\t\t\t\tif (this.showPreview) {\r\n\t\t\t\t\t\t\t\tthis.showPreviewFn(res.tempFilePath);\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t\tfail: (res) => {\r\n\t\t\t\t\t\t\tconsole.log(res);\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t\tcomplete: () => {\r\n\t\t\t\t\t\t\tuni.hideLoading();\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}, this);\r\n\t\t\t\t}, 500);\r\n\t\t\t}));\r\n\t\t},\r\n\t\t// 预览图\r\n\t\tshowPreviewFn (img) {\r\n\t\t\tuni.previewImage({\r\n\t\t\t\tcurrent: 0,\r\n\t\t\t\turls: [img]\r\n\t\t\t});\r\n\t\t},\r\n\t\t// 清空画布\r\n\t\tclearCanvas () {\r\n\t\t\tthis.canvas.clearRect(0, 0, this.width, this.height);\r\n\t\t},\r\n\r\n\t}\r\n};\r\n</script>\r\n\r\n<style lang='scss' scoped>\r\n.mosowe-canvas-image{\r\n\toverflow: hidden;\r\n\t.canvas-wrap-box{\r\n\t\toverflow: hidden;\r\n\t\theight: 0;\r\n\t\twidth: 0;\r\n\t\tposition: fixed;\r\n\t\tleft:200%;\r\n\t\ttop: 0;\r\n\t}\r\n\t.canvas-wrap {\r\n\t\toverflow: hidden;\r\n\t\theight: 0;\r\n\t\twidth: 0;\r\n\t}\r\n}\r\n</style>","import mod from \"-!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-2!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-4!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-5!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./mosowe-canvas-image.vue?vue&type=style&index=0&id=9b6619d8&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-2!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-4!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js??ref--8-oneOf-1-5!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js??vue-loader-options!../../../../../../HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/webpack-uni-mp-loader/lib/style.js!./mosowe-canvas-image.vue?vue&type=style&index=0&id=9b6619d8&lang=scss&scoped=true&\"","// extracted by mini-css-extract-plugin\n if(module.hot) {\n // 1627026329734\n var cssReload = require(\"D:/HbuilderX/HBuilderX/plugins/uniapp-cli/node_modules/mini-css-extract-plugin/dist/hmr/hotModuleReplacement.js\")(module.id, {\"hmr\":true,\"publicPath\":\"../../\",\"locals\":false});\n module.hot.dispose(cssReload);\n module.hot.accept(undefined, cssReload);\n }\n "],"sourceRoot":""} |