Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Velpro187
uni-app
提交
ba20aaf2
U
uni-app
项目概览
Velpro187
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
ba20aaf2
编写于
11月 04, 2019
作者:
雪洛
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix(v3): add canvasToTempFilePath etc.
上级
05af8047
变更
5
显示空白变更内容
内联
并排
Showing
5 changed file
with
213 addition
and
73 deletion
+213
-73
src/core/service/api/context/canvas.js
src/core/service/api/context/canvas.js
+25
-56
src/core/view/components/canvas/index.vue
src/core/view/components/canvas/index.vue
+89
-10
src/platforms/app-plus/service/api/context/canvas.js
src/platforms/app-plus/service/api/context/canvas.js
+78
-0
src/platforms/app-plus/service/api/index.js
src/platforms/app-plus/service/api/index.js
+1
-0
src/platforms/h5/service/api/context/canvas.js
src/platforms/h5/service/api/context/canvas.js
+20
-7
未找到文件。
src/core/service/api/context/canvas.js
浏览文件 @
ba20aaf2
import
createCallbacks
from
'
uni-helpers/callbacks
'
import
{
invokeMethod
,
getCurrentPageId
}
from
'
../../platform
'
import
{
invoke
}
from
'
../../bridge
'
const
canvasEventCallbacks
=
createCallbacks
(
'
canvasEvent
'
)
UniServiceJSBridge
.
subscribe
(
'
onDrawCanvas
'
,
({
...
...
@@ -229,10 +234,6 @@ function checkColor (e) {
return
[
0
,
0
,
0
,
255
]
}
function
TextMetrics
(
width
)
{
this
.
width
=
width
}
function
Pattern
(
image
,
repetition
)
{
this
.
image
=
image
this
.
repetition
=
repetition
...
...
@@ -257,14 +258,6 @@ var methods3 = ['setFillStyle', 'setTextAlign', 'setStrokeStyle', 'setGlobalAlph
'
setTextBaseline
'
,
'
setLineDash
'
]
var
tempCanvas
function
getTempCanvas
()
{
if
(
!
tempCanvas
)
{
tempCanvas
=
document
.
createElement
(
'
canvas
'
)
}
return
tempCanvas
}
class
CanvasContext
{
constructor
(
id
,
pageId
)
{
this
.
id
=
id
...
...
@@ -319,11 +312,9 @@ class CanvasContext {
return
new
Pattern
(
image
,
repetition
)
}
}
measureText
(
text
)
{
var
c2d
=
getTempCanvas
().
getContext
(
'
2d
'
)
c2d
.
font
=
this
.
state
.
font
return
new
TextMetrics
(
c2d
.
measureText
(
text
).
width
||
0
)
}
// TODO
// measureText (text) {
// }
save
()
{
this
.
actions
.
push
({
method
:
'
save
'
,
...
...
@@ -742,10 +733,6 @@ export function createCanvasContext (id, context) {
}
}
const
{
invokeCallbackHandler
:
invoke
}
=
UniServiceJSBridge
export
function
canvasGetImageData
({
canvasId
,
x
,
...
...
@@ -823,47 +810,27 @@ export function canvasToTempFilePath ({
return
}
const
cId
=
canvasEventCallbacks
.
push
(
function
({
data
,
width
,
height
base64
})
{
if
(
!
data
||
!
data
.
length
)
{
invoke
(
callbackId
,
{
errMsg
:
'
canvasToTempFilePath:fail
'
})
return
}
let
imgData
try
{
imgData
=
new
ImageData
(
new
Uint8ClampedArray
(
data
),
width
,
height
)
}
catch
(
error
)
{
if
(
!
base64
||
!
base64
.
length
)
{
invoke
(
callbackId
,
{
errMsg
:
'
canvasToTempFilePath:fail
'
})
return
}
const
canvas
=
getTempCanvas
()
canvas
.
width
=
width
canvas
.
height
=
height
const
c2d
=
canvas
.
getContext
(
'
2d
'
)
c2d
.
putImageData
(
imgData
,
0
,
0
)
let
base64
=
canvas
.
toDataURL
(
'
image/png
'
)
const
img
=
new
Image
()
img
.
onload
=
function
()
{
if
(
fileType
===
'
jpeg
'
)
{
c2d
.
fillStyle
=
'
#fff
'
c2d
.
fillRect
(
0
,
0
,
width
,
width
)
}
c2d
.
drawImage
(
img
,
0
,
0
)
base64
=
canvas
.
toDataURL
(
`image/
${
fileType
}
`
,
qualit
)
invoke
(
callbackId
,
{
errMsg
:
'
canvasToTempFilePath:ok
'
,
tempFilePath
:
base64
})
}
img
.
src
=
base64
invokeMethod
(
'
base64ToTempFilePath
'
,
{
base64Data
:
base64
,
x
,
y
,
width
,
height
,
destWidth
,
destHeight
,
canvasId
,
fileType
,
qualit
},
callbackId
)
})
operateCanvas
(
canvasId
,
pageId
,
'
get
ImageData
'
,
{
operateCanvas
(
canvasId
,
pageId
,
'
get
DataUrl
'
,
{
x
,
y
,
width
,
...
...
@@ -871,6 +838,8 @@ export function canvasToTempFilePath ({
destWidth
,
destHeight
,
hidpi
:
false
,
fileType
,
qualit
,
callbackId
:
cId
})
}
src/core/view/components/canvas/index.vue
浏览文件 @
ba20aaf2
...
...
@@ -413,6 +413,9 @@ export default {
context
.
drawImageByCanvas
(
canvas
,
x
,
y
,
width
,
height
,
0
,
0
,
destWidth
,
destHeight
,
false
)
imgData
=
context
.
getImageData
(
0
,
0
,
destWidth
,
destHeight
)
}
catch
(
error
)
{
if
(
!
callbackId
)
{
return
}
UniViewJSBridge
.
publishHandler
(
'
onCanvasMethodCallback
'
,
{
callbackId
,
data
:
{
...
...
@@ -421,6 +424,13 @@ export default {
},
this
.
$page
.
id
)
return
}
if
(
!
callbackId
)
{
return
{
data
:
[...
imgData
.
data
],
width
:
destWidth
,
height
:
destHeight
}
}
else
{
UniViewJSBridge
.
publishHandler
(
'
onCanvasMethodCallback
'
,
{
callbackId
,
data
:
{
...
...
@@ -430,6 +440,7 @@ export default {
height
:
destHeight
}
},
this
.
$page
.
id
)
}
},
putImageData
({
data
,
...
...
@@ -464,6 +475,74 @@ export default {
errMsg
:
'
canvasPutImageData:ok
'
}
},
this
.
$page
.
id
)
},
getDataUrl
({
x
=
0
,
y
=
0
,
width
,
height
,
destWidth
,
destHeight
,
hidpi
=
true
,
fileType
,
qualit
,
callbackId
})
{
let
res
=
this
.
getImageData
({
x
,
y
,
width
,
height
,
destWidth
,
destHeight
,
hidpi
})
if
(
!
res
.
data
||
!
res
.
data
.
length
)
{
UniViewJSBridge
.
publishHandler
(
'
onCanvasMethodCallback
'
,
{
callbackId
,
data
:
{
errMsg
:
'
canvasGetDataUrl:fail
'
}
},
this
.
$page
.
id
)
return
}
let
imgData
try
{
imgData
=
new
ImageData
(
new
Uint8ClampedArray
(
res
.
data
),
res
.
width
,
res
.
height
)
}
catch
(
error
)
{
UniViewJSBridge
.
publishHandler
(
'
onCanvasMethodCallback
'
,
{
callbackId
,
data
:
{
errMsg
:
'
canvasGetDataUrl:fail
'
}
},
this
.
$page
.
id
)
return
}
destWidth
=
res
.
width
destHeight
=
res
.
height
const
canvas
=
document
.
createElement
(
'
canvas
'
)
canvas
.
width
=
destWidth
canvas
.
height
=
destHeight
const
c2d
=
canvas
.
getContext
(
'
2d
'
)
c2d
.
putImageData
(
imgData
,
0
,
0
)
let
base64
=
canvas
.
toDataURL
(
'
image/png
'
)
const
img
=
new
Image
()
img
.
onload
=
()
=>
{
if
(
fileType
===
'
jpeg
'
)
{
c2d
.
fillStyle
=
'
#fff
'
c2d
.
fillRect
(
0
,
0
,
destWidth
,
destHeight
)
}
c2d
.
drawImage
(
img
,
0
,
0
)
base64
=
canvas
.
toDataURL
(
`image/
${
fileType
}
`
,
qualit
)
UniViewJSBridge
.
publishHandler
(
'
onCanvasMethodCallback
'
,
{
callbackId
,
data
:
{
errMsg
:
'
canvasGetDataUrl:ok
'
,
base64
:
base64
}
},
this
.
$page
.
id
)
}
img
.
src
=
base64
}
}
}
...
...
src/platforms/app-plus/service/api/context/canvas.js
0 → 100644
浏览文件 @
ba20aaf2
import
{
invoke
}
from
'
../../bridge
'
import
{
TEMP_PATH
}
from
'
../constants
'
/**
* 5+错误对象转换为错误消息
* @param {*} error 5+错误对象
*/
function
toErrMsg
(
error
)
{
var
msg
=
'
base64ToTempFilePath:fail
'
if
(
error
&&
error
.
message
)
{
msg
+=
`
${
error
.
message
}
`
}
else
if
(
error
)
{
msg
+=
`
${
error
}
`
}
return
msg
}
export
function
base64ToTempFilePath
({
base64Data
,
x
,
y
,
width
,
height
,
destWidth
,
destHeight
,
canvasId
,
fileType
,
quality
}
=
{},
callbackId
)
{
var
id
=
Date
.
now
()
var
bitmap
=
new
plus
.
nativeObj
.
Bitmap
(
`bitmap
${
id
}
`
)
bitmap
.
loadBase64Data
(
base64Data
,
function
()
{
var
formats
=
[
'
jpg
'
,
'
png
'
]
var
format
=
String
(
fileType
).
toLowerCase
()
if
(
formats
.
indexOf
(
format
)
<
0
)
{
format
=
'
png
'
}
/**
* 保存配置
*/
var
saveOption
=
{
overwrite
:
true
,
quality
:
typeof
quality
===
'
number
'
?
quality
*
100
:
100
,
format
}
/**
* 保存文件路径
*/
var
tempFilePath
=
`
${
TEMP_PATH
}
/canvas/
${
id
}
.
${
format
}
`
bitmap
.
save
(
tempFilePath
,
saveOption
,
function
()
{
clear
()
invoke
(
callbackId
,
{
tempFilePath
,
errMsg
:
'
base64ToTempFilePath:ok
'
})
},
function
(
error
)
{
clear
()
invoke
(
callbackId
,
{
errMsg
:
toErrMsg
(
error
)
})
})
},
function
(
error
)
{
clear
()
invoke
(
callbackId
,
{
errMsg
:
toErrMsg
(
error
)
})
})
function
clear
()
{
bitmap
.
clear
()
}
}
src/platforms/app-plus/service/api/index.js
浏览文件 @
ba20aaf2
export
*
from
'
./context/audio
'
export
*
from
'
./context/background-audio
'
export
*
from
'
./context/canvas
'
export
*
from
'
./context/operate-map-player
'
export
*
from
'
./context/operate-video-player
'
...
...
src/platforms/h5/service/api/context/canvas.js
浏览文件 @
ba20aaf2
export
function
operateCanvasContext
(
canvasId
,
pageVm
,
type
,
data
)
{
const
pageId
=
pageVm
.
$page
.
id
UniServiceJSBridge
.
publishHandler
(
pageId
+
'
-canvas-
'
+
canvasId
,
{
const
{
invokeCallbackHandler
:
invoke
}
=
UniServiceJSBridge
export
function
base64ToTempFilePath
({
base64Data
,
x
,
y
,
width
,
height
,
destWidth
,
destHeight
,
canvasId
,
type
,
data
},
pageId
)
fileType
,
quality
}
=
{},
callbackId
)
{
invoke
(
callbackId
,
{
errMsg
:
'
canvasToTempFilePath:ok
'
,
tempFilePath
:
base64Data
})
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录