Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
m0_68066342
uni-app
提交
7062b625
U
uni-app
项目概览
m0_68066342
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
0
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,发现更多精彩内容 >>
提交
7062b625
编写于
12月 27, 2019
作者:
Q
qiang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: 优化H5端canvas组件内存占用
上级
6537109e
变更
3
显示空白变更内容
内联
并排
Showing
3 changed file
with
130 addition
and
114 deletion
+130
-114
src/core/helpers/hidpi.js
src/core/helpers/hidpi.js
+6
-5
src/core/service/api/context/canvas.js
src/core/service/api/context/canvas.js
+3
-1
src/core/view/components/canvas/index.vue
src/core/view/components/canvas/index.vue
+121
-108
未找到文件。
src/core/helpers/hidpi.js
浏览文件 @
7062b625
export
const
pixelRatio
=
(
function
()
{
const
canvas
=
document
.
createElement
(
'
canvas
'
)
canvas
.
height
=
canvas
.
width
=
0
const
context
=
canvas
.
getContext
(
'
2d
'
)
const
backingStore
=
context
.
backingStorePixelRatio
||
context
.
webkitBackingStorePixelRatio
||
...
...
src/core/service/api/context/canvas.js
浏览文件 @
7062b625
...
...
@@ -259,10 +259,12 @@ var methods3 = ['setFillStyle', 'setTextAlign', 'setStrokeStyle', 'setGlobalAlph
]
var
tempCanvas
function
getTempCanvas
()
{
function
getTempCanvas
(
width
=
0
,
height
=
0
)
{
if
(
!
tempCanvas
)
{
tempCanvas
=
document
.
createElement
(
'
canvas
'
)
}
tempCanvas
.
width
=
width
tempCanvas
.
height
=
height
return
tempCanvas
}
...
...
src/core/view/components/canvas/index.vue
浏览文件 @
7062b625
...
...
@@ -12,7 +12,7 @@
</div>
<v-uni-resize-sensor
ref=
"sensor"
@
resize=
"_resize"
/>
@
resize=
"_resize"
/>
</uni-canvas>
</
template
>
<
script
>
...
...
@@ -42,6 +42,16 @@ function processTouches (target, touches) {
})
}
var
tempCanvas
function
getTempCanvas
(
width
=
0
,
height
=
0
)
{
if
(
!
tempCanvas
)
{
tempCanvas
=
document
.
createElement
(
'
canvas
'
)
}
tempCanvas
.
width
=
width
tempCanvas
.
height
=
height
return
tempCanvas
}
export
default
{
name
:
'
Canvas
'
,
mixins
:
[
subscriber
],
...
...
@@ -97,6 +107,10 @@ export default {
height
:
this
.
$refs
.
sensor
.
$el
.
offsetHeight
})
},
beforeDestroy
()
{
const
canvas
=
this
.
$refs
.
canvas
canvas
.
height
=
canvas
.
width
=
0
},
methods
:
{
_handleSubscribe
({
type
,
...
...
@@ -392,7 +406,6 @@ export default {
height
=
canvas
.
offsetHeight
-
y
}
try
{
const
newCanvas
=
document
.
createElement
(
'
canvas
'
)
if
(
!
hidpi
)
{
if
(
!
destWidth
&&
!
destHeight
)
{
destWidth
=
Math
.
round
(
width
*
pixelRatio
)
...
...
@@ -406,12 +419,12 @@ export default {
destWidth
=
width
destHeight
=
height
}
newCanvas
.
width
=
destWidth
newCanvas
.
height
=
destHeight
const
newCanvas
=
getTempCanvas
(
destWidth
,
destHeight
)
const
context
=
newCanvas
.
getContext
(
'
2d
'
)
context
.
__hidpi__
=
true
context
.
drawImageByCanvas
(
canvas
,
x
,
y
,
width
,
height
,
0
,
0
,
destWidth
,
destHeight
,
false
)
imgData
=
context
.
getImageData
(
0
,
0
,
destWidth
,
destHeight
)
newCanvas
.
height
=
newCanvas
.
width
=
0
}
catch
(
error
)
{
if
(
!
callbackId
)
{
return
...
...
@@ -454,12 +467,11 @@ export default {
if
(
!
height
)
{
height
=
Math
.
round
(
data
.
length
/
4
/
width
)
}
const
canvas
=
document
.
createElement
(
'
canvas
'
)
canvas
.
width
=
width
canvas
.
height
=
height
const
canvas
=
getTempCanvas
(
width
,
height
)
const
context
=
canvas
.
getContext
(
'
2d
'
)
context
.
putImageData
(
new
ImageData
(
new
Uint8ClampedArray
(
data
),
width
,
height
),
0
,
0
)
this
.
$refs
.
canvas
.
getContext
(
'
2d
'
).
drawImage
(
canvas
,
x
,
y
,
width
,
height
)
canvas
.
height
=
canvas
.
width
=
0
}
catch
(
error
)
{
UniViewJSBridge
.
publishHandler
(
'
onCanvasMethodCallback
'
,
{
callbackId
,
...
...
@@ -520,20 +532,21 @@ export default {
}
destWidth
=
res
.
width
destHeight
=
res
.
height
const
canvas
=
document
.
createElement
(
'
canvas
'
)
canvas
.
width
=
destWidth
canvas
.
height
=
destHeight
const
canvas
=
getTempCanvas
(
destWidth
,
destHeight
)
const
c2d
=
canvas
.
getContext
(
'
2d
'
)
c2d
.
putImageData
(
imgData
,
0
,
0
)
let
base64
=
canvas
.
toDataURL
(
'
image/png
'
)
canvas
.
height
=
canvas
.
width
=
0
const
img
=
new
Image
()
img
.
onload
=
()
=>
{
const
canvas
=
getTempCanvas
(
destWidth
,
destHeight
)
if
(
fileType
===
'
jpeg
'
)
{
c2d
.
fillStyle
=
'
#fff
'
c2d
.
fillRect
(
0
,
0
,
destWidth
,
destHeight
)
}
c2d
.
drawImage
(
img
,
0
,
0
)
base64
=
canvas
.
toDataURL
(
`image/
${
fileType
}
`
,
qualit
)
canvas
.
height
=
canvas
.
width
=
0
UniViewJSBridge
.
publishHandler
(
'
onCanvasMethodCallback
'
,
{
callbackId
,
data
:
{
...
...
@@ -548,18 +561,18 @@ export default {
}
</
script
>
<
style
>
uni-canvas
{
uni-canvas
{
width
:
300px
;
height
:
150px
;
display
:
block
;
position
:
relative
;
}
}
uni-canvas
>
canvas
{
uni-canvas
>
canvas
{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
}
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录