123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157 |
- export const uniContext = (canvasId, context) => {
- let ctx = uni.createCanvasContext(canvasId, context)
- if (!ctx.uniDrawImage) {
- ctx.uniDrawImage = ctx.drawImage
- ctx.drawImage = (image, ...agrs) => {
- ctx.uniDrawImage(image.src, ...agrs)
- }
- }
- if (!ctx.getImageData) {
- ctx.getImageData = (x, y, width, height) => {
- return new Promise((resolve, reject) => {
- // #ifdef MP || VUE2
- if (context.proxy) context = context.proxy
- // #endif
- uni.canvasGetImageData({
- canvasId,
- x,
- y,
- width,
- height,
- success(res) {
- resolve(res)
- },
- fail(error) {
- reject(error)
- }
- }, context)
- })
- }
- }
- return ctx
- }
- class Image {
- constructor() {
- this.currentSrc = null
- this.naturalHeight = 0
- this.naturalWidth = 0
- this.width = 0
- this.height = 0
- this.tagName = 'IMG'
- }
- set src(src) {
- this.currentSrc = src
- uni.getImageInfo({
- src,
- success: (res) => {
- this.naturalWidth = this.width = res.width
- this.naturalHeight = this.height = res.height
- this.onload()
- },
- fail: () => {
- this.onerror()
- }
- })
- }
- get src() {
- return this.currentSrc
- }
- }
- export const createImage = () => {
- return new Image()
- }
- export function useCurrentPage() {
- const pages = getCurrentPages();
- return pages[pages.length - 1];
- }
- export const toDataURL = (canvasId, context, options = {}) => {
- // #ifdef MP-QQ
- // context = context.$scope
- // #endif
- // #ifdef MP-ALIPAY
- context = ''
- // #endif
- return new Promise((resolve, reject) => {
- let {canvas, width, height, destWidth = 0, destHeight = 0, x = 0, y = 0, preferToDataURL} = options
- const {pixelRatio} =uni.getSystemInfoSync()
- // #ifdef MP-ALIPAY
-
- if(!destWidth || !destHeight) {
- destWidth = width * pixelRatio;
- destHeight = height * pixelRatio;
- width = destWidth;
- height = destHeight;
- x = x * pixelRatio
- y = y * pixelRatio
- }
- // #endif
- const params = {
- ...options,
- canvasId,
- id: canvasId,
- // #ifdef MP-ALIPAY
- x,
- y,
- width,
- height,
- destWidth,
- destHeight,
- // #endif
- canvas,
- success: (res) => {
- resolve(res.tempFilePath)
- },
- fail: (err) => {
- reject(err)
- }
- }
- // 抖音小程序canvas 2d不支持canvasToTempFilePath
- if(canvas && canvas.toDataURL && preferToDataURL){
- let next = true
- const devtools = uni.getSystemInfoSync().platform == 'devtools'
- // #ifdef MP-TOUTIAO
- next = uni.getSystemInfoSync().platform != 'devtools'
- if(!next){
- console.warn('[lime-signature] 抖音开发工具不支持bbox')
- }
- // #endif
- if((x || y) && next){
- const offCanvas = uni.createOffscreenCanvas({type: '2d'});
- const ctx = offCanvas.getContext("2d");
- const destWidth = Math.floor(width*pixelRatio)
- const destHeight = Math.floor(height*pixelRatio)
- offCanvas.width = destWidth // canvas.width;
- offCanvas.height = destHeight // canvas.height;
- // ctx.scale(pixelRatio, pixelRatio)
- // ctx.drawImage(canvas, Math.floor(x*pixelRatio), Math.floor(y*pixelRatio), destWidth, destHeight, 0,0, destWidth, destHeight);
- // 抖音不能在drawImage使用canvas
- const image = canvas.createImage()
- image.onload = ()=>{
- ctx.drawImage(image, Math.floor(x*pixelRatio), Math.floor(y*pixelRatio), destWidth, destHeight, 0,0, destWidth, destHeight)
- const tempFilePath = offCanvas.toDataURL();
- resolve(tempFilePath)
- if(params.success){
- params.success({tempFilePath})
- }
- }
- image.src = canvas.toDataURL()
-
- } else {
- const tempFilePath = canvas.toDataURL()
- resolve(tempFilePath)
- if(params.success){
- params.success({tempFilePath})
- }
- }
- } else
- if(canvas && canvas.toTempFilePath) {
- canvas.toTempFilePath(params)
- } else {
- uni.canvasToTempFilePath(params, context)
- }
- })
- }
|