uni-app 最新版HbuilderX ios在WKWebview下 canvas对象异常

uni-app 最新版HbuilderX ios在WKWebview下 canvas对象异常

详细问题描述

（DCloud产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，请仔细描述你的环境和重现方式，否则DCloud很难排查解决你的问题）

[内容]

运行环境

  • win10
  • HBuilderX 版本2.3.3.20190923
  • 链接ios真机运行
  • ios12
  • iphone6SPlus

已测试，同样的代码使用UIWebview正常，使用WKWebview会导致canvas对象异常。

var img = new Image(),
canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d");
img.crossOrigin = "Anonymous";
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage( img, 0, 0 );
console.log(canvas.toDataURL("image/png"));
}

img.src = src;
这里的src如果选择网络资源表现正常;
如果是使用plus.gallery.pick获取到的本地文件，会抛异常，canvas无法正常执行，添加了crossOrigin也无效。


更多关于uni-app 最新版HbuilderX ios在WKWebview下 canvas对象异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

https://ext.dcloud.net.cn/plugin?id=123未能解决我的问题， 最后发现是这么处理的 var _this = this; plus.gallery.pick(function(a) { plus.io.resolveLocalFileSystemURL(a, function(entry) { var imgPath = entry.toRemoteURL();//原来是 entry.toLocalURL()

更多关于uni-app 最新版HbuilderX ios在WKWebview下 canvas对象异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


上网查了两天两夜，最后按照楼上的方案搞定了。

真的是万分感谢，找个好久的解决方案，我给跪了。

如果canvas使用网络图像遇到跨域问题，需要服务端设置图像的响应头：Access-Control-Allow-Origin 如果canvas使用本地图像遇到跨域问题，可以使用plus接口将图像转换为base64再使用，相关插件：https://ext.dcloud.net.cn/plugin?id=123

上网查了两天两夜，最后按照楼上的方案搞定了。

我也解决了，mui写切换wkwebview本地canvas失效的问题，感谢楼主

你好，请问刚开发一个app，在测试时所有功能正常。但打包后安装在安卓手机上获取不到ajax请求的数据，点击跳转到新窗口的图表也显示不出来怎么回事？

这是一个已知的WKWebview与本地文件系统的兼容性问题。在WKWebview下，由于iOS的安全策略限制，直接操作本地文件路径的canvas会触发CORS错误。

解决方案：

  1. 对于从相册选取的图片，建议先使用plus.io.resolveLocalFileSystemURL转换为base64格式再处理
plus.gallery.pick(function(e){
    plus.io.resolveLocalFileSystemURL(e.files[0], function(entry){
        entry.file(function(file){
            var reader = new plus.io.FileReader();
            reader.onloadend = function(evt){
                var base64 = evt.target.result;
                // 使用base64数据
                img.src = base64;
            };
            reader.readAsDataURL(file);
        });
    });
});
  1. 或者使用uni-app的uni.getImageInfo API获取临时路径：
uni.chooseImage({
    success: (res) => {
        uni.getImageInfo({
            src: res.tempFilePaths[0],
            success: (info) => {
                img.src = info.path;
            }
        });
    }
});
回到顶部