Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wzj-java
uni-app
提交
404139f5
U
uni-app
项目概览
wzj-java
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
404139f5
编写于
4月 22, 2019
作者:
d-u-a
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update: H5 高清canvas canvasToTempFilePath模糊问题.
上级
d04fabd4
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
193 addition
and
187 deletion
+193
-187
src/core/helpers/hidpi.js
src/core/helpers/hidpi.js
+164
-164
src/core/service/api/context/canvas.js
src/core/service/api/context/canvas.js
+21
-15
src/core/view/components/canvas/index.vue
src/core/view/components/canvas/index.vue
+8
-8
未找到文件。
src/core/
view/components/canva
s/hidpi.js
→
src/core/
helper
s/hidpi.js
浏览文件 @
404139f5
const
pixelRatio
=
(
function
()
{
const
canvas
=
document
.
createElement
(
'
canvas
'
)
const
context
=
canvas
.
getContext
(
'
2d
'
)
const
backingStore
=
context
.
backingStorePixelRatio
||
context
.
webkitBackingStorePixelRatio
||
context
.
mozBackingStorePixelRatio
||
context
.
msBackingStorePixelRatio
||
context
.
oBackingStorePixelRatio
||
context
.
backingStorePixelRatio
||
1
return
(
window
.
devicePixelRatio
||
1
)
/
backingStore
})()
const
forEach
=
function
(
obj
,
func
)
{
for
(
let
key
in
obj
)
{
if
(
obj
.
hasOwnProperty
(
key
))
{
func
(
obj
[
key
],
key
)
}
}
}
const
ratioArgs
=
{
'
fillRect
'
:
'
all
'
,
'
clearRect
'
:
'
all
'
,
'
strokeRect
'
:
'
all
'
,
'
moveTo
'
:
'
all
'
,
'
lineTo
'
:
'
all
'
,
'
arc
'
:
[
0
,
1
,
2
],
'
arcTo
'
:
'
all
'
,
'
bezierCurveTo
'
:
'
all
'
,
'
isPointinPath
'
:
'
all
'
,
'
isPointinStroke
'
:
'
all
'
,
'
quadraticCurveTo
'
:
'
all
'
,
'
rect
'
:
'
all
'
,
'
translate
'
:
'
all
'
,
'
createRadialGradient
'
:
'
all
'
,
'
createLinearGradient
'
:
'
all
'
,
'
setTransform
'
:
[
4
,
5
]
}
if
(
pixelRatio
!==
1
)
{
const
proto
=
CanvasRenderingContext2D
.
prototype
forEach
(
ratioArgs
,
function
(
value
,
key
)
{
proto
[
key
]
=
(
function
(
_super
)
{
return
function
()
{
if
(
this
.
__ignore__
)
{
return
_super
.
apply
(
this
,
arguments
)
}
let
args
=
Array
.
prototype
.
slice
.
call
(
arguments
)
if
(
value
===
'
all
'
)
{
args
=
args
.
map
(
function
(
a
)
{
return
a
*
pixelRatio
})
}
else
if
(
Array
.
isArray
(
value
))
{
for
(
let
i
=
0
;
i
<
value
.
length
;
i
++
)
{
args
[
value
[
i
]]
*=
pixelRatio
}
}
return
_super
.
apply
(
this
,
args
)
}
})(
proto
[
key
])
})
proto
.
stroke
=
(
function
(
_super
)
{
return
function
()
{
if
(
this
.
__ignore__
)
{
return
_super
.
apply
(
this
,
arguments
)
}
this
.
lineWidth
*=
pixelRatio
_super
.
apply
(
this
,
arguments
)
this
.
lineWidth
/=
pixelRatio
}
})(
proto
.
stroke
)
proto
.
fillText
=
(
function
(
_super
)
{
return
function
()
{
if
(
this
.
__ignore__
)
{
return
_super
.
apply
(
this
,
arguments
)
}
const
args
=
Array
.
prototype
.
slice
.
call
(
arguments
)
args
[
1
]
*=
pixelRatio
args
[
2
]
*=
pixelRatio
this
.
font
=
this
.
font
.
replace
(
/
(\d
+
)(
px|em|rem|pt
)
/g
,
function
(
w
,
m
,
u
)
{
return
(
m
*
pixelRatio
)
+
u
}
)
_super
.
apply
(
this
,
args
)
this
.
font
=
this
.
font
.
replace
(
/
(\d
+
)(
px|em|rem|pt
)
/g
,
function
(
w
,
m
,
u
)
{
return
(
m
/
pixelRatio
)
+
u
}
)
}
})(
proto
.
fillText
)
proto
.
strokeText
=
(
function
(
_super
)
{
return
function
()
{
if
(
this
.
__ignore__
)
{
return
_super
.
apply
(
this
,
arguments
)
}
var
args
=
Array
.
prototype
.
slice
.
call
(
arguments
)
args
[
1
]
*=
pixelRatio
// x
args
[
2
]
*=
pixelRatio
// y
this
.
font
=
this
.
font
.
replace
(
/
(\d
+
)(
px|em|rem|pt
)
/g
,
function
(
w
,
m
,
u
)
{
return
(
m
*
pixelRatio
)
+
u
}
)
_super
.
apply
(
this
,
args
)
this
.
font
=
this
.
font
.
replace
(
/
(\d
+
)(
px|em|rem|pt
)
/g
,
function
(
w
,
m
,
u
)
{
return
(
m
/
pixelRatio
)
+
u
}
)
}
})(
proto
.
strokeText
)
proto
.
drawImageByCanvas
=
(
function
(
_super
)
{
return
function
(
canvas
,
srcx
,
srcy
,
srcw
,
srch
,
desx
,
desy
,
desw
,
desh
,
isScale
)
{
if
(
this
.
__ignore__
)
{
return
_super
.
apply
(
this
,
arguments
)
}
srcx
*=
pixelRatio
srcy
*=
pixelRatio
srcw
*=
pixelRatio
srch
*=
pixelRatio
desx
*=
pixelRatio
desy
*=
pixelRatio
desw
=
isScale
?
desw
*
pixelRatio
:
desw
desh
=
isScale
?
desh
*
pixelRatio
:
desh
_super
.
call
(
this
,
canvas
,
srcx
,
srcy
,
srcw
,
srch
,
desx
,
desy
,
desw
,
desh
)
}
})(
proto
.
drawImage
)
proto
.
drawImage
=
(
function
(
_super
)
{
return
function
()
{
if
(
this
.
__ignore__
)
{
return
_super
.
apply
(
this
,
arguments
)
}
this
.
scale
(
pixelRatio
,
pixelRatio
)
_super
.
apply
(
this
,
arguments
)
this
.
scale
(
1
/
pixelRatio
,
1
/
pixelRatio
)
}
})(
proto
.
drawImage
)
}
export
function
wrapper
(
canvas
)
{
canvas
.
style
.
height
=
canvas
.
height
+
'
px
'
canvas
.
style
.
width
=
canvas
.
width
+
'
px
'
canvas
.
width
*=
pixelRatio
const
pixelRatio
=
(
function
()
{
const
canvas
=
document
.
createElement
(
'
canvas
'
)
const
context
=
canvas
.
getContext
(
'
2d
'
)
const
backingStore
=
context
.
backingStorePixelRatio
||
context
.
webkitBackingStorePixelRatio
||
context
.
mozBackingStorePixelRatio
||
context
.
msBackingStorePixelRatio
||
context
.
oBackingStorePixelRatio
||
context
.
backingStorePixelRatio
||
1
return
(
window
.
devicePixelRatio
||
1
)
/
backingStore
})()
const
forEach
=
function
(
obj
,
func
)
{
for
(
let
key
in
obj
)
{
if
(
obj
.
hasOwnProperty
(
key
))
{
func
(
obj
[
key
],
key
)
}
}
}
const
ratioArgs
=
{
'
fillRect
'
:
'
all
'
,
'
clearRect
'
:
'
all
'
,
'
strokeRect
'
:
'
all
'
,
'
moveTo
'
:
'
all
'
,
'
lineTo
'
:
'
all
'
,
'
arc
'
:
[
0
,
1
,
2
],
'
arcTo
'
:
'
all
'
,
'
bezierCurveTo
'
:
'
all
'
,
'
isPointinPath
'
:
'
all
'
,
'
isPointinStroke
'
:
'
all
'
,
'
quadraticCurveTo
'
:
'
all
'
,
'
rect
'
:
'
all
'
,
'
translate
'
:
'
all
'
,
'
createRadialGradient
'
:
'
all
'
,
'
createLinearGradient
'
:
'
all
'
,
'
setTransform
'
:
[
4
,
5
]
}
if
(
pixelRatio
!==
1
)
{
const
proto
=
CanvasRenderingContext2D
.
prototype
forEach
(
ratioArgs
,
function
(
value
,
key
)
{
proto
[
key
]
=
(
function
(
_super
)
{
return
function
()
{
if
(
this
.
__ignore__
)
{
return
_super
.
apply
(
this
,
arguments
)
}
let
args
=
Array
.
prototype
.
slice
.
call
(
arguments
)
if
(
value
===
'
all
'
)
{
args
=
args
.
map
(
function
(
a
)
{
return
a
*
pixelRatio
})
}
else
if
(
Array
.
isArray
(
value
))
{
for
(
let
i
=
0
;
i
<
value
.
length
;
i
++
)
{
args
[
value
[
i
]]
*=
pixelRatio
}
}
return
_super
.
apply
(
this
,
args
)
}
})(
proto
[
key
])
})
proto
.
stroke
=
(
function
(
_super
)
{
return
function
()
{
if
(
this
.
__ignore__
)
{
return
_super
.
apply
(
this
,
arguments
)
}
this
.
lineWidth
*=
pixelRatio
_super
.
apply
(
this
,
arguments
)
this
.
lineWidth
/=
pixelRatio
}
})(
proto
.
stroke
)
proto
.
fillText
=
(
function
(
_super
)
{
return
function
()
{
if
(
this
.
__ignore__
)
{
return
_super
.
apply
(
this
,
arguments
)
}
const
args
=
Array
.
prototype
.
slice
.
call
(
arguments
)
args
[
1
]
*=
pixelRatio
args
[
2
]
*=
pixelRatio
this
.
font
=
this
.
font
.
replace
(
/
(\d
+
)(
px|em|rem|pt
)
/g
,
function
(
w
,
m
,
u
)
{
return
(
m
*
pixelRatio
)
+
u
}
)
_super
.
apply
(
this
,
args
)
this
.
font
=
this
.
font
.
replace
(
/
(\d
+
)(
px|em|rem|pt
)
/g
,
function
(
w
,
m
,
u
)
{
return
(
m
/
pixelRatio
)
+
u
}
)
}
})(
proto
.
fillText
)
proto
.
strokeText
=
(
function
(
_super
)
{
return
function
()
{
if
(
this
.
__ignore__
)
{
return
_super
.
apply
(
this
,
arguments
)
}
var
args
=
Array
.
prototype
.
slice
.
call
(
arguments
)
args
[
1
]
*=
pixelRatio
// x
args
[
2
]
*=
pixelRatio
// y
this
.
font
=
this
.
font
.
replace
(
/
(\d
+
)(
px|em|rem|pt
)
/g
,
function
(
w
,
m
,
u
)
{
return
(
m
*
pixelRatio
)
+
u
}
)
_super
.
apply
(
this
,
args
)
this
.
font
=
this
.
font
.
replace
(
/
(\d
+
)(
px|em|rem|pt
)
/g
,
function
(
w
,
m
,
u
)
{
return
(
m
/
pixelRatio
)
+
u
}
)
}
})(
proto
.
strokeText
)
proto
.
drawImageByCanvas
=
(
function
(
_super
)
{
return
function
(
canvas
,
srcx
,
srcy
,
srcw
,
srch
,
desx
,
desy
,
desw
,
desh
,
isScale
)
{
if
(
this
.
__ignore__
)
{
return
_super
.
apply
(
this
,
arguments
)
}
srcx
*=
pixelRatio
srcy
*=
pixelRatio
srcw
*=
pixelRatio
srch
*=
pixelRatio
desx
*=
pixelRatio
desy
*=
pixelRatio
desw
=
isScale
?
desw
*
pixelRatio
:
desw
desh
=
isScale
?
desh
*
pixelRatio
:
desh
_super
.
call
(
this
,
canvas
,
srcx
,
srcy
,
srcw
,
srch
,
desx
,
desy
,
desw
,
desh
)
}
})(
proto
.
drawImage
)
proto
.
drawImage
=
(
function
(
_super
)
{
return
function
()
{
if
(
this
.
__ignore__
)
{
return
_super
.
apply
(
this
,
arguments
)
}
this
.
scale
(
pixelRatio
,
pixelRatio
)
_super
.
apply
(
this
,
arguments
)
this
.
scale
(
1
/
pixelRatio
,
1
/
pixelRatio
)
}
})(
proto
.
drawImage
)
}
export
function
wrapper
(
canvas
)
{
canvas
.
style
.
height
=
canvas
.
height
+
'
px
'
canvas
.
style
.
width
=
canvas
.
width
+
'
px
'
canvas
.
width
*=
pixelRatio
canvas
.
height
*=
pixelRatio
console
.
log
(
canvas
.
width
)
console
.
log
(
canvas
.
height
)
console
.
log
(
canvas
.
height
)
}
src/core/service/api/context/canvas.js
浏览文件 @
404139f5
import
createCallbacks
from
'
uni-helpers/callbacks
'
import
{
wrapper
}
from
'
uni-helpers/hidpi
'
const
canvasEventCallbacks
=
createCallbacks
(
'
canvasEvent
'
)
...
...
@@ -257,6 +258,7 @@ var tempCanvas
function
getTempCanvas
()
{
if
(
!
tempCanvas
)
{
tempCanvas
=
document
.
createElement
(
'
canvas
'
)
wrapper
(
tempCanvas
)
}
return
tempCanvas
}
...
...
@@ -816,7 +818,7 @@ export function canvasToTempFilePath ({
pageId
=
app
.
$route
.
params
.
__id__
}
else
{
invoke
(
callbackId
,
{
errMsg
:
'
canvas
PutImageData
:fail
'
errMsg
:
'
canvas
ToTempFilePath
:fail
'
})
return
}
...
...
@@ -840,20 +842,24 @@ export function canvasToTempFilePath ({
canvas
.
width
=
data
.
width
canvas
.
height
=
data
.
height
var
c2d
=
canvas
.
getContext
(
'
2d
'
)
c2d
.
putImageData
(
imgData
,
0
,
0
)
var
base64
=
canvas
.
toDataURL
(
'
image/png
'
)
var
img
=
new
Image
()
img
.
onload
=
function
()
{
canvas
.
width
=
destWidth
||
imgData
.
width
canvas
.
height
=
destHeight
||
imgData
.
height
c2d
.
drawImage
(
img
,
0
,
0
)
base64
=
canvas
.
toDataURL
(
`image/
${
fileType
.
toLowerCase
()}
`
,
qualit
)
invoke
(
callbackId
,
{
errMsg
:
'
canvasToTempFilePath:ok
'
,
tempFilePath
:
base64
})
}
img
.
src
=
base64
c2d
.
putImageData
(
imgData
,
0
,
0
,
0
,
0
,
destWidth
||
imgData
.
width
,
destHeight
||
imgData
.
height
)
var
base64
=
canvas
.
toDataURL
(
`image/
${
fileType
.
toLowerCase
()}
`
,
qualit
)
invoke
(
callbackId
,
{
errMsg
:
'
canvasToTempFilePath:ok
'
,
tempFilePath
:
base64
})
// var img = new Image()
// img.onload = function () {
// canvas.width = destWidth || imgData.width
// canvas.height = destHeight || imgData.height
// c2d.drawImage(img, 0, 0)
// base64 = canvas.toDataURL(`image/${fileType.toLowerCase()}`, qualit)
// invoke(callbackId, {
// errMsg: 'canvasToTempFilePath:ok',
// tempFilePath: base64
// })
// }
// img.src = base64
})
operateCanvas
(
canvasId
,
pageId
,
'
getImageData
'
,
{
x
,
...
...
src/core/view/components/canvas/index.vue
浏览文件 @
404139f5
<
template
>
<uni-canvas
:canvas-id=
"canvasId"
:disable-scroll=
"disableScroll"
<uni-canvas
:canvas-id=
"canvasId"
:disable-scroll=
"disableScroll"
v-on=
"_listeners"
>
<canvas
ref=
"canvas"
width=
"300"
<canvas
ref=
"canvas"
width=
"300"
height=
"150"
/>
<div
style=
"position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;"
>
<slot
/>
...
...
@@ -19,7 +19,7 @@ import {
import
{
wrapper
}
from
'
.
/hidpi
'
}
from
'
uni-helpers
/hidpi
'
function
resolveColor
(
color
)
{
color
=
color
.
slice
(
0
)
...
...
@@ -459,4 +459,4 @@ export default {
width
:
100%
;
height
:
100%
;
}
</
style
>
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录