Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
anyefeiyu
uni-app
提交
aa82dfb4
U
uni-app
项目概览
anyefeiyu
/
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,发现更多精彩内容 >>
提交
aa82dfb4
编写于
9月 10, 2020
作者:
Q
qiang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: 解决 App-Android Chrome85+ Canvas 绘制本地图像跨域问题 question/103303
上级
fcf659c4
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
76 addition
and
96 deletion
+76
-96
src/core/view/components/canvas/index.vue
src/core/view/components/canvas/index.vue
+76
-96
未找到文件。
src/core/view/components/canvas/index.vue
浏览文件 @
aa82dfb4
...
...
@@ -318,74 +318,63 @@ export default {
* 加载图像
*/
function
loadImage
()
{
self
.
_images
[
src
]
=
new
Image
()
self
.
_images
[
src
].
onload
=
function
()
{
self
.
_images
[
src
].
ready
=
true
}
/**
* 从Blob加载
* @param {Blob} blob
*/
function
loadBlob
(
blob
)
{
self
.
_images
[
src
].
src
=
(
window
.
URL
||
window
.
webkitURL
).
createObjectURL
(
blob
)
const
image
=
self
.
_images
[
src
]
=
new
Image
()
image
.
onload
=
function
()
{
image
.
ready
=
true
}
/**
* 从本地文件加载
* @param {string} path 文件路径
*/
function
loadFile
(
path
)
{
var
bitmap
=
new
plus
.
nativeObj
.
Bitmap
(
'
bitmap
'
+
Date
.
now
())
bitmap
.
load
(
path
,
function
()
{
self
.
_images
[
src
].
src
=
bitmap
.
toBase64Data
()
bitmap
.
clear
()
},
function
()
{
bitmap
.
clear
()
console
.
error
(
'
preloadImage error
'
)
})
function
onError
()
{
image
.
src
=
src
}
plus
.
io
.
resolveLocalFileSystemURL
(
path
,
function
(
entry
)
{
entry
.
file
(
function
(
file
)
{
var
fileReader
=
new
plus
.
io
.
FileReader
()
fileReader
.
onload
=
function
(
data
)
{
image
.
src
=
data
.
target
.
result
}
fileReader
.
onerror
=
onError
fileReader
.
readAsDataURL
(
file
)
},
onError
)
},
onError
)
}
/**
* 从网络加载
* @param {string} url 文件地址
*/
function
loadUrl
(
url
)
{
function
plusDownload
()
{
plus
.
downloader
.
createDownload
(
url
,
{
filename
:
'
_doc/uniapp_temp/download/
'
},
function
(
d
,
status
)
{
if
(
status
===
200
)
{
loadFile
(
d
.
filename
)
}
else
{
self
.
_images
[
src
].
src
=
src
}
}).
start
()
}
var
xhr
=
new
XMLHttpRequest
()
xhr
.
open
(
'
GET
'
,
url
,
true
)
xhr
.
responseType
=
'
blob
'
xhr
.
onload
=
function
()
{
if
(
this
.
status
===
200
)
{
loadBlob
(
this
.
response
)
plus
.
downloader
.
createDownload
(
url
,
{
filename
:
'
_doc/uniapp_temp/download/
'
},
function
(
d
,
status
)
{
if
(
status
===
200
)
{
loadFile
(
d
.
filename
)
}
else
{
image
.
src
=
src
}
}
xhr
.
onerror
=
__PLATFORM__
===
'
app-plus
'
?
plusDownload
:
function
()
{
self
.
_images
[
src
].
src
=
src
}
xhr
.
send
()
}).
start
()
}
if
(
__PLATFORM__
===
'
app-plus
'
&&
(
!
window
.
webkit
||
!
window
.
webkit
.
messageHandlers
))
{
self
.
_images
[
src
].
src
=
src
}
else
{
// 解决 PLUS-APP(wkwebview)以及 H5 图像跨域问题(H5图像响应头需包含access-control-allow-origin)
if
(
__PLATFORM__
===
'
app-plus
'
&&
src
.
indexOf
(
'
http://
'
)
!==
0
&&
src
.
indexOf
(
'
https://
'
)
!==
0
&&
!
/^data:.*,.*/
.
test
(
src
))
{
loadFile
(
src
)
}
else
if
(
/^data:.*,.*/
.
test
(
src
))
{
self
.
_images
[
src
].
src
=
src
}
else
{
loadUrl
(
src
)
if
(
__PLATFORM__
===
'
app-plus
'
)
{
// WKWebView
if
(
window
.
webkit
&&
window
.
webkit
.
messageHandlers
)
{
if
(
src
.
indexOf
(
'
file://
'
)
===
0
)
{
loadFile
(
src
)
return
}
else
if
(
src
.
indexOf
(
'
http://
'
)
===
0
||
src
.
indexOf
(
'
https://
'
)
===
0
)
{
loadUrl
(
src
)
return
}
}
// Chrome85+ 本地路径
if
(
src
.
indexOf
(
'
file://
'
)
===
0
&&
navigator
.
vendor
===
'
Google Inc.
'
&&
Promise
.
any
)
{
image
.
crossOrigin
=
'
anonymous
'
}
}
image
.
src
=
src
}
})
},
...
...
@@ -437,29 +426,30 @@ export default {
if
(
!
height
)
{
height
=
canvas
.
offsetHeight
-
y
}
try
{
if
(
!
hidpi
)
{
if
(
!
destWidth
&&
!
destHeight
)
{
destWidth
=
Math
.
round
(
width
*
pixelRatio
)
destHeight
=
Math
.
round
(
height
*
pixelRatio
)
}
else
if
(
!
destWidth
)
{
destWidth
=
Math
.
round
(
width
/
height
*
destHeight
)
}
else
if
(
!
destHeight
)
{
destHeight
=
Math
.
round
(
height
/
width
*
destWidth
)
}
}
else
{
destWidth
=
width
destHeight
=
height
}
const
newCanvas
=
getTempCanvas
(
destWidth
,
destHeight
)
const
context
=
newCanvas
.
getContext
(
'
2d
'
)
if
(
type
===
'
jpeg
'
||
type
===
'
jpg
'
)
{
type
=
'
jpeg
'
context
.
fillStyle
=
'
#fff
'
context
.
fillRect
(
0
,
0
,
destWidth
,
destHeight
)
if
(
!
hidpi
)
{
if
(
!
destWidth
&&
!
destHeight
)
{
destWidth
=
Math
.
round
(
width
*
pixelRatio
)
destHeight
=
Math
.
round
(
height
*
pixelRatio
)
}
else
if
(
!
destWidth
)
{
destWidth
=
Math
.
round
(
width
/
height
*
destHeight
)
}
else
if
(
!
destHeight
)
{
destHeight
=
Math
.
round
(
height
/
width
*
destWidth
)
}
context
.
__hidpi__
=
true
context
.
drawImageByCanvas
(
canvas
,
x
,
y
,
width
,
height
,
0
,
0
,
destWidth
,
destHeight
,
false
)
}
else
{
destWidth
=
width
destHeight
=
height
}
const
newCanvas
=
getTempCanvas
(
destWidth
,
destHeight
)
const
context
=
newCanvas
.
getContext
(
'
2d
'
)
if
(
type
===
'
jpeg
'
||
type
===
'
jpg
'
)
{
type
=
'
jpeg
'
context
.
fillStyle
=
'
#fff
'
context
.
fillRect
(
0
,
0
,
destWidth
,
destHeight
)
}
context
.
__hidpi__
=
true
context
.
drawImageByCanvas
(
canvas
,
x
,
y
,
width
,
height
,
0
,
0
,
destWidth
,
destHeight
,
false
)
let
result
try
{
if
(
dataType
===
'
base64
'
)
{
data
=
newCanvas
.
toDataURL
(
`image/
${
type
}
`
,
qualit
)
}
else
{
...
...
@@ -467,35 +457,25 @@ export default {
// fix [...]展开TypedArray在低版本手机报错的问题,使用Array.prototype.slice
data
=
Array
.
prototype
.
slice
.
call
(
imgData
.
data
)
}
newCanvas
.
height
=
newCanvas
.
width
=
0
context
.
__hidpi__
=
false
}
catch
(
error
)
{
if
(
!
callbackId
)
{
return
}
UniViewJSBridge
.
publishHandler
(
'
onCanvasMethodCallback
'
,
{
callbackId
,
data
:
{
errMsg
:
'
canvasGetImageData:fail
'
}
},
this
.
$page
.
id
)
return
}
if
(
!
callbackId
)
{
return
{
result
=
{
errMsg
:
'
canvasGetImageData:ok
'
,
data
,
width
:
destWidth
,
height
:
destHeight
}
}
catch
(
error
)
{
result
=
{
errMsg
:
`canvasGetImageData:fail
${
error
}
`
}
}
newCanvas
.
height
=
newCanvas
.
width
=
0
context
.
__hidpi__
=
false
if
(
!
callbackId
)
{
return
result
}
else
{
UniViewJSBridge
.
publishHandler
(
'
onCanvasMethodCallback
'
,
{
callbackId
,
data
:
{
errMsg
:
'
canvasGetImageData:ok
'
,
data
,
width
:
destWidth
,
height
:
destHeight
}
data
:
result
},
this
.
$page
.
id
)
}
},
...
...
@@ -560,7 +540,7 @@ export default {
UniViewJSBridge
.
publishHandler
(
'
onCanvasMethodCallback
'
,
{
callbackId
,
data
:
{
errMsg
:
'
toTempFilePath:fail
'
errMsg
:
res
.
errMsg
.
replace
(
'
canvasPutImageData
'
,
'
toTempFilePath
'
)
}
},
this
.
$page
.
id
)
return
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录