context.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. export const uniContext = (canvasId, context) => {
  2. let ctx = uni.createCanvasContext(canvasId, context)
  3. if (!ctx.uniDrawImage) {
  4. ctx.uniDrawImage = ctx.drawImage
  5. ctx.drawImage = (image, ...agrs) => {
  6. ctx.uniDrawImage(image.src, ...agrs)
  7. }
  8. }
  9. if (!ctx.getImageData) {
  10. ctx.getImageData = (x, y, width, height) => {
  11. return new Promise((resolve, reject) => {
  12. // #ifdef MP || VUE2
  13. if (context.proxy) context = context.proxy
  14. // #endif
  15. uni.canvasGetImageData({
  16. canvasId,
  17. x,
  18. y,
  19. width,
  20. height,
  21. success(res) {
  22. resolve(res)
  23. },
  24. fail(error) {
  25. reject(error)
  26. }
  27. }, context)
  28. })
  29. }
  30. }
  31. return ctx
  32. }
  33. class Image {
  34. constructor() {
  35. this.currentSrc = null
  36. this.naturalHeight = 0
  37. this.naturalWidth = 0
  38. this.width = 0
  39. this.height = 0
  40. this.tagName = 'IMG'
  41. }
  42. set src(src) {
  43. this.currentSrc = src
  44. uni.getImageInfo({
  45. src,
  46. success: (res) => {
  47. this.naturalWidth = this.width = res.width
  48. this.naturalHeight = this.height = res.height
  49. this.onload()
  50. },
  51. fail: () => {
  52. this.onerror()
  53. }
  54. })
  55. }
  56. get src() {
  57. return this.currentSrc
  58. }
  59. }
  60. export const createImage = () => {
  61. return new Image()
  62. }
  63. export function useCurrentPage() {
  64. const pages = getCurrentPages();
  65. return pages[pages.length - 1];
  66. }
  67. export const toDataURL = (canvasId, context, options = {}) => {
  68. // #ifdef MP-QQ
  69. // context = context.$scope
  70. // #endif
  71. // #ifdef MP-ALIPAY
  72. context = ''
  73. // #endif
  74. return new Promise((resolve, reject) => {
  75. let {canvas, width, height, destWidth = 0, destHeight = 0, x = 0, y = 0, preferToDataURL} = options
  76. const {pixelRatio} =uni.getSystemInfoSync()
  77. // #ifdef MP-ALIPAY
  78. if(!destWidth || !destHeight) {
  79. destWidth = width * pixelRatio;
  80. destHeight = height * pixelRatio;
  81. width = destWidth;
  82. height = destHeight;
  83. x = x * pixelRatio
  84. y = y * pixelRatio
  85. }
  86. // #endif
  87. const params = {
  88. ...options,
  89. canvasId,
  90. id: canvasId,
  91. // #ifdef MP-ALIPAY
  92. x,
  93. y,
  94. width,
  95. height,
  96. destWidth,
  97. destHeight,
  98. // #endif
  99. canvas,
  100. success: (res) => {
  101. resolve(res.tempFilePath)
  102. },
  103. fail: (err) => {
  104. reject(err)
  105. }
  106. }
  107. // 抖音小程序canvas 2d不支持canvasToTempFilePath
  108. if(canvas && canvas.toDataURL && preferToDataURL){
  109. let next = true
  110. const devtools = uni.getSystemInfoSync().platform == 'devtools'
  111. // #ifdef MP-TOUTIAO
  112. next = uni.getSystemInfoSync().platform != 'devtools'
  113. if(!next){
  114. console.warn('[lime-signature] 抖音开发工具不支持bbox')
  115. }
  116. // #endif
  117. if((x || y) && next){
  118. const offCanvas = uni.createOffscreenCanvas({type: '2d'});
  119. const ctx = offCanvas.getContext("2d");
  120. const destWidth = Math.floor(width*pixelRatio)
  121. const destHeight = Math.floor(height*pixelRatio)
  122. offCanvas.width = destWidth // canvas.width;
  123. offCanvas.height = destHeight // canvas.height;
  124. // ctx.scale(pixelRatio, pixelRatio)
  125. // ctx.drawImage(canvas, Math.floor(x*pixelRatio), Math.floor(y*pixelRatio), destWidth, destHeight, 0,0, destWidth, destHeight);
  126. // 抖音不能在drawImage使用canvas
  127. const image = canvas.createImage()
  128. image.onload = ()=>{
  129. ctx.drawImage(image, Math.floor(x*pixelRatio), Math.floor(y*pixelRatio), destWidth, destHeight, 0,0, destWidth, destHeight)
  130. const tempFilePath = offCanvas.toDataURL();
  131. resolve(tempFilePath)
  132. if(params.success){
  133. params.success({tempFilePath})
  134. }
  135. }
  136. image.src = canvas.toDataURL()
  137. } else {
  138. const tempFilePath = canvas.toDataURL()
  139. resolve(tempFilePath)
  140. if(params.success){
  141. params.success({tempFilePath})
  142. }
  143. }
  144. } else
  145. if(canvas && canvas.toTempFilePath) {
  146. canvas.toTempFilePath(params)
  147. } else {
  148. uni.canvasToTempFilePath(params, context)
  149. }
  150. })
  151. }